Javascript pass by reference or value

In this article, we are going to see how javascript pass by reference or value works and the difference between the two methods.


Table of Contents



Introduction to javascript pass by reference and pass by value

Before diving into javascript pass by reference or pass by value functions, it is important to understand the difference between primitives and objects.

Primitive values: These are the most basic values one can think of, which includes, undefined, null, boolean, string, and numbers. Primitive values are passed by value in javascript

Whereas all objects (including functions) are passed by reference in javascript.

Let us understand what pass by reference and pass by value is before looking at examples.


Javascript pass by reference:

In Pass by Reference, a function is called by directly passing the reference/address of the variable as the argument. Changing the argument inside the function affects the variable passed from outside the function. In Javascript objects and arrays are passed by reference.

//javascript pass by reference

function callByReference(varObj) {

 console.log("Inside Call by Reference Method");

 varObj.a = 100;

 console.log(varObj);

}

let varObj = {a:1};

console.log("Before Call by Reference Method");

console.log(varObj);

callByReference(varObj)

console.log("After Call by Reference Method");

console.log(varObj);}


Output



Before Call by Reference Method

{a: 1}

Inside Call by Reference Method

{a: 100}

After Call by Reference Method

{a: 100}



Javascript pass by value:

In javascript pass by value, the function is called by directly passing the value of the variable as the argument. Therefore, even changing the argument inside the function doesn’t affect the variable passed from outside the function.

It is important to note that in javascript, all function arguments are always passed by value. That is, JavaScript copies the values of the passing variables into arguments inside of the function.

//javascript pass by value

function square(x) {

    x = x * x;

    return x;

}

var y = 10;

var result = square(y);

console.log(y); // 10 -- no change
console.log(result); // 100 
 


Code Explanation

As you can see here,once we have passed the variable y to the function square, the value of y is copied to the variable x by javascript (hence pass by value).

Note that passing a functional argument by value does not have an impact on the original variable itself, as when you create a new variable (y in this case) and assign it to the value of another variable (x), another spot in memory separate from the original variable is created and a copy of (x) is placed in the new variables spot in memory. So, by value copies the value of the original variable (a) into two separate spots in memory.

On the other hand, in this case had we passed variable y by reference, then its value would have changed to 100, as in pass by reference, the function takes the original variable itself and uses it in the function rather than using a copy of the variable.


Parting Words:

On comparing both functions, namely javascript pass by reference, pass by value, we can see that ALL objects interact by reference in Javascript, so when setting equal to each other or passing to a function they all point to the same location so when you change one object you change them all. This is a stark difference compared to pass by value, wherein the pass by value function copies the value into two separate spots in memory effectively making them entirely separate entities despite one initially being set equal to the other.