How to merge two arrays in JavaScript?

Javascript Web Development Front End Technology

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.