Call By Value vs Call By Reference In JS

Before getting into the detail of Call By Value and Call By Reference, let’s learn some basic concepts and terms, that will make it easier to understand the whole process.

So, what is a call here, the call is referred to a function call, and when we say call by value, that means we are passing values as an argument to the function and when we say call by reference that means we are passing references as an argument to the function . It will be more clear after we learn about value, references, arguments and parameters.

Let’s talk about what are values and references and how they are created:

When a variable is declared, it is assigned a memory address in the computer. For example – If I declare a variable named ‘a’ as “var a = 10;” , it is stored in memory as shown below:

So, value is 10 and reference is the memory address : 0012CCGWH80.

Parameters : The variables that are declared inside parentheses during the function definition are called the parameters.So, in the function definition below value1 and value2 are parameters.

function sum(value1, value2)----> parameters
{
var total= value1+value2;
return total;
}

Arguments: The actual values that are passed to the function on which the function performs the action are called arguments.

Now, when we invoke/call the above function , a and b are the arguments

var a = 10; 
var b = 20;
var c = sum(a, b);----> arguments
console.log("Total "+ c);

Now you have got an idea about parameters, arguments, values and references , let’s move forward to understand the concept of Call By Value.

The call by value method of passing arguments to a function copies the actual value of an argument into the formal parameter of the function. In this case, changes made to the parameter inside the function have no effect on the arguments. Let’s take an example of a function defined to swap values of two variables:

1. var value1 = 10;
2. var value2 = 20;
3. swap(value1, value2);
4. function swap(value1, value2)
5. {
6.   var value3 = value1;
7.   value1 = value2;
8.   value2 = value3;
9.    console.log("After Swapping Inside the function " + value1); //Output 20
10.   console.log("After Swapping Inside the function " + value2);//Output 10
11. }
12. console.log("After Swapping Outside the function " + value1);//Output 10
13. console.log("After Swapping Outside  the function " + value2);// Output 20

On line 3 swap() function is invoked and values are passed to function definition. On line 4 two new local variables are created and the value of these local variables is swapped inside the function. The value of global variables remains unchanged after swapping as we passed the value and not the address of the variables.

Call By Reference:

The call by reference method of passing arguments to a function copies the address of an argument into the formal parameter. Inside the function, the address is used to access the actual argument used in the call. It means the changes made to the parameter affect the passed argument. Let’s look at an example below:

 1. var person1 ={firstName:"Aakrati", lastName: "Goel"};
 2. var person2 = {firstName:"Rahul", lastName:"Garg"};
 3. swap(person1, person2);
 4. console.log("after swapping"+ person1.firstName+" "+person2.firstName);
 5. function swap(personA, personB)
 6.  {
 7.     var c = new Object();
 8.     c.firstName = personA.firstName;
 9.     console.log(personA.firstName);
 10.    console.log(c.firstName);
 11.    personA.firstName=personB.firstName;
 12.    console.log(c.firstName);
 13.    personB.firstName=c.firstName;
 14.    console.log("After swapping " + personA.firstName+ " "+ personB.firstName);
 15. }

When Person1 and Person2 objects are passed as an argument to the swap() function on line 3 , the address of these objects is passed. Parameters PersonA and PersonB receive the address of these objects . In this case new objects are not created and they refer to the same address . So, when the values are swapped they are reflected on Person1 and Person2 as well because the values at the same addresses are swapped.

* Important note : Objects and Array(as it is also an object) follow the Call By Reference method.

Another important thing to note here is that you cannot declare the parameters with var, let or const keyword as it will give you an error “parameter declaration required”, In Javascript the parameter declaration is just the name of the variable.

This was all about Call By Value and Call By Reference .