Recently I discovered during a challenge exercise, that:

let array = [1, 2, 3, 4, 5]

let x = array
let y = [...array]

console.log(x, y);

x and y in theory look the same but apparently under the hood they are not the same because one passes the test and the other does not.

Is there any thing that I'm missing here. Up to this point assigning and spreading where pretty much the same thing for me.

Thank you

Recently I discovered during a challenge exercise, that:

let array = [1, 2, 3, 4, 5]

let x = array
let y = [...array]

console.log(x, y);

x and y in theory look the same but apparently under the hood they are not the same because one passes the test and the other does not.

Is there any thing that I'm missing here. Up to this point assigning and spreading where pretty much the same thing for me.

Thank you

• javascript
• arrays

Share Improve this question Follow edited Nov 13, 2019 at 18:05 Avi 1,61722 gold badges1515 silver badges3838 bronze badges asked Nov 13, 2019 at 17:46 Tiago RuivoTiago Ruivo 18322 silver badges1111 bronze badges 8

• 4 Simple assignment does not make a copy of the source array; the spread assignment does. – Pointy Commented Nov 13, 2019 at 17:47
• passes what test? – TKoL Commented Nov 13, 2019 at 17:47
• but changing x won't change the array above?! right? – Tiago Ruivo Commented Nov 13, 2019 at 17:49
• 1 It will, and that's exactly the difference. – ASDFGerte Commented Nov 13, 2019 at 17:50
• 1 array[0] = "A"; x[1] = "X"; y[2] = "y"; console.log(array, x, y) – epascarello Commented Nov 13, 2019 at 17:50

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 8

let x = array; just makes the x variable and the array variable both point to the same array:

array−−−+
        |    +−−−−−−−−−+
        +−−−>| (array) |
        |    +−−−−−−−−−+
x−−−−−−−+    | 0: 1    |
             | 1: 2    |
             | 2: 3    |
             | 3: 4    |
             | 4: 5    |
             +−−−−−−−−−+

let y = [...array]; creates a new array and copies all of the entries from array into it.

             +−−−−−−−−−+
array−−−−−−−>| (array) |
             +−−−−−−−−−+
             | 0: 1    |
             | 1: 2    |
             | 2: 3    |
             | 3: 4    |
             | 4: 5    |
             +−−−−−−−−−+

             +−−−−−−−−−+
y−−−−−−−−−−−>| (array) |
             +−−−−−−−−−+
             | 0: 1    |
             | 1: 2    |
             | 2: 3    |
             | 3: 4    |
             | 4: 5    |
             +−−−−−−−−−+

Since arrays are mutable (you can change their state), this is important because if you're going to make changes and didn't want to change the original array, you want the second (or similar), not the first.

---

It's probably worth noting that let y = [...array]; also creates an array even if array isn't one, as long as it's iterable, because any iterable can be spread that way. For instance, let y = [..."foo"]; creates an array like this: ["f", "o", "o"] because strings are iterable.

when using the assignment operator you don't create a coppy of the array, instead you create a coppy of the reference to the same array so if you change x , the original array will change too..but with the spread operator they are separate arrays so they don't affect each other.

The difference has to do with how Objects are referenced in Javascript.

While simple (scalar) types like number and string are copied each time they're referenced, Objects (Arrays inherit from Object) are passed by reference.

This article seems to explain that well enough

So in your code, when spreading your array into brackets you are instantiating a new array, and receive a pointer to a different Object.