Why do some operations not alter an array that was passed to a function?

Question

Scenario 1:

var myArray = [2, 3, 4, 5];
function doStuff(arr) {
  arr = [];
}
doStuff(myArray);
console.log(myArray); // [2,3,4,5]


        

Answer 1

In the first function, you're just reassigning the parameter of the function. That has no effect on the passed data.

In the second, you're actually mutating the passed array via the call to pop.

Think of it this way: in

var a = 1
a = 2

Is the 1 modified in any way? No, the reference a that was pointing to it was just changed.

Answer 2

arr is a reference to the array, which exists somewhere in memory (you don't know where, and you don't care). When you say arr = [], you're creating a new array somewhere in memory, and changing arr to refer to that new array. The old array still exists in memory. If there was nothing referring to the old array then it would eventually be garbage collected, but in this case it's still referred to by myArray so it remains untouched.

arr.pop() on the other hand is modifying the array, not changing references.

Answer 3

In the first case you are doing a new memory allocation while you are actually modifying the array in the second case.

Hence in the first case the value does not get modified.

For eg:

var myArrayOne = [2, 3, 4, 5];
function doStuff(arr) {
  arr = [7,8,9]; //assigining a whole new object to the copy 
}
doStuff(myArrayOne);
console.log(myArrayOne); // [2,3,4,5]

// Scenario 2
var myArrayTwo = [2, 3, 4, 5];
function doStuff(arr) {
  arr.pop(); //modifying the internals of the arr object
}
doStuff(myArrayTwo);
console.log(myArrayTwo); // [2,3,4]

Answer 4

In the first example:

You are altering the variable arr which is merely just holding a reference to the array [2, 3, 4, 5], so instead of holding a reference to [2, 3, 4, 5], it will hold a reference to another array [].

At the line var myArray = [2, 3, 4, 5];:

myArray -----------------------------------> [2, 3, 4, 5]

Then at the line doStuff(myArray);:

myArray -----------------------------------> [2, 3, 4, 5]
                                                  ↑
arr ----------------------------------------------/

Then at the line arr = [];:

myArray -----------------------------------> [2, 3, 4, 5]

arr ---------------------------------------> []

=> So, after the call to doStuff, myArray is still [2, 3, 4, 5].

In the second example:

You are using the reference to [2, 3, 4, 5] stored in arr to call a function pop on it that alters it.

At the line var myArray = [2, 3, 4, 5];:

myArray -----------------------------------> [2, 3, 4, 5]

Then at the line doStuff(myArray);:

myArray -----------------------------------> [2, 3, 4, 5]
                                                  ↑
arr ----------------------------------------------/

Then at the line arr.pop();:

myArray -----------------------------------> [2, 3, 4, 5].pop()
                                                  ↑
arr.pop() ----------------------------------------/

Which alters the array to:

myArray -----------------------------------> [2, 3, 4]
                                                  ↑
arr ----------------------------------------------/

=> So, after the call to doStuff, myArray is now [2, 3, 4].