ES6 is a series of new features that are added to the JavaScript. Prior to ES6, when we require the mapping of keys and values, we often use an object. It is because the object allows us to map a key to the value of any type.
ES6 provides us a new collection type called Map, which holds the key-value pairs in which values of any type can be used as either keys or values. A Map object always remembers the actual insertion order of the keys. Keys and values in a Map object may be primitive or objects. It returns the new or empty Map.
Maps are ordered, so they traverse the elements in their insertion order.
For creating a new Map, we can use the following syntax:
var map = new Map([iterable]);
The Map () accepts an optional iterable object, whose elements are in the key-value pairs.
| S.no. | Properties | Description |
|---|---|---|
| 1. | Map.prototype.size | This property returns the number of key-value pairs in the Map object. |
Let us understand the above property of Map object in brief.
It returns the number of elements in the Map object.
Map.size
var map = new Map();
map.set('John', 'author');
map.set('arry', 'publisher');
map.set('Mary', 'subscriber');
map.set('James', 'Distributor');
console.log(map.size);The Map object includes several methods, which are tabulated as follows:
| S.no. | Methods | Description |
|---|---|---|
| 1. | Map.prototype.clear() | It removes all the keys and values pairs from the Map object. |
| 2. | Map.prototype.delete(key) | It is used to delete an entry. |
| 3. | Map.prototype.has(value) | It checks whether or not the corresponding key is in the Map object. |
| 4. | Map.prototype.entries() | It is used to return a new iterator object that has an array of key-value pairs for every element in the Map object in insertion order. |
| 5. | Map.prototype.forEach(callbackFn[, thisArg]) | It executes the callback function once, which is executed for each element in the Map. |
| 6. | Map.prototype.keys() | It returns an iterator for all keys in the Map. |
| 7. | Map.prototype.values() | It returns an iterator for every value in the Map. |
Weak Maps are almost similar to normal Maps except that the keys in weak maps must be objects. It stores each element as a key-value pair where keys are weakly referenced. Here, the keys are objects, and the values are arbitrary values. A Weak Map object only allows the keys of an object type. If there is no reference to a key object, then they are targeted to garbage collection. In weak Map, the keys are not enumerable. So, there is no method to get the list of keys.
A weak map object iterates its elements in the insertion order. It only includes delete(key), get(key), has(key) and set(key, value) method.
Let us try to understand the illustration of the weak Map.
'use strict'
let wp = new WeakMap();
let obj = {};
console.log(wp.set(obj,"Welcome to rookienerd"));
console.log(wp.has(obj));The for...of loop is used to perform an iteration over keys, values of the Map object. The following example will illustrate the traversing of the Map object by using a for...of loop.
'use strict'
var colors = new Map([
['1', 'Red'],
['2', 'Green'],
['3', 'Yellow'],
['4', 'Violet']
]);
for (let col of colors.values()) {
console.log(col);
}
console.log(" ")
for(let col of colors.entries())
console.log(`${col[0]}: ${col[1]}`);An iterator is an object, which defines the sequence and a return value upon its termination. It allows accessing a collection of objects one at a time. Set and Map both include the methods that return an iterator.
Iterators are the objects with the next() method. When the next() method gets invoked, the iterator returns an object along with the "value" and "done" properties.
Let us try to understand some of the implementations of iterator along with the Map object.
'use strict' var colors = new Map([ ['1', 'Red'], ['2', 'Green'], ['3', 'Yellow'], ['4', 'Violet'] ]); var itr = colors.values(); console.log(itr.next()); console.log(itr.next()); console.log(itr.next());
'use strict' var colors = new Map([ ['1', 'Red'], ['2', 'Green'], ['3', 'Yellow'], ['4', 'Violet'] ]); var itr = colors.entries(); console.log(itr.next()); console.log(itr.next()); console.log(itr.next());
'use strict' var colors = new Map([ ['1', 'Red'], ['2', 'Green'], ['3', 'Yellow'], ['4', 'Violet'] ]); var itr = colors.keys(); console.log(itr.next()); console.log(itr.next()); console.log(itr.next());
