Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to clone array in ES6 ?

  • Last Updated : 31 Dec, 2019

The spread operator in ES6 is used to clone an array, whereas slice() method in JavaScript is an older way that provide 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.

Syntax:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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

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

Example:




<script>
  
// Cloning array using spread
// operator- ES6
  
const oldArray= ["dog1", "dog2", "dog3"];
   
const clonedArrayES6= [...oldArray];
   
// ["dog1", "dog2", "dog3"]
console.log(clonedArrayES6);  
</script>


Output:



Equality and sameness: Unlike “=” operator, which creates a new variable which just points to the original array instead of copying its elements, spread operator creates a new, cloned array, with different reference but same values. Hence “=” operator creates a deep copy of the original array but the spread operator does a shallow copy. The array created by the spread operator has the same value as that of the old array but, is not as same as the old array.

Example:




<script>
// 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)  
</script>


Output:

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :