Assigning a variable an array

Consider the following code:

let arr = [0, 1, 2, 3];
let newArr = arr; //newArr is supposed have a value like arr right?
newArr.push(5);// making change to newArr NOT to arr
console.log(newArr); //returns [0, 1, 2, 3, 5]
console.log(arr); //returns [0, 1, 2, 3, 5]

Why arr changes also?

Because arrays are objects. JavaScript keeps track of objects with the location in memory where they are stored (“by reference”). When you do let newArr = arr you are copying that memory address, not duplicating the array itself. This means that arr and newArr are both variables that each contain a copy of the memory address of the single array [0, 1, 2, 3].

1 Like

You are bumping into the same issue from the other thread.

const myArr = [1, 2, 3]; // make an array and store its location in the variable myArr
const myOtherArr = myArr; // copy the value stored in myArr to myOtherArr, but this is the location of the array

myOtherArr.push(5); // push 5 onto the array at the location stored in the variable myOtherArr

console.log(myArr); // print the contents of the array at the location stored in myArr
console.log(myOtherArr); // print the contents of the array at the location stored in myOtherArr (same location)
1 Like

And what if i want to copy the items of myArr without the location of them?
should i use the spread operator (i.e. ...)?

Yeah, for an array you can copy with the spread operator.

const myArr = [1, 2, 3]; // make an array and store its location in the variable myArr
const myOtherArr = [...myArr]; // copy the values stored in myArr into a new array that has the location stored in myOtherArr

myOtherArr.push(5); // push 5 onto the array at the location stored in the variable myOtherArr

console.log(myArr); // print the contents of the array at the location stored in myArr
console.log(myOtherArr); // print the contents of the array at the location stored in myOtherArr (different location)

But note, if you have an array of objects or an array of arrays, what you will be copying is the location of these objects/arrays. This is known as a shallow copy.

Another question is, what is the use of assigning an array to a variable, so it becomes like an array is having two names?
example:

let newArr = [0, 1, 2, 3];
let newArrNew = newArr; //so it becomes like newArr is having two names, newArr and newArrNew.

Isn’t the spread operator is supposed to be before myArr or it is optional?

Good catch. I’m thinking in six languages this morning and muddling my syntax. I’ve fixed the snippit!


Yeah, thinking of the single array having two names is a good way to put it. Which really highlights why that can be really bug prone, because you have two different ways to change the same thing, which can create confusion. Just imagine a person with two names!

:joy:

So is it just there, or there is a purpose behind this functionality that an array can have two names?

Well, it is how function calls work.

When you call

myFunction(myVar1, myVar2, myVar3);

copies of the values stored in these variables are passed in to the function. If the variables are primitive (like numbers and booleans), you get copies of the values. If the variables are objects or arrays, you get a copy of the memory location in which the data is stored.

Its more efficient than copying the entire object and lets you have functions that modify their inputs.

1 Like

These are, by the way, fantastic questions that really dig into the heart of how variables work in JS (and a lot of other languages).

If i have

myFunction(myVar1, myVar2, myVar3);

and i call the function

myFunction(1, 2, [3, 4, 5]);

the values of 1 and 2 are copied, and for the array the memory addresses are copied instead of 3, 4, 5, for example (if 3 at the memory address 0x00, 0x00 is copied instead of 3 or both are copied?)

Consider this code:

const myArr = [3, 4, 5];
let myVar1 = 1, myVar2 = 2;

function myFunction(myArg1, myArg2, myArg3) {
  myArg1 = 11;
  myArg2 = 12;
  myArg3[0] = 13;
}

myFunction(myVar1, myVar2, myArr);

console.log(myVar1); // value was copied, so no change in data
console.log(myVar2); // value was copied, so no change in data
console.log(myArr); // location was copied, so change in data
1 Like

Thank you for explaining, so appreciated! thanks!

I’ve noticed that you declare array with const, why? why const and not let or var

For variables, the rule of thumb is

  • Use const if you can
  • Use let if you need the value to change
  • Never use var

You should not declare a variable as mutable if you do not plan on changing the value. It helps reduce bugs.

In this case, I knew I was not going to change the memory location of the array, so I used const. For the two integers though I wanted the possibility for them to change, so I used let.

1 Like

but you have changed myArr

I changed the data at the location stored in myArr. I did not change the value of myArr itself, which just holds the location of the data.

With arrays and objects, const means I cannot change the array/object that the variable points at, but I can change the contents of that array/object.

1 Like

To clarify: a const cannot be reassigned.

const myConstant = something;
myConstant = somethingElse; // you can't do this
2 Likes