Is Javascript Pass By Value or Pass by Reference?
Software Engineer @YaraInternational | Full-stack developer | Problem solver |...
In this article, we are going to see how javascript pass by reference/value works and the difference between the two.
Introduction to javascript pass by reference and pass by value
Before diving into javascript pass by value and pass by reference functions, Let's understand the difference between primitives and objects.
These are the most basic values one can think of, which include undefined, null, string, numbers, and boolean. All objects (including functions) are passed by reference whereas primitive values are passed by value in javascript in javascript.
Let's understand what pass by reference and pass by value is before looking at examples.
Pass by value
Pass by reference
Javascript: Pass by reference:
In Pass by Reference, function is called by directly passing the address/reference of the variable as an argument. So changing the value inside the function also change the original value. In JavaScript Object and array follows pass by reference property.
In Pass by reference, parameters passed as arguments do not create their own copy, it refers to the original value so changes made inside the function affect the original value.
function changeUserObject(userObj) {
// At this point, there are two references (userObj and user) in memory,
// but these both point to the same object.
// Changing/updating the object will change the underlying object that
// user and userObj both hold a reference to.
userObj.userId = userObj.userId * 10;
}
var user = { userId: 101 };
changeUserObject(user); // user === { userId: 1010 }
One more example using an assignment
function changeUserObject(userObj) {
userObj = { userId: 100 };
// At this point, there are two references (userObj and obj) in memory,
// these both point to the same object.
// now we create a completely new object and assign it.
// userObj's reference now points to the new object.
// user's reference doesn't change.
}
var user = { userId: 10 };
changeUserObject(user); // user === { userId: 10 }
if we are passing an object or array as an argument to the method, then there is a possibility that the value of the object can change.
Note: In Pass by Reference, we are mutating the original value. when we pass an object as an argument and update that object’s reference in the function’s context, that won’t affect the object value. But if we mutate the object internally, It will affect the object.
Javascript: Pass by value
In javascript pass by value, the function is called by directly passing the value of the variable as the argument. Hence, even changing the argument inside the function doesn’t affect the variable passed from outside the function.
It's important to note that in javascript, all function arguments are always passed by value. That is why, JavaScript copies the values of the passing variables into arguments inside of the function.
//pass by value
function changeUserId(num) {
num = num * num;
return num;
}
var a = 100;
var result = changeUserId(a);
console.log(a); // 100 --- no change
console.log(result); // 10000
From the above code, we can see that the function changeUserId takes an argument and changes its value.
The original value and the copied value are independent of each other as they both have a different space in memory i.e., on changing the value inside the function, the variable outside the function is not affected.
Points to remember
In JavaScript, we have primitives and non-primitives(reference types).
Primitives are number, string, symbol, boolean, null, and, undefined whereas, non-primitives are objects, arrays, and functions.
In pass by reference, we pass the reference of the actual parameter. No copy is created in the memory.
In pass by value, parameters passed as arguments create their own copy. So any changes made to the copied variable do not affect the original one.
That’s all. Thanks for reading ❤
Say Hello! Twitter | Blog | LinkedIn | Github
