How to clone an array using spread operator in JavaScript?

Javascript Web Development Front End Technology

In this article, we are going to discuss how to use the spread operator to clone an array in JavaScript.

Cloning is just the process of copying one array into another array. Previously, the slice() method was used to clone an array, however, ES6 now provides the spread operator(...) to simply clone an array.

Before proceeding further let us look at the definitions of array and spread operator.

Array

An Array is usually a data structure, in JavaScript it is an object which can hold multiple values at once. For example, Below “Arr” is an array.

Const Arr = [‘Tutorials’, ‘Point’, ‘India’];

To avoid creating an object that already exists, JavaScript cloning involves copying an object's properties to another object. This process is called as Cloning.

Spread operator (…)

This JavaScript operator called Spread (…) will do the copying quickly from an existing object or array to new, another object or array.

const arrValue = ['Welcome', 'to', 'Tutorials', 'Point'];
document.write(arrValue); // ["Welcome", "to", "tutorials", "point"]
document.write(...arrValue); // Welcome to tutorials point

Cloning using Spread operator(…)

Spread operator in ES6 will be used to clone an array. This operator will bring out shallow copy of the existing array. Usage of spread operator will create a new array for putting the elements which are been copied from existing array.

Example 1

Let us see an example to clone an array using the spread operator −


<!DOCTYPE html>
<html>
<head>
   <script>
   
      // Cloning an array using slice() operator
      const existingArray = ["Dhoni", "Kohli", "Rohit", "KL Rahul"];
      const newArray= [...existingArray];
      document.write(newArray); // ["Dhoni", "Kohli", "Rohit", "KL Rahul"]
   </script>
</head>
</html>

Example 2

In the below script, we have added an element into existing array. As it will do shallow copy it won’t reflect in the duplicate array.


<!DOCTYPE html>
<html>
<head>
   <script>
      let array1 = ["INDIA", "ENGLAND", "AUSTRALIA", "NEW ZEALAND"];
      let array2 = [...array1];
      document.write(array1); // [ "INDIA", "ENGLAND", "AUSTRALIA", "NEW ZEALAND"]
      document.write(array2); // [ "INDIA", "ENGLAND", "AUSTRALIA", "NEW ZEALAND"]

      // append an item to the array
      array1.push("SRI LANKA");
      document.write(array1); // [ "INDIA", "ENGLAND", "AUSTRALIA", "NEW ZEALAND", "SRI LANKA]
      document.write(array2); // [ "INDIA", "ENGLAND", "AUSTRALIA", "NEW ZEALAND", "SRI LANKA]
   </script>
</head>
</html>

Example 3

In the below script, we have added an element into existing array. As it will do deep copy it won’t reflect in the duplicate array. Objects are not assigned by values but instead by references.


<!DOCTYPE html>
<html>
<head>
   <script>
      let array1 = ["INDIA", "ENGLAND", "AUSTRALIA", "NEW ZEALAND"];
      let array2 = array1;
      document.write(array1); // [ "INDIA", "ENGLAND", "AUSTRALIA", "NEW ZEALAND"]
      document.write(array2); // [ "INDIA", "ENGLAND", "AUSTRALIA", "NEW ZEALAND"]
      
      // append an item to the array
      array1.push("SRI LANKA");
      document.write(array1); // [ "INDIA", "ENGLAND", "AUSTRALIA", "NEW ZEALAND", "SRI LANKA]
      document.write(array2); // [ "INDIA", "ENGLAND", "AUSTRALIA", "NEW ZEALAND", "SRI LANKA]
   </script>
</head>
</html>

Shallow copy and deep copy Using spread operator

The Shallow copy only copies the reference address after storing a copy of the original object or array.

The Deep copy will copy the original object’s elements and repetitive copies. copied object will be exactly same as original element.

Example 1

<!DOCTYPE html>
<html>
<head>
   <script>
      // Shallow copy and deep copy of array
      const existingArray = ["Dhoni", "Kohli", "Rohit", “KL Rahul”];
      const newArray = [...existingArray];
      const dupArray = existingArray;
      
      // Will print FALSE, because it is a shallow copy
      document.write(newArray === existingArray)
      document.write("<br>")
      
      // Will print TRUE, because it is a deep copy
      document.write(dupArray === existingArray)
   </script>
</head>
</html>

Note

The “=” operator, this operator will create a new variable and that just points to the existing array instead of copying the elements from existing elements to newly created variable.

The (...) operator, spread syntax operator will create a cloned array with different references to the original array but same values. The duplicate array has same values as the original array but not as same as the original array.