How to Merge two Different Arrays of Objects with Unique Values only 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()

• 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.

JavaScript

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);

Output

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

Approach 2: Using reduce()

• The reduce() function 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.

JavaScript

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()
const mergedArray = array2
    .reduce((accumulator, item2) => {
        if (!accumulator.some(item1 =>
            item1.id === item2.id)) {
            accumulator.push(item2);
        }
        return accumulator;
    }, array1);
console.log(mergedArray);

Output

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

Approach 3: Using Map and Set

• 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.

JavaScript

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);

Output

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

Approach 4: Using filter() and some()

• 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.

JavaScript

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);

Output

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

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

• 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.

JavaScript

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);

Output

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