How do use Map object in JavaScript ES6

JavaScript

In this post, we will have explored how do use Map object in JavaScript ES6. with code examples, and how to Create a Map, functions supported by MAP and loop over the map, adding element 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 object 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 the 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.

2. How to create Instance of JS Map object

We use Map() constructor to create an object of Map.

let mapinstance = new map();

3. 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 an 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

3. 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 exists 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. JavaScript Map.Has() Method

If we want to check if the key exists in MAP or not, then we use has(). It returns 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 iterate JavaScript Map

For loop to iterate over map in JavaScript

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

2.How to loop over JS Map using 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 an 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"

3.Loop over JavaScript MAP using enteries()

The entries() method returns 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"

4. Javacript iterate throup map using 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"

Related Posts