is this call by reference on javascript?

Question

I've searched about call by reference on javascript but still am confused.

consider this code.

let arr = [];
let temparr = [2,3,4];
arr = temparr;
temparr.push(5);
console.log(arr);   //[2,3,4,5]
console.log(temparr); //[2,3,4,5]


let arr2 = [];
let temparr2 = [2,3,4];
arr2 = temparr2;
temparr2 = [1,2];
console.log(arr2);  //[2,3,4]
console.log(temparr2);   /[1,2]

For the first case, arr gets affected by temparr due to arr = temparr, however, in the second example, arr2 does not get affected by modification in temparr2. My question is,

1. In the first example, Why in the first place is arr getting affected by the modification of temparr? Is this in the line of call by reference? If so, on what occasions does it trigger such operation?

2. In the second example, the only difference is that i did not use push but assign new array to modify the temparr2. However this time arr2 did not get affected. What is the difference with the first example?

Thank you very much

Answer 1

Your question has less to do with how arguments are passed (everything is passed by Value all the time in JavaScript, by the way) and more to do with how Objects are stored.

In your first example, the line most relevant to your question is this:

arr = temparr;

Here, you are setting up a second variable to hold the same value as the first, but Object variables don't hold the Object, they hold the location in memory to where the object is stored. So, after that line, you have two variables that both point to the same, one underlying object. If either one of them modifies that underlying object, the other will see the same thing because they both point to only one object.

In your second example, you start out in a similar way with:

arr2 = temparr2;

Which, again, sets you up to have two variables that point to the same one, underlying object. But, then you do this:

temparr2 = [1,2];

Which doesn't modify the one underlying object, it simply reassigns the second variable to a different object, and now the two variables don't point to the same thing anymore.

It's really no different than saying:

x = 7;

and then saying:

x = 8;

The old value in x goes away and there's an entirely new value stored.

If you wanted to modify the underlying array, you would do that via the Array API, for example:

temparr2.splice(2,1); // Delete one item at index position 2

This is why the array was modified when you used .push() in the first example - - you were working on the object, not reassigning the variable.