ES6 - Collections

ES6 introduces two new data structures: Maps and Sets.
Maps − This data structure enables mapping a key to a value.
Maps − This data structure enables mapping a key to a value.
Sets − Sets are similar to arrays. However, sets do not encourage duplicates.
Sets − Sets are similar to arrays. However, sets do not encourage duplicates.
The Map object is a simple key/value pair. Keys and values in a map may be primitive or objects.
Following is the syntax for the same.
new Map([iterable]) 

The parameter iterable represents any iterable object whose elements comprise of a key/value pair. Maps are ordered, i.e. they traverse the elements in the order of their insertion.
This property returns the number of key/value pairs in the Map object.
The set() function sets the value for the key in the Map object.  The set() function takes two parameters namely, the key and its value. This function returns the Map object.
The has() function returns a boolean value indicating whether the specified key is found in the Map object. This function takes a key as parameter.
var map = new Map(); 
map.set('name','Tutorial Point'); 
map.get('name'); // Tutorial point

The above example creates a map object. The map has only one element. The element key is denoted by name. The key is mapped to a value Tutorial point.
Note − Maps distinguish between similar values but bear different data types. In other words, an integer key 1 is considered different from a string key “1”. Consider the following example to better understand this concept
var map = new Map(); 
map.set(1,true); 
console.log(map.has("1")); //false 
map.set("1",true); 
console.log(map.has("1")); //true
false 
true 

The set() method is also chainable. Consider the following example.
var roles = new Map(); 
roles.set('r1', 'User') 
.set('r2', 'Guest') 
.set('r3', 'Admin'); 
console.log(roles.has('r1'))
True 

The above example, defines a map object. The example chains the set() function to define the key/value pair.
The get() function is used to retrieve  the value corresponding to the specified key.
The Map constructor can also be passed an array. Moreover, map also supports the use of spread operator to represent an array.
var roles = new Map([ 
   ['r1', 'User'], 
   ['r2', 'Guest'], 
   ['r3', 'Admin'], 
]);  
console.log(roles.get('r2'))
The following output is displayed on successful execution of the above code.
Guest

Note − The get() function returns undefined if the key specified doesn’t exist in the map.
The set() replaces the value for the key, if it already exists in the map. Consider the following example.
var roles = new Map([ 
   ['r1', 'User'], 
   ['r2', 'Guest'], 
   ['r3', 'Admin'], 
]);  
console.log(`value of key r1 before set(): ${roles.get('r1')}`) 
roles.set('r1','superUser') 
console.log(`value of key r1 after set(): ${roles.get('r1')}`)
The following output is displayed on successful execution of the above code.
value of key r1 before set(): User 
value of key r1 after set(): superUser

Removes all key/value pairs from the Map object.
Removes any value associated to the key and returns the value that Map.prototype.has(key) would have previously returned.
Map.prototype.has(key) will return false afterwards.
Returns a new Iterator object that contains an array of [key, value] for each element in the Map object in insertion order.
Calls callbackFn once for each key-value pair present in the Map object, in insertion order. If a thisArg parameter is provided to forEach, it will be used as the ‘this’ value for each callback .
Returns a new Iterator object that contains the keys for each element in the Map object in insertion order.
Returns a new Iterator object that contains an array of [key, value] for each element in the Map object in insertion order.
The following example illustrates traversing a map using the for...of loop.
'use strict' 
var roles = new Map([ 
   ['r1', 'User'], 
   ['r2', 'Guest'], 
   ['r3', 'Admin'], 
]);
for(let r of roles.entries()) 
console.log(`${r[0]}: ${r[1]}`);
The following output is displayed on successful execution of the above code.
r1: User 
r2: Guest 
r3: Admin

A weak map is identical to a map with the following exceptions −
Its keys must be objects.
Its keys must be objects.
Keys in a weak map can be Garbage collected. Garbage collection is a process of clearing the memory occupied by unreferenced objects in a program.
Keys in a weak map can be Garbage collected. Garbage collection is a process of clearing the memory occupied by unreferenced objects in a program.
A weak map cannot be iterated or cleared.
A weak map cannot be iterated or cleared.
'use strict' 
let weakMap = new WeakMap(); 
let obj = {}; 
console.log(weakMap.set(obj,"hello"));  
console.log(weakMap.has(obj));// true
The following output is displayed on successful execution of the above code.
WeakMap {} 
true

A set is an ES6 data structure. It is similar to an array with an exception that it cannot contain duplicates. In other words, it lets you store unique values. Sets support both primitive values and object references.
Just like maps, sets are also ordered, i.e. elements are iterated in their insertion order. A set can be initialized using the following syntax.
Returns the number of values in the Set object.
Appends a new element with the given value to the Set object. Returns the Set object.
Removes all the elements from the Set object.
Removes the element associated to the value.
Returns a new Iterator object that contains an array of [value, value] for each element in the Set object, in insertion order. This is kept similar to the Map object, so that each entry has the same value for its key and value here.
Calls callbackFn once for each value present in the Set object, in insertion order. If athisArg parameter is provided to forEach, it will be used as the ‘this’ value for each callback.
Returns a boolean asserting whether an element is present with the given value in the Set object or not.
Returns a new Iterator object that contains the values for each element in the Set object in insertion order.
Weak sets can only contain objects, and the objects they contain may be garbage collected. Like weak maps, weak sets cannot be iterated.
'use strict' 
   let weakSet = new WeakSet();  
   let obj = {msg:"hello"}; 
   weakSet.add(obj); 
   console.log(weakSet.has(obj)); 
   weakSet.delete(obj); 
   console.log(weakSet.has(obj));
The following output is displayed on successful execution of the above code.
true 
false

Iterator is an object which allows to access a collection of objects one at a time. Both set and map have methods which returns an iterator.
Iterators are objects with next() method. When next() method is invoked, it returns an object with 'value' and 'done' properties . 'done' is boolean, this will return true after reading all items in the collection
var  set = new Set(['a','b','c','d','e']);  
var iterator = set.entries(); 
console.log(iterator.next())
The following output is displayed on successful execution of the above code.
{ value: [ 'a', 'a' ], done: false } 

Since, the set does not store key/value, the value array contains similar key and value. done will be false as there are more elements to be read.
var  set = new Set(['a','b','c','d','e']);  
var iterator = set.values(); 
console.log(iterator.next());
The following output is displayed on successful execution of the above code.
{ value: 'a', done: false }  

var  set = new Set(['a','b','c','d','e']);  
var iterator = set.keys(); 
console.log(iterator.next()); 
The following output is displayed on successful execution of the above code.
{ value: 'a', done: false }  

var map = new Map([[1,'one'],[2,'two'],[3,'three']]); 
var iterator = map.entries(); 
console.log(iterator.next()); 
The following output is displayed on successful execution of the above code.
{ value: [ 1, 'one' ], done: false }  

var map = new Map([[1,'one'],[2,'two'],[3,'three']]); 
var iterator = map.values(); 
console.log(iterator.next());  
The following output is displayed on successful execution of the above code.
{value: "one", done: false} 

var map = new Map([[1,'one'],[2,'two'],[3,'three']]); 
var iterator = map.keys(); 
console.log(iterator.next());  
The following output is displayed on successful execution of the above code.
{value: 1, done: false} 


    32 Lectures 
     3.5 hours 

 Sharad Kumar

    40 Lectures 
     5 hours 

 Richa Maheshwari

    16 Lectures 
     1 hours 

 Anadi Sharma

    50 Lectures 
     6.5 hours 

 Gowthami Swarna

    14 Lectures 
     1 hours 

 Deepti Trivedi

    31 Lectures 
     1.5 hours 

 Shweta
 Print
 Add Notes
 Bookmark this page