Clone array in ES6

The spread operator in ES6 is used to clone an array, whereas the slice() method in JavaScript is an older way that provides 0 as the first argument. These methods create a new, independent array and copy all the elements of oldArray to the new one i.e. both these methods do a shallow copy of the original array.

Example

// Cloning array using spread operator- ES6
const oldArray = ["dog1", "dog2", "dog3"];

const clonedArrayES6 = [...oldArray];

// ["dog1", "dog2", "dog3"]
console.log(clonedArrayES6);

[ 'dog1', 'dog2', 'dog3' ]

Syntax: 

// Older way
var clonedArray = oldArray.slice(0)    

// ES6 way: spread operator
var clonedArrayES6 = [...oldArray]    

Equality and sameness

• The = operator assigns a reference to the original array instead of copying its elements.
• The spread operator (...) creates a new array with the same values but different references.
• = results in a shallow reference, meaning changes to one array affect the other.
• The spread operator produces a shallow copy, so the new array is independent but only one level deep.
• The new array from the spread operator has the same values but is not the same object as the original array.

Example: This example shows the use of the above-explained approach.

// Equality and sameness in cloning array

const oldArray = ["dog1", "dog2", "dog3"];

const clonedArrayES6 = [...oldArray];
const newArray = oldArray;

// False, i.e. shallow copy
console.log(clonedArrayES6 === oldArray)

// True, i.e. deep copy
console.log(newArray === oldArray)

false
true

Note: All the above examples can be tested by typing them within the script tag of HTML or directly into the browser’s console.