Why assigning new array to variable changes its reference not value?

Question

I am wondering why if I run this in JS, it will create new reference to the array, after I change its value:

var array = ["1","2","3"];
var copyOfArray = array; 
console.log(copyOfArray); // ["1", "2", "3"]
var secondArray = ["2","3","4"];
array = secondArray;
console.log(array); //["2","3","4"]
console.log(copyOfArray); //["1", "2", "3"]

Why is reference to array not updated?

• adeneo: There is no pass-by-reference, only pass-by-value-of-a-reference. array is still the old array, it doesn't get overwritten just because you overwrite the copy, that's what happens when you assign something new to a variable, object or primitive
• Molda: Have a look here stackoverflow.com/questions/518000/…
• Bergi: You've created two arrays and three variables. What exactly is the unexpected behaviour here?

Answer 1

When you do :

var array = ["1","2","3"];
var copyOfArray = array; 

That will create an array and make copyOfArray points to the same instance

array --> instanceA
copyOfArray --> instanceA

Creating a second array will create a new instance while the first two ones are pointing to the old one :

var secondArray = ["2","3","4"];

array --> instanceA
copyOfArray --> instanceA
secondArray --> instanceB

Now doing array = secondArray;

Will update the reference that array points to, to the reference that secondArray points to so you will have

array --> instanceB
copyOfArray --> instanceA
secondArray --> instanceB

That makes sense as you are pointing to the reference that secondArray points to, not to the secondArray itself

Answer 2

var array = ["1","2","3"];

and

var secondArray = ["2","3","4"];

both create completely new arrays.

After

var copyOfArray = array;

copyOfArray and array refer to the same array; secondArray refers to a different array.

When you now type

array = secondArray;

then array doesn’t refer to the first array anymore. Instead, it refers to the second array — to the same array secondArray refers to. copyOfArray still refers to the first array, because the variable hasn’t been changed. The reference of the array referred to as secondArray only gets passed on to array, not to copyOfArray.

In other words, after array = secondArray; the link between the first array and the variable array is broken. There’s no connection between the two anymore, and more importantly there’s no connection between array and copyOfArray anymore.

Answer 3

Design

The C language uses the dot operator . to access structure and union data members following an structure value identifier, but uses the -> operator after a pointer to a structure in order to access its members.

Javascript adopted the . operator for simplicity of syntax when accessing object properties, but uses a pointer value when storing objects in variables and passing to functions. The value of the pointer, whether it be a memory address or index into a table of some kind used by the javascript engine, is inaccessible to javascript code.

Documentation

Javascript documentation typically states that all parameter data types are passed to functions by value. This is true only in the sense that object values in variables are a reference, and when passed to a function or set in another variable merely duplicate the object reference value without duplicating the object's data structure.

Posted example

var array = ["1","2","3"];
var copyOfArray = array;

leaves both array and copyOfArray holding references to the same Array object, whose location in memory is known only by the javascript engine.

var secondArray = ["2","3","4"];
array = secondArray;

creates another Array object with references to it set in secondArray and array. Storing the new reference in array overwrote the Array reference value already there. The reference value stored in copyOfArray however has not been changed.

So a log of secondArray shows ["2","3","4"] but leaves copyOfArray holding ["1","2","3"]