How To Merge Maps In JavaScript

Posted on by Edward Anderson
How To Merge Maps In JavaScript

Are you know how to merge maps in JavaScript? If not, don’t worry. In this article we’ll introduce for you 2 methods to do it. You can use the spread operator or use a for loop with Map.has(). Let’s see the specific steps below.

How to merge maps in JavaScript

Using spread operator

You can use the Spread operator to create a merged map. This feature was added to the JavaScript language as part of the ES6 standard. Its syntax converts maps (or arrays or sets) to a list of elements.

var map1 = new Map([['host', 'learnshareit.com']]);
var map2 = new Map([['year', 2022]]);

// Merge map1 and map2
var mergedMap = new Map([...map1, ...map2]);

console.log(mergedMap);

Output: 

{'host' => 'learnshareit.com', 'year' => 2022}

The above example uses the spread syntax in order to unpack the pairs (have keys and values) from Map1 and Map2 into a list of elements that can react between the brackets for an array. The purpose is to create a new array containing all the map’s elements. And then use that array to pass in the new Map() constructor to create a new map that is merged.

In fact, this approach will automatically merge the maps for you, if two maps contain any pair which has the same key, then it will push the last found key-value pair into the final map.

var map1 = new Map([['host', 'learnshareit.com']]);
var map2 = new Map([['host', 2022]]);

// Merge map1 and map2
var mergedMap = new Map([...map1, ...map2]);

console.log(mergedMap);

Output: 

{host => 2022}

Using a for loop with Map.has()

This approach may be helpful to deal with the disadvantage of the previous one. The Map.has() method returns true if an element with a given key already exists in a map.

Syntax:

finalMap.has(key)

Parameter:

  • key: key of the element of the map to check its existence.

First, we initialize a map that has no pair. We then loop through the first map’s keys and the second one in order. Finally check those pairs’ keys using has() to make sure it only appear once. If it returns false then we will add the pair to the final map, otherwise you can decide which pair you want to keep.

var map1 = new Map([['host', 'learnshareit.com']]);
var map2 = new Map([['host', 2022]]);
var mergedMap = new Map();

for (let i of map1.keys()){
    if (mergedMap.has(i) == false)
        mergedMap.set(i,map1.get(i))
}

for (let i of map2.keys()){
    if (mergedMap.has(i) == false)
        mergedMap.set(i,map2.get(i))
}

console.log(mergedMap);

Output: 

{'host' => 'learnshareit.com'}

As you can see, although we have the same two maps to be merged as the previous method, the result produced is different. Because in this example we choose to use the first appearing element with the same key pushed into the map instead of the last element like the first method. However, if you have many maps to merge then you could consider create a function to reduce your codes:

function concatMap(mergedMap, subMap){
for (let i of subMap.keys()){
    if (mergedMap.has(i) == false)
        mergedMap.set(i,subMap.get(i))
}
}

var map1 = new Map([['host', 'learnshareit.com']]);
var map2 = new Map([['year', 2022]]);
var map3 = new Map([['aim', 'help students learn and share their knowledge']]);
var mergedMap = new Map();

concatMap(mergedMap,map1)
concatMap(mergedMap,map2)
concatMap(mergedMap,map3)
console.log(mergedMap);

Output: 

{'host' => 'learnshareit.com', 'year' => 2022, 'aim' => 'help students learn and share their knowledge'}

Summary

We have learned how to merge maps in JavaScript using two different methods. It would help if you considered that each approach has its pros and cons. We hope you will be successful using our page.

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *