I'm looking for some good comprehensive reading material on when JavaScript passes something by value and when by reference and when modifying a passed item affects the value outside a function and when not. I'm also interested in when assigning to another variable is by reference vs. by value and whether that follows any different rules than passing as a function parameter.
I've done a lot of searching and find lots of specific examples [many of them here on SO] from which I can start to piece together pieces of the real rules, but I haven't yet found a single, well written document that describes it all.
Also, are there ways in the language to control whether something is passed by reference or by value?
Here are some of the types of questions I want to understand. These are just examples - I'm actually looking to understand the rules the language goes by, not just the answers to specific examples. But, here are some examples:
function f[a,b,c] {
a = 3;
b.push["foo"];
c.first = false;
}
var x = 4;
var y = ["eeny", "miny", "mo"];
var z = {first: true};
f[x,y,z];
When are the contents of x, y and z changed outside the scope of f for all the different types?
function f[] {
var a = ["1", "2", "3"];
var b = a[1];
a[1] = "4";
// what is the value of b now for all possible data types that the array in "a" might hold?
}
function f[] {
var a = [{yellow: "blue"}, {red: "cyan"}, {green: "magenta"}];
var b = a[1];
a[1].red = "tan";
// what is the value of b now and why?
b.red = "black";
// did the value of a[1].red change when I assigned to b.red?
}
If I want to make a fully independent copy of an object [no references whatsoever], what's the best practice way to do that?
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
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.