How Maps work in JavaScript

Map is one of the data structures that comes with the ECMAScript 6.

Isha Jauhari
Feb 11 · 3 min read

Map is list of items where each item is stored as a key,value pair. Sounds familiar to Object? Then what is difference between Object and Map?

  • Unlike object, map is used to store the key and value of any type. It can be number, String, Boolean… Map can use both Objects and primitive types as keys.
  • Maps are iterable by-default, whereas Objects are not.
  • The key,value pairs in Map maintains the insertion order, whereas Object don’t.

Initializing Map

The first item in the array becomes the key and second will be value.

let mapObject = new Map();or
let mapObject = new Map([[5, 42], ["name", "Batman"], ["age", 35]]);

Methods

  • map.get(key) : returns the value by key.If key is not present in map object,it returns undefined.
  • map.has(key) : returns true if key is present in the map object otherwise false.
  • map.delete(key) : returns true if the element is removed in the map object otherwise false.
  • map.clear(key) : removes the entire key,value pairs exists in the map object.

Properties

Few Examples

let mapObject = new Map();
let obj ={};
//a numeric key and string value
mapObject.set(1, "Batman");
//a string key and numeric value
mapObject.set("Superman", 2);
//a boolean key and string value
mapObject.set(true, "true");
//a object property and string value
mapObject.set(obj, "Object Property");
console.log(mapObject.size); //4
console.log(mapObject.get('Superman')); //2
console.log(mapObject.has(true)); //true
//deleting value by key
mapObject.delete("Superman");
console.log(mapObject.size); //3
//clearing map object
mapObject.clear();
console.log(mapObject.size); //0

Iterating Map Object

For..of loop

  • map.keys(): This method is used to retrieve the keys present in the map object.
let mapObject = new Map(
[
["Batman", 1], [2, "Superman"], [3, "Flash"]
]);
for(let key of mapObject.keys())
{
console.log(key); // "Batman", 2, 3
}
  • map.values(): This method is used to retrieve the values present in the map object.
for(let value of mapObject.values())
{
console.log(value); //1, "Superman", "Flash"
}
  • map.entries(): This method is used to retrieve the key, value pair present in the map object. By default for..of loop gives the key, value pair.
for(let entry of mapObject.entries())
{
//[ 'Batman', 1 ], [ 2, 'Superman' ], [ 3, 'Flash' ]
console.log(entry);
}
ORfor(let entry of mapObject)
{
// [ 'Batman', 1 ], [ 2, 'Superman' ], [ 3, 'Flash' ]
console.log(entry);
}

foreach loop

new Map([["Batman", 1],[2, "Superman"],[3, "Flash"]]).
forEach( (value, key) =>
{
console.log(key + "," + value);
});
// Output ->
Batman,1
2,Superman
3,Flash

That’s it for now, hope it was useful. In next article, I will cover Set Data Structure.

JavaScript in Plain English

Learn the web's most important programming language.

Isha Jauhari

Written by

Trying to learn new things every day and sharing my knowledge with people || Avid Reader

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade