Adding two arrays of objects with existing and repeated members of two JavaScript arrays replacing the repeated ones

When working with arrays of objects in JavaScript, you often need to merge them while avoiding duplicates. This tutorial shows how to combine two arrays of objects and remove duplicates based on a specific property.

The Problem

Consider two arrays of objects where some objects have the same name property. We want to merge them into one array, keeping only unique entries based on the name field.

const first = [{
    name: 'Rahul',
    age: 23
}, {
    name: 'Ramesh',
    age: 27
}, {
    name: 'Vikram',
    age: 35
}, {
    name: 'Harsh',
    age: 34
}, {
    name: 'Vijay',
    age: 21
}];

const second = [{
    name: 'Vijay',
    age: 21
}, {
    name: 'Vikky',
    age: 20
}, {
    name: 'Joy',
    age: 26
}, {
    name: 'Vijay',
    age: 21
}, {
    name: 'Harsh',
    age: 34
}];

console.log("First array length:", first.length);
console.log("Second array length:", second.length);

First array length: 5
Second array length: 5

Solution: Using a Map for Deduplication

We'll create a function that uses a map object to track unique names and prevent duplicates from being added to the result array.

const combineArray = (first, second) => {
    const combinedArray = [];
    const map = {};
    
    // Process first array
    first.forEach(firstEl => {
        if(!map[firstEl.name]){
            map[firstEl.name] = firstEl;
            combinedArray.push(firstEl);
        }
    });
    
    // Process second array
    second.forEach(secondEl => {
        if(!map[secondEl.name]){
            map[secondEl.name] = secondEl;
            combinedArray.push(secondEl);
        }
    });
    
    return combinedArray;
};

// Test the function
const result = combineArray(first, second);
console.log("Combined array:");
console.log(result);
console.log("Final length:", result.length);

Combined array:
[
  { name: 'Rahul', age: 23 },
  { name: 'Ramesh', age: 27 },
  { name: 'Vikram', age: 35 },
  { name: 'Harsh', age: 34 },
  { name: 'Vijay', age: 21 },
  { name: 'Vikky', age: 20 },
  { name: 'Joy', age: 26 }
]
Final length: 7

How It Works

The function uses a map object to track which names have already been encountered:

• Step 1: Create an empty result array and a map object
• Step 2: Iterate through the first array, adding objects with unique names
• Step 3: Iterate through the second array, only adding objects whose names aren't already in the map
• Step 4: Return the combined array with no duplicates

Alternative: Using Set and JSON.stringify

For a more modern approach, you can use a Set with JSON.stringify to handle complete object deduplication:

const combineArrayModern = (first, second) => {
    const seen = new Set();
    const combined = [...first, ...second];
    
    return combined.filter(obj => {
        const key = obj.name;
        if (seen.has(key)) {
            return false;
        }
        seen.add(key);
        return true;
    });
};

const modernResult = combineArrayModern(first, second);
console.log("Modern approach result:");
console.log(modernResult);

Modern approach result:
[
  { name: 'Rahul', age: 23 },
  { name: 'Ramesh', age: 27 },
  { name: 'Vikram', age: 35 },
  { name: 'Harsh', age: 34 },
  { name: 'Vijay', age: 21 },
  { name: 'Vikky', age: 20 },
  { name: 'Joy', age: 26 }
]

Conclusion

Both approaches effectively merge arrays while removing duplicates based on the name property. The map-based solution is more traditional and readable, while the Set approach is more concise and leverages ES6+ features.