ES6 - Collections

ES6 introduces two new data structures: Maps and Sets.

• Maps − This data structure enables mapping a key to a value.
• Sets − Sets are similar to arrays. However, sets do not encourage duplicates.
  

Maps

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.

Map Properties

Sr.No	Property & Description
1	Map.prototype.size This property returns the number of key/value pairs in the Map object.

Understanding basic Map operations

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

Output

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'))

Output

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.

Example

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

Map Methods

Sr.No	Method & Description
1	Map.prototype.clear() Removes all key/value pairs from the Map object.
2	Map.prototype.delete(key) 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.
3	Map.prototype.entries() Returns a new Iterator object that contains an array of [key, value] for each element in the Map object in insertion order.
4	Map.prototype.forEach(callbackFn[, thisArg]) 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 .
5	Map.prototype.keys() Returns a new Iterator object that contains the keys for each element in the Map object in insertion order.
6	Map.prototype.values() Returns a new Iterator object that contains an array of [key, value] for each element in the Map object in insertion order.

The for…of Loop

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

Weak Maps

A weak map is identical to a map with the following exceptions −

• 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.
• A weak map cannot be iterated or cleared.

Example : Weak Map

'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

Sets

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.

Set Properties

Sr.No	Property & Description
1	Set.prototype.size Returns the number of values in the Set object.

Set Methods

Sr.No	Method & Description
1	Set.prototype.add(value) Appends a new element with the given value to the Set object. Returns the Set object.
2	Set.prototype.clear() Removes all the elements from the Set object.
3	Set.prototype.delete(value) Removes the element associated to the value.
4	Set.prototype.entries() 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.
5	Set.prototype.forEach(callbackFn[, thisArg]) 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.
6	Set.prototype.has(value) Returns a boolean asserting whether an element is present with the given value in the Set object or not.
7	Set.prototype.values() Returns a new Iterator object that contains the values for each element in the Set object in insertion order.

Weak Set

Weak sets can only contain objects, and the objects they contain may be garbage collected. Like weak maps, weak sets cannot be iterated.

Example: Using a Weak Set

'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

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

Example 1: Set and Iterator

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.

Example 2: Set and Iterator

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 }  

Example 3: Set and Iterator

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 }  

Example 4: Map and Iterator

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 }  

Example 5: Map and Iterator

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} 

Example 6: Map and Iterator

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}