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:
Table of Content
- Using concat() and filter()
- Using reduce()
- Using Map and Set
- Using filter() and some()
- Using filter() and Map and has()
Approach 1: Using concat() and filter()
- The
concat()
method is used to mergearray1
and the filtered values fromarray2
to create a new array. - The
filter()
method is applied toarray2
, ensuring that only objects not present inarray1
(based on theid
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 mergearray2
intoarray1
. - The
some()
method is employed to check if an object with the sameid
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 theirid
properties. - The
Set
is employed to ensure uniqueness, preventing duplicate objects with the sameid
. - Finally,
Array.from()
is used to convert the values of theMap
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 inarray1
with the sameid
as the current object inarray2
. - The
filter()
method is applied toarray2
to only include objects that are not present inarray1
(based on theid
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 fromarray1
, with theid
as the key and the object as the value. - The
has()
method is used to check if there is any object in theMap
with the sameid
as the current object inarray2
. - The
filter()
method is applied toarray2
to only include objects that are not present in theMap
(based on theid
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' } ]
Contact Us