1. Introduction

Map is a collection of key value pairs. Map allows both primitive and objects as key or value. Map at first looks like an object which also holds key value pairs, but it is different than object. We’ll discuss the differences of map with object later.

A map looks like the following:

{ 'a' => 1, 'b' => 2, 'c' => 3 }

Key equality in Map is based on the sameValueZero algorithm (two values are functionally identical and +0 and -0 are considered equal).

2. Create a Map

A Map object can be created using Map() constructor.

const map = new Map();

3. Put keys in Map

The Map provides method set(key, value) to set key in a Map object. If the key already exists, the key will be overwritten. This method returns the Map object.

const map = new Map();
map.set("msg", "hello world");
console.log(map); // Map(1) { 'msg' => 'hello world' }

4. Remove all key-value pairs from Map

The Map provides clear() method which removes all key-value pairs from the Map object.

const map = new Map();

map.set("one", 1);
map.set("two", 2);
console.log(map); //Map(2) { 'one' => 1, 'two' => 2 }

map.clear();
console.log(map); // Map(0) {}

5. Delete a key

Using the delete() method, you can delete a key. This method returns true if an element in the Map object existed and has been removed, or false if the element does not exist.

const map = new Map();

map.set("one", 1);
map.set("two", 2);

console.log(map); //Map(2) { 'one' => 1, 'two' => 2 }

//delete key "one"
map.delete("one");
console.log(map); // Map(1) { 'two' => 2 }

6. Get value associated with a key

The get() method is used to get the value associated with a key. If the key doesn’t exist returns undefined.

const map = new Map();

map.set("one", 1);
map.set("two", 2);

console.log(map); //Map(2) { 'one' => 1, 'two' => 2 }

//get value associated with key "one"
console.log(map.get("one")); // 1

7. Check if the key exists

The method has(key) returns true if the key exists otherwise false.

const map = new Map();

map.set("one", 1);
map.set("two", undefined);

console.log(map); //Map(2) { 'one' => 1, 'two' => 2 }

console.log(map.has("one")); // true
console.log(map.has("three")); // false

8. Number of key-value pairs in Map

The size instance property provides the number of key-value pairs in the Map.

const map = new Map();

map.set("one", 1);
map.set("two", 2);

console.log(map.size); // 2

9. No default keys in Map

A Map doesn’t contain keys by default. It contains keys which are explicitly put into it.

const map = new Map();
console.log(map); // Map(0) {}

10. Key Types

A Map can contain functions, objects and primitives as keys.

const map = new Map();
let obj = { prop1: "my message" };
let func = function () {
  return "hello world";
};

//function as key
map.set(func, 1);

//primitive as key
map.set(2, "two");

//object as key
map.set("myObj", obj);

console.log(map);

11. Key order

The keys in a Map are ordered in straight order in which they were inserted in the Map.

const map = new Map();
map.set("one", 1);
map.set("two", 2);
map.set("three", 3);

for (const key of map.keys()) {
  console.log(key);
}
//Output
//one
//two
//three

12. Set properties in Map

A Map is an object. You can set properties in a Map just like any other object. But adding a property in Map does not add it as a key in a Map as it interacts with the generic object.

const map = new Map();
map.set("one", 1);
map.set("two", 2);
map.set("three", 3);

map["myProp"] = "myValue";

console.log(map); // Map(3) { 'one' => 1, 'two' => 2, 'three' => 3, myProp: 'myValue' }

13. NaN as Map keys

NaN can also be used as a key in a Map. NaN is considered the same as NaN (even though NaN !== NaN).

const map = new Map();
map.set(NaN, 1);
console.log(map.get(NaN)); // 1

14. Iterating Map

14.1 iterating Map using for..of

const myMap = new Map();
myMap.set("one", 1);
myMap.set("two", 2);

for (const [key, value] of myMap) {
  console.log(key + " = " + value);
}

//one = 1
//two = 2

14.2 Iterating Map with forEach()

const myMap = new Map();
myMap.set("one", 1);
myMap.set("two", 2);

myMap.forEach(function (value, key) {
  console.log(key + " = " + value);
});

//one = 1
//two = 2