Pass by Value vs. Pass by Reference in JavaScript
Pass by Value:
In JavaScript, primitive types (such as numbers, strings, and booleans) are passed by value. This means that when you pass a primitive value as an argument to a function or assign it to another variable, a copy of the value is created. Any modifications made to the copy do not affect the original value.
We'll understand this concept with the help of an example.
For Example: Assigning a primitive value to another variable.
let a = 20;
let b = a; // Assigning the value of 'a' to 'b'
b = 30; // Modifying 'b' does not affect 'a'
console.log(a); // Output: 20
console.log(b); // Output: 30
Inference of the example: In this example, the value of a is assigned to b. Although b initially holds the same value as a, modifying b does not impact the value of a. This demonstrates the pass by value behavior for primitive types.
It's important to note that objects (including arrays and functions) in JavaScript are passed by reference. When you pass an object as an argument or assign it to another variable, you are actually passing a reference to the same object. Modifying the object through the reference will affect the original object.
It's important to know that primitive types in JavaScript are passed by value, meaning that a copy of the value is created. Modifications to the copy do not affect the original value. On the other hand, objects are passed by reference, so changes made to an object through a reference will impact the original object.
Pass by Reference:
In JavaScript, objects (including arrays and functions) are passed by reference. When you pass an object as an argument to a function or assign it to another variable, you are actually passing a reference to the same object in memory. This means that any modifications made to the object through the reference will affect the original object.
We'll understand this concept with the help of an example.
For Example: Assigning an object to another variable
let obj1 = { value: 10 };
let obj2 = obj1; // Assigning obj1 to obj2
obj2.value = 20; // Modifying obj2 affects obj1
console.log(obj1.value); // Output: 20
console.log(obj2.value); // Output: 20
Inference of the example: In this example, the value of obj1 is assigned to obj2. Both obj1 and obj2 now reference the same object in memory. Modifying obj2 also affects obj1 because they are pointing to the same underlying object.
It's important to note that JavaScript passes object references by value. When you pass an object to a function, a copy of the reference to the object is created and passed to the function. This means that reassigning the reference within the function does not affect the original reference outside the function.
In JavaScript, objects (including arrays and functions) are passed by reference. When you pass an object as an argument or assign it to another variable, you are passing a reference to the same object in memory. Modifying the object through the reference will impact the original object. However, reassigning the reference within a function does not affect the original reference outside the function.
Pass by Value vs. Pass by Reference in JavaScript
Pass by Value |
Pass by Reference |
Process of copying the function parameter value to another. |
Process of passing the actual parameter to the function. |
Make a copy of the actual parameter. |
The address of the actual parameter passes to the function |
Requires more memory |
Requires less memory |
Needs more time since it involves copying values |
Requires less time since there is no copying values |
Building a multi-threaded application. |
Passing objects of large structs or classes |
Conclusion
In summary, primitive types in JavaScript are passed by value, meaning a copy of the value is created. Modifications to the copy do not affect the original value. This concept is called pass by value. Pass by reference is where objects, on the other hand, are passed by reference. When an object is passed, a reference to the original object is passed. Modifying the object through the reference will impact the original object, but reassigning the reference itself within a function or variable does not affect the original reference.