JavaScript Program to Combine Values of Two Maps having Same Key

In this article, we are going to learn about combining the values of two maps having the same keys in JavaScript, Combining values of two maps with the same key involves merging corresponding values from each map, creating a new map that retains unique keys while accumulating shared values.

There are different approaches to Combining the values of two maps having the same key in JavaScript. Let’s discuss each of them one by one.

• Using forEach
• Using a custom function
• Using Array.from and reduce

We will explore all the above methods along with their basic implementation with the help of examples.

Approach 1: Using forEach

In this approach, we Iterate through one map using forEach, set initial values in a new map, and then update values by adding corresponding values from the second map if the keys match.

Syntax:

array.forEach( callback(element, index, arr), thisValue )

Example: In this example, we are merging values from map1 and map2, where existing keys in the resulting map are updated by adding corresponding map2 values, and new keys are added with their values.

Javascript

const map1 = new Map([['India', 1], ['Usa', 2]]);
const map2 = new Map([['India', 3], ['Russia', 4]]);

const result = new Map([...map1]);

map2.forEach((value, key) => {
    if (result.has(key)) {
        result.set(key, result.get(key) + value);
    } else {
        result.set(key, value);
    }
});

console.log(result);

Output

Map(3) { 'India' => 4, 'Usa' => 2, 'Russia' => 4 }

Approach 2: Using a custom function

In this approach, we are using custom function, combineMaps, merges two maps by iterating through the second map’s entries, updating or adding values in the first map based on matching keys.

Syntax:

function combineMaps(map1, map2) {
    // Code
    return combinedMap;
}

Example: In this example we are using the above-explained approach.

Javascript

function combineMaps(map1, map2) {
    let combinedMap = new Map([...map1]);

    map2.forEach((value, key) => {
        if (combinedMap.has(key)) {
            combinedMap.set(key, combinedMap.get(key) + value);
        } else {
            combinedMap.set(key, value);
        }
    });

    return combinedMap;
}

let map1 = new Map([['JavaScript', 1], ['HTML', 2]]);
let map2 = new Map([['JavaScript', 2], ['CSS', 4]]);

let result = combineMaps(map1, map2);
console.log(result);

Output

Map(3) { 'JavaScript' => 3, 'HTML' => 2, 'CSS' => 4 }

Approach 3: Using Array.from and reduce

In this approach, Combines values of two maps by converting entries to arrays, concatenating them, then using reduce to update or set values based on matching keys.

Syntax:

Array.from(object, mapFunction, thisValue)    // Array.form
array.reduce( function(total, currentValue, currentIndex, arr), initialValue )

Example: In this example we are using the above-explained approach.

Javascript

let map1 = new Map([['HTML', 1], ['CSS', 2]]);
let map2 = new Map([['JavaScript', 3], ['HTML', 4]]);

let combinedMap = new Map(
    Array.from(map1)
        .concat(Array.from(map2))
        .reduce((ele, [key, value]) => {
            ele.set(key, (ele.get(key) || 0) + value);
            return ele;
        }, new Map())
);

console.log(combinedMap);

Output

Map(3) { 'HTML' => 5, 'CSS' => 2, 'JavaScript' => 3 }