Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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 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.
What is Array Cloning?
An Array is a data structure in JavaScript that can hold multiple values at once. Cloning involves copying an array's elements to create a new independent array.
<!DOCTYPE html>
<html>
<head>
<script>
const originalArray = ['Tutorials', 'Point', 'India'];
document.write("Original: " + originalArray);
</script>
</head>
</html>
Original: Tutorials,Point,India
Spread Operator (...)
The Spread operator (...) allows you to expand elements from an existing array or object into a new array or object quickly.
<!DOCTYPE html>
<html>
<head>
<script>
const arrValue = ['Welcome', 'to', 'Tutorials', 'Point'];
document.write("Array: " + arrValue + "<br>");
document.write("Spread: " + [...arrValue].join(' '));
</script>
</head>
</html>
Array: Welcome,to,Tutorials,Point Spread: Welcome to Tutorials Point
Cloning Using Spread Operator
The spread operator creates a shallow copy of an array, meaning it creates a new array with copied elements but maintains the same reference for nested objects.
Basic Array Cloning
<!DOCTYPE html>
<html>
<head>
<script>
const existingArray = ["Dhoni", "Kohli", "Rohit", "KL Rahul"];
const newArray = [...existingArray];
document.write("Original: " + existingArray + "<br>");
document.write("Cloned: " + newArray);
</script>
</head>
</html>
Original: Dhoni,Kohli,Rohit,KL Rahul Cloned: Dhoni,Kohli,Rohit,KL Rahul
Independence of Cloned Arrays
When you clone an array using the spread operator, modifications to one array don't affect the other:
<!DOCTYPE html>
<html>
<head>
<script>
let array1 = ["INDIA", "ENGLAND", "AUSTRALIA", "NEW ZEALAND"];
let array2 = [...array1];
document.write("Before modification:<br>");
document.write("Array1: " + array1 + "<br>");
document.write("Array2: " + array2 + "<br><br>");
// Modify original array
array1.push("SRI LANKA");
document.write("After adding to array1:<br>");
document.write("Array1: " + array1 + "<br>");
document.write("Array2: " + array2);
</script>
</head>
</html>
Before modification: Array1: INDIA,ENGLAND,AUSTRALIA,NEW ZEALAND Array2: INDIA,ENGLAND,AUSTRALIA,NEW ZEALAND After adding to array1: Array1: INDIA,ENGLAND,AUSTRALIA,NEW ZEALAND,SRI LANKA Array2: INDIA,ENGLAND,AUSTRALIA,NEW ZEALAND
Reference Assignment (Not Cloning)
Using the assignment operator (=) doesn't create a clone?it creates a reference to the same array:
<!DOCTYPE html>
<html>
<head>
<script>
let array1 = ["INDIA", "ENGLAND", "AUSTRALIA", "NEW ZEALAND"];
let array2 = array1; // Reference assignment, not cloning
document.write("Before modification:<br>");
document.write("Array1: " + array1 + "<br>");
document.write("Array2: " + array2 + "<br><br>");
// Modify original array
array1.push("SRI LANKA");
document.write("After adding to array1:<br>");
document.write("Array1: " + array1 + "<br>");
document.write("Array2: " + array2); // Both arrays are affected!
</script>
</head>
</html>
Before modification: Array1: INDIA,ENGLAND,AUSTRALIA,NEW ZEALAND Array2: INDIA,ENGLAND,AUSTRALIA,NEW ZEALAND After adding to array1: Array1: INDIA,ENGLAND,AUSTRALIA,NEW ZEALAND,SRI LANKA Array2: INDIA,ENGLAND,AUSTRALIA,NEW ZEALAND,SRI LANKA
Shallow Copy vs Reference Assignment
The spread operator creates a shallow copy with independent array references, while the assignment operator creates a reference to the same array.
<!DOCTYPE html>
<html>
<head>
<script>
const existingArray = ["Dhoni", "Kohli", "Rohit", "KL Rahul"];
const shallowCopy = [...existingArray]; // Spread operator
const reference = existingArray; // Assignment operator
// Check if they're the same reference
document.write("Shallow copy === original: " + (shallowCopy === existingArray) + "<br>");
document.write("Reference === original: " + (reference === existingArray));
</script>
</head>
</html>
Shallow copy === original: false Reference === original: true
Comparison Table
| Method | Creates New Array? | Independent Modifications? | Use Case |
|---|---|---|---|
[...array] |
Yes | Yes | True cloning |
array2 = array1 |
No | No | Reference sharing |
Conclusion
The spread operator (...) is the modern, clean way to clone arrays in JavaScript. It creates a shallow copy that's independent of the original array, unlike assignment which only creates a reference.
3K+ Views
