Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to clone an array using spread operator in JavaScript?
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.
2K+ Views
