Home » ES6 Map

ES6 Map

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.

Syntax

For creating a new Map, we can use the following syntax:

The Map () accepts an optional iterable object, whose elements are in the key-value pairs.

Map Properties

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.

Map.prototype.size

It returns the number of elements in the Map object.

Syntax

Example

Output

4  

Map Methods

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

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.

Example

Output

WeakMap { <items unknown> }  true  

The for…of loop and Weak Maps

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.

Example

Output

Red  Green  Yellow  Violet    1: Red  2: Green  3: Yellow  4: Violet  

Iterator and Map

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.

Example-1

Output

{ value: 'Red', done: false }  { value: 'Green', done: false }  { value: 'Yellow', done: false }  

Example-2

Output

{ value: [ '1', 'Red' ], done: false }  { value: [ '2', 'Green' ], done: false }  { value: [ '3', 'Yellow' ], done: false }  

Example-3

Output

{ value: '1', done: false }  { value: '2', done: false }  { value: '3', done: false }  

Next TopicES6 Set

You may also like