Array.concat 反映输入嵌套数组拼接后修改结果数组的变化

Question

According to MDN, the description for concat is as below,

The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

Consider the below code,

Example 1

 const array1 = [['a'], 'b', 'c']; const array2 = ['d', 'e', 'f']; const array3 = array1.concat(array2); // concatinate array1 and array2 and returns new array3. console.log(array3); array1.push('pushed'); // pushed as the last element to the array1 console.log(array3); // no change in array 3, looks correct

output

[["a"], "b", "c", "d", "e", "f"]  
[["a"], "b", "c", "d", "e", "f"]

Example 2:

 const array1 = [['a'], 'b', 'c']; const array2 = ['d', 'e', 'f']; const array3 = array1.concat(array2); // concatinate array1 and array2 and returns new array3. console.log(array3); array1[0].push('pushed'); // pushed as the last element to the nested array at position 0 console.log(array3); // array 3 also changed, why?

output

[["a"], "b", "c", "d", "e", "f"]  
[["a", "pushed"], "b", "c", "d", "e", "f"]      

In the example 2, why did the content of array3 got changed even though the concatenation happened before the push of new element in array1 .

NOTE : the only difference between the 2 examples is
Example1: array1.push('pushed')
Example2: array1[0].push('pushed')

I understand about pass by value and pass by reference (and arrays and objects share reference), but the thing which confused me is why is the nested array sharing reference and the original array was copied.

Answer 1

The element at index 0 in array1 (a non primitive ) was copied by reference in the new array returned by array1.concat(array2) and stored in array3 .

.push() mutates the array in place. When you mutate array1 , it does not affect array3 because they do not share the same reference ( concat returned a new array).

But because the element at index 0 in array1 (a non primitive ) is sharing the same reference as the element at index 0 in array3 (which you can check by seeing that array1[0] === array3[0]; // true ), mutating that array in array1 is mutating the same array in array3 .

TLDR: array1 !== array3 but array1[0] === array3[0]

Answer 2

I understand about pass by value and pass by reference (and array and objects share reference), but the thing which confused me is why is the nested array sharing reference and the original array was copied.

That's how Array.concat works, it returns copies of the same elements in a new array .

You can do the same thing using Spread syntax :

const array3 = [...array1, ...array2];

We have copies of the same elements from array1 and array2 but in a new array [] , so if an element is an array or an object it'll be copied by reference

Look at this example:

 const array1 = [['a'], 'b', 'c']; const array3 = array1.concat(); console.log('array3:', array3); console.log('array3 === array1 ? :', array3 === array1); console.log('array3[0] === array1[0] ? :', array3[0] === array1[0]);

The same example using Spread syntax :

 const array1 = [['a'], 'b', 'c']; const array3 = [...array1]; console.log('array3:', array3); console.log('array3 === array1 ? :', array3 === array1); console.log('array3[0] === array1[0] ? :', array3[0] === array1[0]);

Answer 3

Apart from those good answers posted above, Here is an interesting and a well explained article about deep and shallow copy.

how-to-differentiate-between-deep-and-shallow-copies by Lukas Gisder-Dubé