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 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 in different approaches, and in this tutorial, we will see some of the approaches for doing this −
- Using the Array concate() method
- Using the spread operator
- Using the loop iteration
Using the Array concate() method
The Array concate() method merges two or multiple arrays. It is one of the best method to merge arrays in JavaScript. This method operates on an array, takes another array in the parameters, and returns a new one after merging these two arrays. It can also take multiple arrays in the parameters to merge them all.
Syntax
let merged_arr = arr1.concat(arr2)
In the above syntax, “arr1” and “arr2” are two separate arrays. We used the array concate() method with the “arr1” and passed the “arr2” array in the parameter to create a new merged array, “merged_arr”.
Example
In the example below, we merged two arrays in JavaScript using the Array concate() method. We used a button click event to merge two arrays, “arr1” and “arr2” and output them on the web page.
<html> <body> <h3> Merge two arrays in JavaScript using Array concate() 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 pass or spread a copy of each element of an iterable array or object. It is very useful to copy an array easily. We can merge two arrays easily by using the spread operator. We have to take an array and then, in that array, spread two or multiple arrays one by one, separated by a comma.
Syntax
let merged_arr = [...arr1, ...arr2]
In the above syntax, “arr1” and “arr2” are two separate arrays. We take an array “merged_arr” and inside that array, we use spread operators on “arr1” and “arr2” to make a copy of all their elements and pass them into the new array.
Example
In the example below, we merged two arrays in JavaScript using the spread operator. We used a button click event to merge two arrays, “arr1” and “arr2”, and output them on the web page.
<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 the loop iteration
The most traditional approach to merging two arrays is by using the loop iteration. In this approach, we use a loop like “for loop” or “while loop” and inside the loop, we append each element of an array to another array one by one using the array.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, “arr1” and “arr2” are two separate arrays. Using the for loop, we merged two arrays into “merged_arr”.
Example
In the below example, we have merged two arrays in JavaScript using the loop iteration. We used a button click event to merge two arrays, “arr1” and “arr2”, and output them on the web page.
<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>
In this tutorial we discussed three approaches to merge two array in JavaScript- using the concate() method, using the spread operator and using the loop iteration.
2K+ Views
