How to Merge/Combine Arrays using JavaScript ?

There are many ways of merging arrays in JavaScript. We will discuss two problem statements that are commonly encountered in merging arrays:

  1. Merge without removing duplicate elements.
  2. Merge after removing the duplicate elements.

Merge without removing duplicate elements: We will first begin with three arrays and merge them. Later, we will generalize it for an indefinite number of arrays.

The three arrays are stated below:
let nums1 = [1, 2, 3, 4]
let nums2 = [3, 4, 5, 6]
let nums3 = [5, 6, 7, 8]

We have to merge them so the our new array becomes:

combinedNums = [1, 2, 3, 4, 3, 4, 5, 6, 5, 6, 7, 8]
  1. Using concat() Method: The concat() method accept arrays as arguments and returns the merged array.



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
      
        // Elements of nums2 and nums3 concatenated
        // with elements of nums1 and returns the 
        // combined array - combinedSum array
        let combinedNums = nums1.concat(nums2, nums3);
      
        // More readable form
        let combinedNums = [].concat(nums1, nums2, nums3);
      
        console.log(combinedNums);
    </script>

    chevron_right

    
    

    Output:

    [1, 2, 3, 4, 3, 4, 5, 6, 5, 6, 7, 8]
  2. Using spread operator: Spread operator spreads the value of the array into its constituent elements.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
        let combinedNums = [...nums1, ...nums2, ...nums3];
      
        console.log(combinedNums);
    </script>

    chevron_right

    
    

    Output:

    [1, 2, 3, 4, 3, 4, 5, 6, 5, 6, 7, 8]
  3. Using push() Method: The push() method is used with spread operator to pushes the elements of arrays into the existing array. It is especially helpful when we need to append a value to an existing array and need not return a new array.

    Note: If spread operator is not used, then arrays as a whole are appended.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
        nums1.push(...nums2, ...nums3);
        console.log(nums1);
      
        // If spread operator is not used
        nums1.push(nums2, nums3);
        console.log(nums1);
    </script>

    chevron_right

    
    

    Output:

    first log: [1, 2, 3, 4, 3, 4, 5, 6, 5, 6, 7, 8]
    second log: [1, 2, 3, 4, [3, 4, 5, 6], [5, 6, 7, 8]]
    

We will now generalize this for merging of an indefinite number of arrays:
Our function mergeArrays accepts any number of arrays as arguments (rest operator). We will iterate through each array with forEach loop and add it into our final array: mergedArray.

Below are the implementations using concat, spread operator, and push method:

  1. Using array.concat() method:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
        let nums1 = [1, 2, 3, 4];
        let nums2 = [3, 4, 5, 6];
          
        function mergeArrays(...arrays) {
            let mergedArray = [];
      
            arrays.forEach(array => {
                mergedArray = mergedArray.concat(array)
            });
      
            return mergedArray;
        }
      
        console.log(mergeArrays(nums1, nums2));
    </script>

    chevron_right

    
    

    Output:



    [1, 2, 3, 4, 3, 4, 5, 6]
  2. Using spread operator:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
        let nums1 = [1, 2, 3, 4];
        let nums2 = [3, 4, 5, 6];
          
        function mergeArrays(...arrays) {
            let mergedArray = [];
      
            arrays.forEach(array => {
                mergedArray = [...mergedArray, ...array]
            });
      
            return mergedArray;
        }
      
        console.log(mergeArrays(nums1, nums2));
    </script>

    chevron_right

    
    

    Output:

    [1, 2, 3, 4, 3, 4, 5, 6]
  3. Using Array.push() Method:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
        let nums1 = [1, 2, 3, 4];
        let nums2 = [3, 4, 5, 6];
          
        function mergeArrays(...arrays) {
            let mergedArray = [];
      
            arrays.forEach(array => {
                mergedArray.push(...array)
            });
      
            return mergedArray;
        }
      
        console.log(mergeArrays(nums1, nums2));
    </script>

    chevron_right

    
    

    Output:

    [1, 2, 3, 4, 3, 4, 5, 6]
  4. Merging and removing duplicate elements: Consider the following three approaches for doing this:

    1. Using set() method: Here, we spread the mergedArray elements into our set. Set stores unique items and removes duplicates. We then spread elements in the set into a new array and return that array having merged non-duplicate elements.
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <script>
          let nums1 = [1, 2, 3, 4];
          let nums2 = [3, 4, 5, 6];
          let nums3 = [5, 6, 7, 8];
           
          function mergeNoDuplicates(...arrays) {
              let mergedArray = [];
        
              arrays.forEach(array => {
                  mergedArray = [...mergedArray, ...array]
              });
        
              return [...new Set([...mergedArray])];
          }
        
          console.log(mergeNoDuplicates(nums1, nums2, nums3));
      </script>

      chevron_right

      
      

      Output:

      [1, 2, 3, 4, 5, 6, 7, 8]
    2. Using filter() Method: In this approach, we filter out elements of the mergedArray on the basis of their first occurrence in the array. We check whether the item occurs first by taking it’s first index with the help of indexOf method.
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <script>
          let nums1 = [1, 2, 3, 4];
          let nums2 = [3, 4, 5, 6];
          let nums3 = [5, 6, 7, 8];
            
          function mergeNoDuplicates(...arrays) {
              let mergedArray = [];
        
              arrays.forEach(array => {
                  mergedArray = [...mergedArray, ...array]
              });
        
              const mergedUnique = mergedArray
                  .filter((item, index) => 
                      mergedArray.indexOf(item) === index);
              return mergedUnique;
          }
        
          console.log(mergeNoDuplicates(nums1, nums2, nums3));
      </script>

      chevron_right

      
      

      Output:

      [1, 2, 3, 4, 5, 6, 7, 8]
    3. Using Array reduce() Method: In this approach, we take noDuplicates array as our accumulator. An item is appended in this array if it is not already present in the noDuplicates array. If an item is already present, we simply return the current array for the next iteration.
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <script>
          let nums1 = [1, 2, 3, 4];
          let nums2 = [3, 4, 5, 6];
          let nums3 = [5, 6, 7, 8];
            
          function mergeNoDuplicates(...arrays) {
              let mergedArray = [];
        
              arrays.forEach(array => {
                  mergedArray = [...mergedArray, ...array]
              });
        
              const mergedUnique = mergedArray
                 .reduce((noDuplicates, item) => {
                  if (noDuplicates.includes(item)) {
                      return noDuplicates;
                  }
        
                  else {
                      return [...noDuplicates, item];
                  }
              }, [])
        
              return mergedUnique;
          }
        
          console.log(mergeNoDuplicates(nums1, nums2, nums3));
      </script>

      chevron_right

      
      

      Output:

      [1, 2, 3, 4, 5, 6, 7, 8]

    full-stack-img




    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.