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
- Javascript pass by referencne
- Javascript pass by value
- Parting Words
- Other Related Concepts
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.
