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 merge two arrays in JavaScript?
In this tutorial, we will learn how to merge two arrays in JavaScript.
In JavaScript, we can merge two arrays using different approaches. Here are the three most common methods:
- Using the Array concat() method
- Using the spread operator
- Using loop iteration
Using the Array concat() Method
The Array concat() method merges two or more arrays and returns a new array. This is one of the most popular methods for merging arrays in JavaScript. The method operates on an array, takes another array as a parameter, and creates a new merged array without modifying the original arrays.
Syntax
let merged_arr = arr1.concat(arr2)
In the above syntax, arr1 and arr2 are two separate arrays. We use the concat() method with arr1 and pass arr2 as a parameter to create a new merged array.
Example
In the example below, we merge two arrays using the Array concat() method with a button click event:
<html>
<body>
<h3>Merge two arrays in JavaScript using Array concat() method</h3>
<p id="element1"></p>
<p id="element2"></p>
<button onclick="merge()">Merge Arrays</button>
<p id="result"></p>
<script>
const result = document.getElementById('result')
const element1 = document.getElementById('element1')
const element2 = document.getElementById('element2')
// Arrays
let arr1 = [1, 2, 3, 4, 5]
let arr2 = [6, 7, 8, 9, 10]
element1.innerHTML = "arr1: [" + arr1 + "]"
element2.innerHTML = "arr2: [" + arr2 + "]"
function merge(){
// Merging two arrays
let merged_arr = arr1.concat(arr2)
result.innerHTML = "Merged array: [" + merged_arr + "]"
}
</script>
</body>
</html>
Using the Spread Operator
The spread operator (...) is used to expand or spread elements of an iterable array or object. It provides a clean and modern way to merge arrays by spreading the elements of both arrays into a new array.
Syntax
let merged_arr = [...arr1, ...arr2]
In the above syntax, arr1 and arr2 are two separate arrays. We create a new array merged_arr and use spread operators on both arrays to copy all their elements into the new array.
Example
In the example below, we merge two arrays using the spread operator:
<html>
<body>
<h3>Merge two arrays in JavaScript using <i>spread</i> operator</h3>
<p id="element1"></p>
<p id="element2"></p>
<button onclick="merge()">Merge Arrays</button>
<h4 id="root"></h4>
<script>
const root = document.getElementById('root')
const element1 = document.getElementById('element1')
const element2 = document.getElementById('element2')
// Arrays
let arr1 = [1, 2, 3, 4, 5]
let arr2 = [6, 7, 8, 9, 10]
element1.innerHTML = "arr1: [" + arr1 + "]"
element2.innerHTML = "arr2: [" + arr2 + "]"
function merge(){
// Merging two arrays
let merged_arr = [...arr1, ...arr2]
root.innerHTML = "Merged array: [" + merged_arr + "]"
}
</script>
</body>
</html>
Using Loop Iteration
The traditional approach to merging arrays is using loop iteration. In this method, we use a loop (like for loop) to iterate through each array and append elements one by one using the push() method.
Syntax
let merged_arr = []
for (let index = 0; index < arr1.length; index++) {
merged_arr.push(arr1[index])
}
for (let index = 0; index < arr2.length; index++) {
merged_arr.push(arr2[index])
}
In the above syntax, we create an empty array merged_arr and use two for loops to push elements from both arr1 and arr2 into the merged array.
Example
In the example below, we merge two arrays using loop iteration:
<html>
<body>
<h3>Merge two arrays in JavaScript using <i>loop</i> iteration</h3>
<p id="element1"></p>
<p id="element2"></p>
<button onclick="merge()">Merge Arrays</button>
<h4 id="root"></h4>
<script>
const root = document.getElementById('root')
const element1 = document.getElementById('element1')
const element2 = document.getElementById('element2')
// Arrays
let arr1 = [1, 2, 3, 4, 5]
let arr2 = [6, 7, 8, 9, 10]
element1.innerHTML = "arr1: [" + arr1 + "]"
element2.innerHTML = "arr2: [" + arr2 + "]"
function merge(){
// Merging two arrays
let merged_arr = []
for (let index = 0; index < arr1.length; index++) {
merged_arr.push(arr1[index])
}
for (let index = 0; index < arr2.length; index++) {
merged_arr.push(arr2[index])
}
root.innerHTML = "Merged array: [" + merged_arr + "]"
}
</script>
</body>
</html>
Comparison
| Method | Performance | Readability | Browser Support |
|---|---|---|---|
concat() |
Good | High | All browsers |
| Spread operator | Good | Very high | ES6+ |
| Loop iteration | Slower | Medium | All browsers |
Conclusion
The concat() method and spread operator are the most efficient ways to merge arrays in JavaScript. Use the spread operator for modern applications and concat() for broader browser compatibility.
4K+ Views
