5 ways to Merge two Arrays and Remove Duplicates in Javascript

While working in javascript arrays, we often need to merge two arrays, and many times we also need to remove the duplicates from the final array. This article will see different ways to merge two arrays and remove duplicate items from the final array using different methods and various example illustrations.

Table of Contents:

Merge arrays and de-duplicate items using concat() and filter()

Javascript’s filter() method returns a new array consisting of all the elements that pass the test implemented by the provided function.

Javascript’s concat() method merges two or more arrays and returns the new array.

Example:-

Merge the below arrays and remove duplicates in the resulting array.

  • myArray1 = [5, 7, 9]
  • myArray2 = [9, 8, 5, 10]

Code:-

var myArray1 = [5, 7, 9];
var myArray2 = [9, 8, 5, 10];
var myFinalArray = myArray1.concat(myArray2.filter((item) => myArray1.indexOf(item) < 0));
console.log(myFinalArray);

Output:-

[ 5, 7, 9, 8, 10 ]

Explanation:-

  • Here, in the above code, we are merging two arrays using the concat() method.
  • The next step is to filter out only the unique items in the final array using the filter() method.
  • If any item is present in both myArray1 and myArray2, it is not added to the final array.

Merge two arrays using Spread operator

Javascript’s Set is to store unique values.

Javascript’s Spread syntax(…) allows any iterable like an array to be expanded at places where zero or more arguments are requiredOne can also use it to expand object expressions where zero or more key-value pairs are needed.

Example:-

Merge the below arrays and remove duplicates in the resulting array.

  • myArray1 = [5, 7, 9]
  • myArray2 = [9, 8, 5, 10]

Code:-

var myArray1 = [5, 7, 9];
var myArray2 = [9, 8, 5, 10];
var myFinalArray = [...new Set([...myArray1 ,...myArray2])]; 
console.log(myFinalArray);

Output:-

[ 5, 7, 9, 8, 10 ]

Explanation:-

  • Here, in the above code, we add two arrays to a Set object using the Spread syntax(…).
  • Since Set does not allow duplicates, unique values get added to the final array.

Note that you can use this solution with ECMAScript 6 and onwards.

Merge arrays and de-duplicate items using Set and concat()

Example:-

Merge the below arrays and remove duplicates in the resulting array.

  • myArray1 = [5, 7, 9]
  • myArray2 = [9, 8, 5, 10]

Code:-

var myArray1 = [5, 7, 9];
var myArray2 = [9, 8, 5, 10];
//after concatenating two arrays, add the merged array to the set
var myFinalArray = Array.from(new Set(myArray1.concat(myArray2))); 
console.log(myFinalArray);

Output:-

[ 5, 7, 9, 8, 10 ]

Explanation:-

  • Here, in the above code, we add two arrays to a Set object after concatenating two arrays. Since Set does not allow duplicates, unique values get added to the final array.

Note that you can use this solution with ECMAScript 2015 and onwards.

Merge arrays and de-duplicate items using while loop and concat()

Example:-

Merge the below arrays and remove duplicates in the resulting array.

  • myArray1 = [5, 7, 9]
  • myArray2 = [9, 8, 5, 10]

Code:-

var myArray1 = [5, 7, 9];
var myArray2 = [9, 8, 5, 10];
var myFinalArray = [];
// first concatenating two arrays.
var myArray3 = myArray1.concat(myArray2);
var length = myArray3.length;
// iterating the concatenated array to its length and removing the repeating element
// from the final array.
while (length--) 
{
  var item = myArray3[length];
  if (myFinalArray.indexOf(item) === -1) 
  {
    myFinalArray.unshift(item);
  }
}
//printing the merged and de-duplicated final array.
console.log(myFinalArray);

Output:-

[ 7, 9, 8, 5, 10 ]

Explanation:-

  • Here, in the above code, we are concatenating two arrays into myArray3.
  • Then, iterating myArray3 till its length and checking if any element is repeated, if yes then it is removed from myArray3 using unshift().

Merge arrays and de-duplicate items using custom function

Example:-

Merge the below arrays and remove duplicates in the resulting array.

  • myArray1 = [5, 7, 9]
  • myArray2 = [9, 8, 5, 10]

Code:-

// function to merge two arrays and remove duplicates
function mergeTwoArrays(_arrayA,_arrayB)
{
  if(!_arrayB.push || !_arrayB.length)
 // if _arrayB is not an array, or empty, then return _arrayA
   return _arrayA;    
 // if _arrayA is empty, return _arrayB
  if(!_arrayA.length) 
   return _arrayB.concat();     
  // iterate through all the elements of _arrayB
  for(var i = 0; i < _arrayB.length; i++)
  {
      // if _arrayB's element is not present in _arrayA only then add them to _arrayA
      if(_arrayA.indexOf(_arrayB[i]) == -1) 
      _arrayA.push(_arrayB[i]);
  }
  return _arrayA;
}
//usage of the function
var myArray1 = [5, 7, 9];
var myArray2 = [8, 5, 10];
var myFinalArray = mergeTwoArrays(myArray1, myArray2);
//printing the final array
console.log(myFinalArray);

Output:-

[ 5, 7, 9, 8, 10 ]

Explanation:-

  • Herein the above function, if _arrayA is empty or undefined, the function returns _arrayB.
  • if _arrayB is empty or not an array, then function returns _arrayA.
  • If both the above statements are falseiterate _arrayB till its length, check if any element is not present in _arrayA, and add it using push().

Read More:

I hope this article helped you merge two arrays in javascript and remove duplicate elements from the merged array. Good Luck !!!

Advertisements

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top