Iteration Map

Consider I am passing an array to the map like below,

// array of [key, value] pairs
let map = new Map([
  ['1',  'stringOne'],
  [1,    'number1'],
  [true, 'booleanTrue']
]);

Object.entries(obj) is an inbuilt method  which returns an array of key/value pairs for an object with same format.

We can an initialize a map from an object like below,

let map = new Map(Object.entries({
  name: "Tester",
  age: 30
}));

Here, Object.entries returns the array of key-value pairs.

Output:
 [ ["name","Tester"], ["age", 30] ].

Iterate on Map:

There are 3 methods, we can use..

map.keys() – returns an iterable for keys,
map.values() – returns an iterable for values,
map.entries() – returns an iterable for entries [key, value] and it is used by default in for..of.

Example I :

let sportsMap = new Map([
  ['Cricket', 500],
  ['Football', 350],
  ['WWE',    50]
]);

// iterate over keys (vegetables)
for (let sport of sportsMap.keys()) {
  alert(sport); // cricket, Football, WWE
}

// iterate over values (amounts)
for (let fee of sportsMap.values()) {
  alert(fee); // 500, 350, 50
}

// iterate over [key, value] entries
for (let entry of sportsMap) { // the same as of recipeMap.entries()
  alert(entry); // cricket,500 (and so on)
}

Note: Map preserves this insertion order

ForEach with ES6 :

Map has a built-in forEach method, similar to Array...

Example II

sportsMap.forEach( (value, key, map) => {
  alert(`${key}: ${value}`); // cricket: 500 etc
});

How to use object as Keys in Map

We can also use object as key in map.

Note: ES6 map is different. Do not make confuse yourself.

Example I:

let testObject = { name: "TestObject With Map" };

let testMap = new Map();

testMap.set(testObject, 123);

alert( testMap.get(testObject) ); // 123

Here testObject is the simple normal object which I used as key in map.

How Map comparing keys ?

Map uses the algorithm SameValueZero (same as strict equality === ).

We can also do the chaining operation with map. See below example,

testMap.set('1', 'stringOne')
       .set(1, 'number1')
       .set(true, 'booleanTrue');

Like this you can add n number of times.

Important methods in Map with example

Map is like key value pair concept (like an Object). But Map allows keys as any type. Remember object allows only string key.

Note: ES6 map is different. Do not make confuse yourself.

Main methods are below,

      new Map() – creates the map.

     map.set(key, value) – stores key and value.

     map.get(key) – returns the value by the key. Suppose If key doesn’t exist undefined will be  returned.

     map.has(key) – returns true if the key exists, else false will be returned.

     map.delete(key) – removes the value by the key.

     map.clear() – clears the map.

     map.size – returns the current element count.

Simple Example I:

let map = new Map();

map.set('1', 'stringOne');   // a string key
map.set(1, 'number1');     // a numeric key
map.set(true, 'booleanValueTrue'); // a boolean key

alert( map.get(1)   ); // 'number1'
alert( map.get('1') ); // 'stringOne'
alert( map.get(true) ); // 'booleanValueTrue
alert( map.size ); // 3

Note: See the above example, Keys are not converted to string.