How to merge two arrays with objects in one in JavaScript?

Suppose, we have two arrays of objects like these ?

const arr1 = [
  {name:'test', lastname: 'test', gender:'f'},
  {name:'test1', lastname: 'test1', gender:'f'},
  {name:'test2', lastname: 'test2', gender:'m'}
];
const arr2 = [
  {name:'test21', lastname: 'test21', gender:'f'},
  {name:'test1', lastname: 'test1', gender:'f'},
  {name:'test2', lastname: 'test2', gender:'m'},
  {name:'test22', lastname: 'test22', gender:'m'}
];

console.log("Array 1:", arr1);
console.log("Array 2:", arr2);

Array 1: [
  { name: 'test', lastname: 'test', gender: 'f' },
  { name: 'test1', lastname: 'test1', gender: 'f' },
  { name: 'test2', lastname: 'test2', gender: 'm' }
]
Array 2: [
  { name: 'test21', lastname: 'test21', gender: 'f' },
  { name: 'test1', lastname: 'test1', gender: 'f' },
  { name: 'test2', lastname: 'test2', gender: 'm' },
  { name: 'test22', lastname: 'test22', gender: 'm' }
]

These arrays do not have any repeating objects within (repeating on the basis of 'name' property) but there exist some objects with repeating names between the first and second arrays.

We are required to write a JavaScript function that takes two such arrays and returns a new array. The new array should contain all the unique objects of both arrays. Here, to check the uniqueness of any object we will check for its unique "name" property.

Method 1: Using forEach and Map Object

const arr1 = [
  {name:'test', lastname: 'test', gender:'f'},
  {name:'test1', lastname: 'test1', gender:'f'},
  {name:'test2', lastname: 'test2', gender:'m'}
];
const arr2 = [
  {name:'test21', lastname: 'test21', gender:'f'},
  {name:'test1', lastname: 'test1', gender:'f'},
  {name:'test2', lastname: 'test2', gender:'m'},
  {name:'test22', lastname: 'test22', gender:'m'}
];

const mergeUniquely = (arr1 = [], arr2 = []) => {
  const newArr = arr1.concat(arr2);
  const map = {};
  const res = [];
  newArr.forEach(el => {
    if(!map[el['name']]){
      res.push(el);
      map[el['name']] = 1;
    };
  });
  return res;
};

console.log(mergeUniquely(arr1, arr2));

[
  { name: 'test', lastname: 'test', gender: 'f' },
  { name: 'test1', lastname: 'test1', gender: 'f' },
  { name: 'test2', lastname: 'test2', gender: 'm' },
  { name: 'test21', lastname: 'test21', gender: 'f' },
  { name: 'test22', lastname: 'test22', gender: 'm' }
]

Method 2: Using Map for Better Performance

For better performance with large arrays, we can use JavaScript's Map object:

const mergeUniquelyWithMap = (arr1 = [], arr2 = []) => {
  const seen = new Map();
  const result = [];
  
  [...arr1, ...arr2].forEach(obj => {
    if (!seen.has(obj.name)) {
      seen.set(obj.name, true);
      result.push(obj);
    }
  });
  
  return result;
};

console.log(mergeUniquelyWithMap(arr1, arr2));

[
  { name: 'test', lastname: 'test', gender: 'f' },
  { name: 'test1', lastname: 'test1', gender: 'f' },
  { name: 'test2', lastname: 'test2', gender: 'm' },
  { name: 'test21', lastname: 'test21', gender: 'f' },
  { name: 'test22', lastname: 'test22', gender: 'm' }
]

Method 3: Using Filter and FindIndex

Another approach using filter() and findIndex():

const mergeUniquelyWithFilter = (arr1 = [], arr2 = []) => {
  const combined = [...arr1, ...arr2];
  return combined.filter((obj, index) => 
    combined.findIndex(item => item.name === obj.name) === index
  );
};

console.log(mergeUniquelyWithFilter(arr1, arr2));

[
  { name: 'test', lastname: 'test', gender: 'f' },
  { name: 'test1', lastname: 'test1', gender: 'f' },
  { name: 'test2', lastname: 'test2', gender: 'm' },
  { name: 'test21', lastname: 'test21', gender: 'f' },
  { name: 'test22', lastname: 'test22', gender: 'm' }
]

Comparison

Conclusion

For merging arrays of objects while maintaining uniqueness, use the Map approach for large datasets or the forEach method for simplicity. The filter method is most readable but less efficient for large arrays.