JavaScript Pass by Reference or Value: 4 Essential Facts

JavaScript pass by reference means passing a non-primitive data type variable (such as objects, arrays, and functions) as a reference or address to a function parameter. Any changes made to the reference variable inside the function also change the original variable, as it was passed by address and not by value.

In JavaScript, we can pass function parameter values in two ways. Passed by value, and passed by reference.

JavaScript pass by value means to pass a primitive data type variable (such as a string, number, null, undefined, or boolean) value into a function parameter. Any changes made to the reference variable inside the function do not change the original variable value.

In this “javascript pass by reference or value,” we are going to discuss everything about those, including working code examples. So stay with us.

Look at the JS Pass by Value Code Example

<script>

   function updateVersion(version) {
      version = version+1;
      // invoked first
      console.log(version); //Output: 3   
   }
   
   let version = 2;
   
   // Pass version to the updateVersion version parameter
   let nextVersion = updateVersion(version);
   
   // updateVersion function modified the version value
   // But we don't see any impact in this caller section
   // JavaScript Pass by Reference or Value
   console.log(version); // Output: 2

</script>        

In this example, we define a function called updateVersion that takes a parameter called version. Inside the function, we increase the version number by 1. Print the updated version number into the console.

We declare a variable called version and assign it the value of 2. Now we call the updateVersion function and pass the version variable as an argument. Finally, we print the value of the version variable to the console.

What do we find? We see that the value of version within the updateVersion function is 3. But after calling the function, the version variable value is changed, and it’s 2.

Because the updateVersion function did not modify the caller version variable, rather, the function created a copy of the version variable first and then increased it by 1.

As the caller variable was not changed in the programming language, we termed it “Call by Value”. A classic example of “JS Pass by Value”.

Look at the JavaScript Pass by Reference Code Example

<script>

   // JavaScript Pass by reference
   function updateVersion(version) {
      version.V = version.V+1;
      // JS pass by reference
      console.log(version.V); //Output: 3   
   }
   
   let version = {V:2};
   
   // Pass version object to the updateVersion version parameter
   updateVersion(version);
   
   // updateVersion function modified the version value
   // Now we see the impact in this caller section
   // JS pass by reference
   console.log(version.V); // Output: 3

</script>        

In this example, we have created a version object and passed it to the updateVersion function, which then changes the V property of the version object. Print the updated version number into the console, and we found the updated version number 3.

But when we print the version number outside the updateVersion function, we see that our version number has also changed to 3.

It’s happened because when we send a non-primary data type as a function parameter, JavaScript automatically considers it a pass-by-reference, not a pass-by-value, and doesn’t make another copy of the caller variable. Rather, use the caller variable address within the function. That’s why we see the version number also updated in the caller variable after the execution of the updateVersion function. A classic example of “JS Pass by Reference”.

Note

In JavaScript, there is no special modifier to define a function call, either by value or by reference. JavaScript automatically treats a function call as a call-by-value for primitive type transfers. And as a call-by-reference for non-primitive-type transfers.

READ MORE >>> JavaScript Pass by Reference or Value