How to Merge two Different Arrays of Objects with Unique Values in JavaScript?

Merging two arrays of objects with unique values is a common task in JavaScript. This operation involves combining the elements of two arrays while ensuring that each resulting object has a unique identifier. We will explore various approaches to merging two arrays of objects with unique values.

These are the following approaches:

Approach 1: Using concat() and filter() Methods

• The concat() method is used to merge array1 and the filtered values from array2 to create a new array.
• The filter() method is applied to array2, ensuring that only objects not present in array1 (based on the id property) are included.
• The resulting array, mergedArray, contains unique objects from both arrays.

Example: This example shows the implementation of the above-explained approach.

const array1 = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' }
];

const array2 = [
    { id: 2, name: 'Jane' },
    { id: 3, name: 'Doe' }
];

const mergedArray = array1.concat(array2.filter(
    item2 => !array1.some(item1 => item1.id === item2.id)));

console.log(mergedArray);

[
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Doe' }
]

Approach 2: Using reduce() Method

• The reduce() method is used to iteratively merge array2 into array1.
• The some() method is employed to check if an object with the same id already exists in the accumulated array.
• If the id is not found, the object is pushed to the accumulator, resulting in a merged array with unique objects.

Example: This example shows the implementation of the above-explained approach.

const array1 = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' }
];

const array2 = [
    { id: 2, name: 'Jane' },
    { id: 3, name: 'Doe' }
];

// Merging arrays with unique values
// using reduce() method
const mergedArray = array2
    .reduce((accumulator, item2) => {
        if (!accumulator.some(item1 =>
            item1.id === item2.id)) {
            accumulator.push(item2);
        }
        return accumulator;
    }, array1);

console.log(mergedArray);

[
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Doe' }
]

Approach 3: Using Map

• A Map is used to store the unique objects based on their id properties.
• The Set is employed to ensure uniqueness, preventing duplicate objects with the same id.
• Finally, Array.from() is used to convert the values of the Map back into an array.

Example: This example shows the implementation of the above-explained approach.

const array1 = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' }
];

const array2 = [
    { id: 2, name: 'Jane' },
    { id: 3, name: 'Doe' }
];

// Merging arrays with unique values
// using Map and Set
const map = new Map([...array1, ...array2]
    .map(obj => [obj.id, obj]));
    
const mergedArray = Array.from(map.values());

console.log(mergedArray);

[
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Doe' }
]

Approach 4: Using filter() and some() Methods

• The some() method is used to check if there is any object in array1 with the same id as the current object in array2.
• The filter() method is applied to array2 to only include objects that are not present in array1 (based on the id property).
• The final array, resultArray, contains unique objects from both arrays.

Example: This example shows the implementation of the above-explained approach.

const array1 = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' }
];

const array2 = [
    { id: 2, name: 'Jane' },
    { id: 3, name: 'Doe' }
];

const mergedArray = array2.filter(
    item2 => !array1.some(item1 => item1.id === item2.id)
);

const resultArray = [...array1, ...mergedArray];

console.log(resultArray);

[
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Doe' }
]

Approach 5: Using filter(), Map and has() Methods

• A Map is created from array1, with the id as the key and the object as the value.
• The has() method is used to check if there is any object in the Map with the same id as the current object in array2.
• The filter() method is applied to array2 to only include objects that are not present in the Map (based on the id property).
• The final array, resultArray, contains unique objects from both arrays.

Example: This example shows the implementation of the above-explained approach.

const array1 = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' }
];

const array2 = [
    { id: 2, name: 'Jane' },
    { id: 3, name: 'Doe' }
];

const map = new Map(array1.map(obj => [obj.id, obj]));
const mergedArray = array2.filter(item2 => !map.has(item2.id));
const resultArray = [...map.values(), ...mergedArray];

console.log(resultArray);

[
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Doe' }
]