JavaScript - Merge two arrays according to id property

When working with JavaScript arrays of objects, you often need to merge two arrays based on a common property like an ID. This is useful for combining related data from different sources, such as user profiles and addresses.

Suppose we have two arrays of objects. The first contains user IDs and names, while the second contains user IDs and addresses:

const arr1 = [
    {"id":"123","name":"name 1"},
    {"id":"456","name":"name 2"}
];
const arr2 = [
    {"id":"123","address":"address 1"},
    {"id":"456","address":"address 2"}
];

We need to merge these arrays to create a third array containing complete user information (ID, name, and address) for each user.

Using Array.map() and Array.findIndex()

The most straightforward approach uses map() to iterate through the first array and findIndex() to locate matching objects in the second array:

const arr1 = [
    {"id":"123","name":"name 1"},
    {"id":"456","name":"name 2"}
];
const arr2 = [
    {"id":"123","address":"address 1"},
    {"id":"456","address":"address 2"}
];

const mergeArrays = (arr1 = [], arr2 = []) => {
    let res = [];
    res = arr1.map(obj => {
        const index = arr2.findIndex(el => el["id"] == obj["id"]);
        const { address } = index !== -1 ? arr2[index] : {};
        return {
            ...obj,
            address
        };
    });
    return res;
};

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

[
    { id: '123', name: 'name 1', address: 'address 1' },
    { id: '456', name: 'name 2', address: 'address 2' }
]

Using Array.find() (Alternative Method)

A cleaner approach uses find() instead of findIndex():

const mergeArraysOptimized = (arr1 = [], arr2 = []) => {
    return arr1.map(obj1 => {
        const obj2 = arr2.find(obj => obj.id === obj1.id);
        return { ...obj1, ...obj2 };
    });
};

const result = mergeArraysOptimized(arr1, arr2);
console.log(result);

[
    { id: '123', name: 'name 1', address: 'address 1' },
    { id: '456', name: 'name 2', address: 'address 2' }
]

Handling Missing Matches

When arrays don't have matching IDs, the function should handle missing data gracefully:

const arr1Extended = [
    {"id":"123","name":"name 1"},
    {"id":"456","name":"name 2"},
    {"id":"789","name":"name 3"}  // No matching address
];

const mergeWithMissingData = (arr1 = [], arr2 = []) => {
    return arr1.map(obj1 => {
        const obj2 = arr2.find(obj => obj.id === obj1.id) || {};
        return { ...obj1, ...obj2 };
    });
};

console.log(mergeWithMissingData(arr1Extended, arr2));

[
    { id: '123', name: 'name 1', address: 'address 1' },
    { id: '456', name: 'name 2', address: 'address 2' },
    { id: '789', name: 'name 3' }
]

Key Points

• Use the spread operator (...) to merge object properties
• Array.find() is more readable than findIndex() for this use case
• Provide default empty objects (|| {}) to handle missing matches
• Use strict equality (===) instead of loose equality (==) for ID comparison

Conclusion

Merging arrays by ID property is efficiently accomplished using map() with find(). This approach creates clean, merged objects while handling missing data gracefully.