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
Selected Reading
How to clone an array in ES6?
In ES6, the spread operator (...) provides the most elegant way to clone arrays. While ES5 used methods like concat() and slice(), ES6 offers a cleaner syntax for array cloning.
The Problem with Assignment Operator
Using the assignment operator creates a reference, not a copy. This means changes to one array affect the other:
<html>
<body>
<h2>Problem with Assignment Operator</h2>
<div id="output1"></div>
<script>
let output = document.getElementById('output1');
let array1 = ["Hi", "users", "Welcome"];
let array2 = array1; // Reference, not copy
array2.push("New value");
output.innerHTML += "Original array: " + array1 + "<br>";
output.innerHTML += "Assigned array: " + array2 + "<br>";
</script>
</body>
</html>
Original array: Hi,users,Welcome,New value Assigned array: Hi,users,Welcome,New value
Using Spread Operator (ES6 Method)
The spread operator (...) creates a true shallow copy of the array:
Syntax
let clonedArray = [...originalArray];
Example
<html>
<body>
<h2>Using Spread Operator to Clone Array</h2>
<div id="output2"></div>
<script>
let output = document.getElementById('output2');
let sizes = [34, 43, 45, 47, 49, 50];
let sizesClone = [...sizes]; // True copy
output.innerHTML += "Before modification:<br>";
output.innerHTML += "Original: " + sizes + "<br>";
output.innerHTML += "Clone: " + sizesClone + "<br><br>";
sizesClone.push(60);
output.innerHTML += "After modifying clone:<br>";
output.innerHTML += "Original: " + sizes + "<br>";
output.innerHTML += "Clone: " + sizesClone + "<br>";
</script>
</body>
</html>
Before modification: Original: 34,43,45,47,49,50 Clone: 34,43,45,47,49,50 After modifying clone: Original: 34,43,45,47,49,50 Clone: 34,43,45,47,49,50,60
Legacy Methods (ES5)
Before ES6, developers used slice() and concat():
<html>
<body>
<h2>ES5 Cloning Methods</h2>
<div id="output3"></div>
<script>
let output = document.getElementById('output3');
let array1 = [10, "hello", 30, true];
// Method 1: slice()
let clone1 = array1.slice(0);
// Method 2: concat()
let clone2 = [].concat(array1);
output.innerHTML += "Original: " + array1 + "<br>";
output.innerHTML += "slice() clone: " + clone1 + "<br>";
output.innerHTML += "concat() clone: " + clone2 + "<br>";
</script>
</body>
</html>
Original: 10,hello,30,true slice() clone: 10,hello,30,true concat() clone: 10,hello,30,true
Comparison of Methods
| Method | ES Version | Readability | Performance |
|---|---|---|---|
| Assignment (=) | All | High | Fast (but creates reference) |
| slice(0) | ES5 | Medium | Good |
| [].concat() | ES5 | Low | Good |
| [...array] | ES6+ | High | Good |
Key Points
- Arrays are mutable objects in JavaScript
- Assignment operator creates references, not copies
- Spread operator creates shallow copies
- For nested arrays/objects, consider deep cloning methods
Conclusion
The spread operator (...) is the preferred ES6 method for array cloning due to its clean syntax and reliability. It creates true copies, preventing unintended mutations of the original array.
Updated on: 2026-03-15T23:19:00+05:30
724 Views
Advertisements