How to use JavaScript ES6 Map

JavaScript

In this post, we will have explored How to use JavaScript ES6 Map with code examples, and how to Create a Map, functions supported by MAP and loop over the map,adding elment to map object and access element.

1.What is Map object in JavaScript?

Map object is introduced in the ES6 Standard of JavaScript. A map is a collection of data in the form of a key-value pair. It stores the data in an ordered collection and remembers the inserted order. While iterating on it, it returns the data in inserted order. The Object is the base class for Map object.

What are Different Between Map and object

Primitive types(string, number, big int, boolean, undefined, and symbol) and Object type can be used for key and value in Map() object.

How to create Instance of JS Map object

We use Map() constructor to create a object of Map Object

let mapinstance = new map();

How to Get size of Map object

The MAP size property returns the size of Map based on a number of key-value pair.

Syntax

mapname.size

Let us dive into example to understand it better.

//creating map onject

let mapobject = new Map();

mapobject.set('Lang', 'JS');
mapobject.set('Lang1', 'C#');

//getting size of map 
console.log(mapobject.size);

Output

2

2. Methods of JavaScript Map

  • Clear()
  • Delete()
  • Get()
  • Has()
  • Set()

1. Map Clear() Method

The clear () method is used to clear all elements of the MAP object at once and make the MAP Empty.

Syntax

mapname.clear();

Better dive into the example

let mapobject = new Map();

mapobject.set('Lang', 'JS');
mapobject.set('Lang1', 'C#');
mapobject.clear();
console.log(mapobject.size);

//Output
0

2.Map Delete() Method

To delete an element from Map we use this method. It deletes an element from a MAP based on the key.

Syntax

mapname.delete(key);

Better Understand with Example

let mapobject = new Map();

mapobject.set('Lang', 'JS');
mapobject.set('Des', 'C#');
console.log(mapobject.delete('Lang'));
console.log(mapobject.has('Lang'));

Output

true
false

3.Map Get() Method

It returns the value of the Map object element based on the key passed to the Get() method.If the key exist then return the key value else return ‘Undefined

Syntax

mapname.get(key)

Better dive into example and find it out who it work.

let mapobject = new Map();

mapobject.set('Lang', 'JS');
mapobject.set('Des', 'C#');
console.log(mapobject.get('Lang'));
console.log(mapobject.get('std'));

Output

JS
undefined

4. Map Has() Method

If we want to check if the key exists in MAP or not, then we use has(). It return true or false based on key exist or not in the Map object element.

Syntax

mapname.has(key)

Better we understand with an example

let mapobject = new Map();

mapobject.set('Lang', 'JS');
mapobject.set('Des', 'C#');
console.log(mapobject.has('Lang'));
console.log(mapobject.has('std'));

Output

true
false

5. Map Set() Method

It is used to set the value of any key in Map object.

Syntax

mapname.set(key,value);

Better understand with an example

let mapobject = new Map();

mapobject.set('Lang', 'JS');
mapobject.set('Des', 'C#');
console.log(mapobject.get('Lang'));
console.log(mapobject.get('Des'));

Output

JS
C#

3. How to loop Over JavaScript Map object

1. For of Loop to get JS Map key-value

 let map = new Map();

map.set('lang', 'C#');
map.set(1, 'Javascript');
map.set(7,'Go')

let map_iterator = map[Symbol.iterator]();

for (let [key, value] of map_iterator) {
  console.log(`${key}: ${value}`)
}

Output

"lang: C#"
"1: Javascript"
"7: Go"

2. How to loop over JS Map keys.

It returns the new iterator object that contains the Map Object element keys in the input order.

synatx

Map.keys()

Let us understand with Example

 let map = new Map();

map.set('lang', 'C#');
map.set(1, 'Javascript');
map.set(7,'Go')

let map_keys = map.keys();

//for-of loop to loop over the key()
for (let element of map_keys ) 
{
  console.log(element);
}


Output

"lang"
1
7

3.How to loop over JS Map values

The Map object values() function return an iterated array of values of the object that contains the key-value pairs for items in the Map in input order.

Syntax

Map.entries()

Let us understand with example

 let map = new Map();

map.set('lang', 'C#');
map.set(1, 'Javascript');
map.set(7,'Go')

let map_iterator = map.values();

console.log(map_iterator.next().value); 
console.log(map_iterator.next().value); 
console.log(map_iterator.next().value);

Output

"C#"
"Javascript"
"Go"

4.Loop over the JS MAP entries

The entries() method return an iteration array of key-values pair.

 let map = new Map();

map.set('lang', 'C#');
map.set(1, 'Javascript');
map.set(7,'Go')

let map_iterator = map.entries();

for (let [key, value] of map_iterator) {
  console.log(`${key}: ${value}`)
}

Output

"lang: C#"
"1: Javascript"
"7: Go"

5. Map.forEach()

This function executes the custom callback function each time for key-value in the Map object.

syntax

myMap.forEach(callback([value][,key][,map])[, thisArg])

Parameters

  • callback: Function to execute once for each element of Map. It has these arguments:
  • value Optional: Value of each element.
  • key Optional: Key of each element.
  • map Optional: The map being iterated (Map in the above Syntax box).
  • thisArg Optional: element value to use as this when executing callback.
function elementiterate(value, key, map) {
  console.log(`[${key}] = ${value}`);
}

new Map([["lang", "C#"],
[1, "Javascript"],
[7, "Go"]])
  .forEach(elementiterate);

Output

"[lang] = C#"
"[1] = Javascript"
"[7] = Go"