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.

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.

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

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.

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

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.

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

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

Approach 4: Using Object and for...in loop

In this approach, we'll first convert both maps into objects, merge them by iterating through the keys, and then convert the merged object back into a Map.

Syntax:

for (variable in object) {
  // code block to be executed
}

Example:

function combineMaps(map1, map2) {
    let obj = {};

    // Convert map1 to object
    for (let [key, value] of map1) {
        obj[key] = value;
    }

    // Update or add values from map2
    for (let [key, value] of map2) {
        obj[key] = (obj[key] || 0) + value;
    }

    // Convert object back to map
    let combinedMap = new Map();
    for (let key in obj) {
        combinedMap.set(key, obj[key]);
    }

    return combinedMap;
}

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

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

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