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 use spread operator to join two or more arrays in JavaScript?
The spread operator (...) provides a clean, modern way to join multiple arrays in JavaScript. It can be used for both immutable merging (creating new arrays) and mutable merging (modifying existing arrays).
What is the Spread Operator?
The spread operator (...) expands array elements, allowing you to copy values from one array to another. It performs a shallow copy of the original array.
const mergedArray = [...array1, ...array2];
Method 1: Immutable Array Joining
This approach creates a new array containing elements from all source arrays, leaving the original arrays unchanged.
Joining Two Arrays
<html>
<body>
<script>
// Creating arrays
const team = ['Chennai', 'Mumbai', 'Bangalore'];
const captain = ['Dhoni', 'Rohit', 'Kohli'];
// Merging arrays using spread operator
const joined = [...team, ...captain];
// Display result
document.write('Joined array: ' + joined.join(', '));
</script>
</body>
</html>
Joined array: Chennai, Mumbai, Bangalore, Dhoni, Rohit, Kohli
Joining Multiple Arrays
<html>
<body>
<script>
// Creating arrays
const team = ['Chennai', 'Mumbai', 'Bangalore'];
const captain = ['Dhoni', 'Rohit', 'Kohli'];
const trophies = ['4', '5', '0'];
// Merging multiple arrays
const joined = [...team, ...captain, ...trophies];
// Display result
document.write('Combined array: ' + joined.join(', '));
</script>
</body>
</html>
Combined array: Chennai, Mumbai, Bangalore, Dhoni, Rohit, Kohli, 4, 5, 0
Method 2: Mutable Array Joining
Using push() with the spread operator modifies the original array by adding elements from other arrays to the end.
Adding One Array to Another
<html>
<body>
<script>
// Creating arrays
const bikes = ['Royal Enfield', 'JAWA', 'Ather'];
const cars = ['Jaguar', 'BMW', 'TATA'];
// Pushing cars array into bikes (mutable)
bikes.push(...cars);
document.write('Modified bikes array: ' + bikes.join(', '));
</script>
</body>
</html>
Modified bikes array: Royal Enfield, JAWA, Ather, Jaguar, BMW, TATA
Adding Multiple Arrays
<html>
<body>
<script>
// Creating arrays
const bikes = ['Royal Enfield', 'JAWA', 'Ather'];
const cars = ['Jaguar', 'BMW', 'TATA'];
const airlines = ['AirIndia', 'Indigo', 'SpiceJet', 'Vistara'];
// Pushing multiple arrays into bikes
bikes.push(...cars, ...airlines);
document.write('Final bikes array: ' + bikes.join(', '));
</script>
</body>
</html>
Final bikes array: Royal Enfield, JAWA, Ather, Jaguar, BMW, TATA, AirIndia, Indigo, SpiceJet, Vistara
Comparison of Methods
| Method | Mutates Original? | Creates New Array? | Use Case |
|---|---|---|---|
[...arr1, ...arr2] |
No | Yes | When you need to preserve original arrays |
arr1.push(...arr2) |
Yes | No | When you want to extend an existing array |
Alternative: Using concat()
You can also use the traditional concat() method for immutable joining:
const joined = arr1.concat(arr2, arr3); // Equivalent to: [...arr1, ...arr2, ...arr3]
Conclusion
The spread operator offers a modern, readable way to join arrays. Use [...arr1, ...arr2] for immutable merging and arr1.push(...arr2) for mutable operations based on your specific needs.
8K+ Views
