HomeFront EndScripting languagesJavaScript

How to use a Javascript Map

Last updated : Jul 30, 2023 12:00 AM

This article explains how to create and use a Map in Javascript. The methods provided by the Map are described with examples in Javascript.

1. Overview

The Map data type holds key-value pairs. Objects and primitive data types can be used as either keys or values in Map elements. The Map maintains the original insertion order of the elements.

2. How to create a Map

2.1 Passing array to Map constructor

const daysMap = new Map([["day_one","Monday"],["day_two","Tuesday"],["day_three","Wednesday"]])

2.2 Empty constructor and set method to insert elements

The Map.set(key, value) method inserts the key value pair to the map as an element. If the key exists, the set method replaces the value with the new value. 

const daysMap = new Map();
daysMap.set("day_one", "Monday");
daysMap.set("day_two", "Tuesday");
daysMap.set("day_three", "Wednesday");
daysMap.set("day_four", "Thursday");
daysMap.set("day_five", "Friday");
daysMap.set("day_six", "Saturday");
daysMap.set("day_seven", "Sunday");

3. Iterate a Map

The forEach method calls the passed callback function for each element in the Map. For a Map, forEach calls the callback function with each element's value, key, and the instance of the map. 

daysMap.forEach((value,key,map) => {
   console.log(key, value)
 })

For ES6 (ES 2015): 

for (const [key, value] of daysMap.entries()) {
   console.log(key, value)
}

For ES8 (ES 2017): 

for (const [key, value] of Object.entries(daysMap)) {
   console.log(key, value)
}

ES6 and ES8 allow you to iterate through values or keys only. To iterate through keys use
for (const key of daysMap.keys()) for ES6
or
for (const key of Object.keys(daysMap)) for ES8
To iterate through values use
for (const key of daysMap.values()) for ES6
or
for (const key of Object.values(daysMap)) for ES8

3.1 Modify elements while iterating Javascript Map

The forEach function passes the reference to the Map being iterated. Using that reference, we can modify values while iterating the Map. 

daysMap.forEach(function (value, key, map) {
   map.set(key, `Extra fun ${value}`)
});
console.log(daysMap)

4. Find value by key

4.1 Using Map.get

daysMap.get("day_one") finds value with the key "day_one"

4.2 Find by partial key match

Finds values with keys matching the criteria
Key starts with:
Find keys start with the string "day_o" 

daysMap.forEach(function (value, key) {
   if(key.match('^day_o')){
      console.log(value)//returns Monday
   } 
});

For ES6 (ES 2015): 

for (const [key, value] of daysMap.entries()) {
   if(key.match('^day_o')){
      console.log(value)//returns Monday
   } 
}

For ES8 (ES 2017): 

for (const [key, value] of Object.entries(daysMap)) {
   if(key.match('^day_o')){
      console.log(value)//returns Monday
   } 
}

Keys contain:
Find keys contain string "_t" 

daysMap.forEach(function (value, key) {
   if(key.includes('_t')){
      console.log(value)//returns Tuesday,Wednesday
   } 
});

For ES6 (ES 2015): 

for (const [key, value] of daysMap.entries()) {
   if(key.includes('_t')){
      console.log(value)
   } 
}

For ES8 (ES 2017): 

for (const [key, value] of Object.entries(daysMap)) {
   if(key.includes('_t')){
      console.log(value)
   } 
}

Keys ending with:
Find keys ending with string "hree" 

daysMap.forEach(function (value, key) {
   if(key.endsWith('hree')){
      console.log(value)//returns Wednesday
   } 
 });

For ES6 (ES 2015): 

for (const [key, value] of daysMap.entries()) {
   if(key.endsWith('hree')){
      console.log(value)
   } 
}

For ES8 (ES 2017): 

for (const [key, value] of Object.entries(daysMap)) {
   if(key.endsWith('hree')){
      console.log(value)
   } 
}

5. Delete a Map element

5.1 Delete by the Map key

monthsMap.delete("day_one") deletes the element with the key "day_one"

5.2 Find and delete by the partial key match

Finds values with keys matching the matching criteria and deletes the element. Note that all the map elements with matching keys are deleted.
Key starts with:
Find keys start with string "day_o" and delete them 

daysMap.forEach(function (value, key,map) {
   if(key.match('^day_o')){
      map.delete(key)//deletes Monday
   } 
});

For ES6 (ES 2015): 

for (const [key, value] of daysMap.entries()) {
   if(key.match('^day_o')){
      daysMap.delete(key)
   } 
}

For ES8 (ES 2017): 

for (const [key, value] of Object.entries(daysMap)) {
   if(key.match('^day_o')){
      daysMap.delete(key)
   } 
}

Keys contain:
Find and delete entries with keys contain string "_t" 

daysMap.forEach(function (value, key, map) {
   if(key.includes('_t')){
      map.delete(key)//deletes Tuesday,Wednesday
   } 
});

For ES6 (ES 2015): 

for (const [key, value] of daysMap.entries()) {
   if(key.includes('_t')){
      daysMap.delete(key)
   } 
}

For ES8 (ES 2017): 

for (const [key, value] of Object.entries(daysMap)) {
   if(key.includes('_t')){
      daysMap.delete(key)
   } 
}

Keys ending with:
Find and delete entries with keys ending with string "hree" 

daysMap.forEach(function (value, key, map) {
   if(key.endsWith('hree')){
      map.delete(key)//deletes Wednesday
   } 
});

For ES6 (ES 2015): 

for (const [key, value] of daysMap.entries()) {
   if(key.endsWith('hree')){
      daysMap.delete(key)
   } 
}


For ES8 (ES 2017): 

for (const [key, value] of Object.entries(daysMap)) {
   if(key.endsWith('hree')){
      daysMap.delete(key)
   } 
}

6. Find value by value

6.1 Find value by partial value match

Finds values with values matching the matching criteria. Note that all the elements with matching values will be returned.
Values start with:

Find values start with the string "Mon" 
daysMap.forEach(function (value, key) {
   if(value.match('^Mon')){
      console.log(value)//Monday
   }
});

For ES6 (ES 2015): 

for (const [key, value] of daysMap.entries()) {
   if(value.match('^Mon')){
      console.log(value)
   }
}

For ES8 (ES 2017): 

for (const [key, value] of Object.entries(daysMap)) {
   if(value.match('^Mon')){
      console.log(value)
   }
}

Values contain:
Find entries with values contain string "es" 

daysMap.forEach(function (value, key) {
   if(value.includes('es')){
      console.log(value)//Tuesday,Wednesday
   } 
});

For ES6 (ES 2015): 

for (const [key, value] of daysMap.entries()) {
   if(value.includes('es')){
      console.log(value)
   } 
}

For ES8 (ES 2017): 

for (const [key, value] of Object.entries(daysMap)) {
   if(value.includes('es')){
      console.log(value)
   } 
}

Values ending with:
Find entries with values ending with string "nday" 

daysMap.forEach(function (value, key) {
   if(value.endsWith('nday')){
      console.log(value)//Monday, Sunday
   } 
});

For ES6 (ES 2015): 

for (const [key, value] of daysMap.entries()) {
   if(value.endsWith('nday')){
      console.log(value)
   } 
}

For ES8 (ES 2017): 

for (const [key, value] of Object.entries(daysMap)) {
   if(value.endsWith('nday')){
      console.log(value)
   } 
}

7. Empty a Javascript Map

The clear method removes all the entries in a Map and empties it.

daysMap.clear()

8. Check if a key exists in a Map

has(key) returns true if an entry with the specified key exists in the map.

daysMap.has("day_one") returns true
daysMap.has("day_zero") returns false

9. Find the size of a Map

The size property returns the size of a map.

daysMap.size returns 7

10. Merge two Javascript maps

const anotherDaysMap = new Map([["1","Monday"],["2","Tuesday"],["3","Wednesday"],["4","Thursday"],["5","Friday"],["6","Saturday"],["7","Sunday"]])
const newDaysMap = new Map([...daysMap, ...anotherDaysMap])

In ES6 

daysMap.forEach((value,key) => {
	anotherDaysMap.set(key,value)
})

Note that any duplicate keys will be overridden by the last map in the Map constructor.

Related Links

Lance

By: Lance

Hi, I'm Lance Raney, a dedicated Fullstack Developer based in Oklahoma with over 15 years of exp

Read more...

FullstackInterview Training
FullstackInterview Training