ES2015 or ES6 Collections Maps and Sets

The two new Data Structures are been implemented in ES2015. They are :

1. Maps

2. Sets

Maps :

This will map a key to a value. The key and value accept both primitive and object types.
Maps are ordered and it elements are been traversed based on the order of the insertion.

Syntax :

new Map([iterable])

Operations of Map :

1. set()
2. get()
3. has()

set() :

This function will set the value for the respective key in the map object. It accept two parameters i.e. the key and the value. This don't accept duplicates i.e. it contains only unique values. This is similar to the arrays.

Example :

var setId = new Map(); //creating a map object
setId.set('id','1234');
Here, the id key is mapped to the number 1234.

The set() will also support the chaining concept. i.e. we can set more than one key value pair to a single map object.

Example :

var fruits = new Map();
fruits.set('1','apple')
.set('2','banana')
.set('3','grapes');
console.log(fruits.get('2')); //banana

get() :

This function is used to retrieve the values from it's related key.

Example :

setId.get('id'); // "1234"

has() :

This function will verify whether the key is been found in the map object or not and it returns a Boolean result. If element is found it returns true else the result will be false.

Example :

setId.has('id'); //true

The Map constructor can also be defined in the form of an array.

Example :

var fruits = new Map([
['1','apple'],
['2','banana'],
['3','orange'],
]) ;
console.log(fruits.get('3'));
output :
orange

The values of the set can also be replaced i.e. fruits.set('2','watermelon');

console.log(fruits.get('2')); //watermelon

Methods :

There are six map methods. They are :

1.Map.prototype.clear()
2.Map.prototype.delete(key)
3.Map.prototype.entries()
4.Map.prototype.keys()
5.Map.prototype.values()
6.Map.prototype.forEach(callBackFunction,arg)

 Map.prototype.clear() :

The clear() method removes all the key/value pairs from the Map object.

Example :

var names= new Map();
names.set('name','sita');
console.log(names.size); //1
names.clear();
console.log(names.size); //0

Map.prototype.delete(key) :

It deletes the value which is been associated to the key. It returns true if the element exists and deleted else it returns false and a parameter key need to passed to identify the value.

Example :

var data = new Map();
data.set('name','shruthi');
console.log(data.has('name'));
output :
true
data.delete("name");
console.log(data.has('name'));
output :
true
false

Map.prototype.keys() :

It refers to the keys in the Map and then returns a new iterator object.

Syntax :

data.keys()

Example :

var data = new Map();
data.set('name','shruthi');
data.set('gender','female');
var itrtr = data.keys();
console.log(itrtr.next().value);
console.log(itrtr.next().value);

output :
name
gender

Map.prototype.values() :

It refers to the keys in the Map and then returns a new iterator object.

Syntax :

data.values()

Example :

var data = new Map();
data.set('name','shruthi');
data.set('gender','female');
var itrtr = data.values();
console.log(itrtr.next().value);
console.log(itrtr.next().value);

output :

shruthi
female

Map.prototype.entries() :

It returns an array of [key,value] pairs in the new iterator object for each element in the map.

Syntax :

data.entries()

Example :

var data = new Map();
data.set('name','shruthi');
data.set('gender','female');
var itrtr = data.entries();
console.log(itrtr.next().value);
console.log(itrtr.next().value);

output :
name,shruthi
gender,female

Map.prototype.forEach(callBackFunction,arg) :

The forEach() function executes the specified function for each and every entry.

Example :

var data = new Map();
data.set('name','shruthi');
data.set('gender','female');
data.forEach(showDetails);
function showDetails(key,value){
console.log(key + " "+ value);
}
output :

shruthi name
female gender

Comparison between Maps and Objects :

The main differences are :

1. The keys for the Object has to be only strings or symbol but for the Maps it can be any value i.e. it may be a function,objects or any primitive.
2. To know the size of a object when need to check manually but for the map we can easily know with the size property.
3. Map has better scenarios for adding and removing the key/value pairs.
4. To iterate an object we need to obtain the key and then do the iteration but Map can be directly iterated.

If NaN is used as Map keys :

Even though NaN is not equal to itself i.e. NaN == NaN (false) , the NaN can be used as a key in a Map.
Example :

var data = new Map();
data.set(NaN,"not a number");
data.get(NaN);
output : 
"not a number"
var data1 = Number("abcd");
data.get(data1);
output :
"not a number"

Iterate Map using for...of loop :

Map can be created using for..of loop. Example :

var myMap = new Map();
myMap.set(1,'apple');
myMap.set(2,'banana');

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

output :

1=apple
2=banana

for(var key of myMap.keys())
{
      console.log(key);
}

output :

1
2

for(var value of myMap.values())
{
       console.log(value);
}

output :

apple
banana

for(var [key,value] of myMap.entries())
{
     console.log(key + '=' + value);
}

output :

1=apple
2=banana

Relation with the Array Objects :

var array1 = [["name","ram"],["gender","male"]];
var myMap = new Map(array1);
myMap.get('name');

output :
"ram"

Array.from(myMap) :
It retrieves all the array elements key/value pairs.

output:
["name","ram"]
["gender","male"]

Array.from(myMap.keys()) :
It retrieves only keys from the array.

output :
["name","gender"]

Array.from(myMap.values()) :
It retrieves only valuesfrom the array.

output :
["ram","male"]

1.