Map and Set Objects in ES6

Sunday, July 23rd, 2017

Map is a useful tool in EcmaScript-6. It allows developers to store information using key-value pairs. In EcmaScript-5 the Object Literals also served a similar purpose but there are certain differences between the two which makes Map more efficient to use.

Map (EcmaScript -6)	Object Literal (EcmaScript- 5)
Can return the size of the map via ‘.size()’ method.	The object needs to be manually iterated over to get the overall size.
Can take object, function, string, Symbol and any primitive as keys.	Can only take string and symbol as keys.
Keys will not collide with prototype keys.	Keys might collide with prototype keys.

CRUD Operations

Create:

let user_active_map = new Map();
user_active_map.set('user_01_active', true);

Creating a Map object is very simple. In the sample code the variable 'user_active_map' is set to a new instance of Map. Then information is added to the Map object with key as 'user_01_active' and value as 'true'.

Read:

let user_active_map = new Map();
user_active_map.set('user_01_active', true);
user_active_map.set('user_02_active', true);
user_active_map.set('user_03_active', true);
user_active_map.set('user_04_active', true);
user_active_map.set('user_05_active', false);

console.log(user_active_map.get('user_05_active'));//false

The value can be read from a Map object using '.get(<key>)' method by passing the key as an argument.

Update:

let user_active_map = new Map();
user_active_map.set('user_01_active', false);

Similar to create the update operation can also use '.set(<key>, <value>)' method but then the value for the key will be overwritten.

Delete:

let user_active_map = new Map();
user_active_map.set('user_01_active', true);
user_active_map.set('user_02_active', true);
user_active_map.set('user_03_active', true);
user_active_map.set('user_04_active', true);
user_active_map.set('user_05_active', false);

user_active_map.delete('user_05_active');

console.log(user_active_map.get('user_05_active'));//

Using the '.delete(<key>)' method any value associated with a specific key can be deleted.

WeakMap object shares CRUD methods with Map object such as '.delete(<key>)', '.set(<key>, <value>)' and '.get(<key>, <value>)'. But WeakMap is much more efficient for certain use cases.

The WeakMap can only have object as keys and the keys are weakly referenced to the values. So if the object which is used as the key is destroyed then the entire entry is removed from the WeakMap.

let weak_map = new WeakMap();
let settings = {'volume': 5, 'now_playing':{'video_id': 1, 'video_speed': '1.5'}};

weak_map.set(settings.now_playing,true);

console.log(weak_map.get(settings.now_playing));//true

delete settings.now_playing;

console.log(weak_map.get(settings.now_playing));//undefined

In the sample code above when the WeakMap entry is set with the key as 'settings.now_playing' and value as 'true' it will persist only until the reference to the key is not destroyed. But when the key 'settings.now_playing' is deleted the entry associated with that key is also removed.

The Set object stores collection of unique values of primitive type and object references.

CRUD Operations

Create:

let user_arr = ['John','Peter','Peter','Phil'];
let user_Set = new Set(user_arr );

console.log(user_Set);//Set(3) {"John", "Peter", "Phil"}

To create a new instance of Set object the 'new Set(<Iterable>)' method can be used and in the sample code an array is passed as an argument. Passing an iterable argument loads the data into the Set which only contains unique values from the iterable.

Read:

let user_arr = ['John','Peter','Peter','Phil'];
let user_Set = new Set(user_arr );

for(let value of user_Set.values()){
    console.log(value); 
}
//John
//Peter
//Phil

The values in Set can be read by iterating over the iterable object returned by '.values()' method.

Update:

let user_arr = ['John','Peter','Peter','Phil'];
let user_Set = new Set(user_arr );

    user_Set.add('John');
    user_Set.add('Harry');

console.log(user_Set);//Set(4) {"John", "Peter", "Phil", "Harry"}

The set can be updated with new values using '.add(<value>)' method. Notice that adding duplicate value 'John' is ignored and the resulting 'user_Set' only has unique values.

Delete:

let user_arr = ['John','Peter','Peter','Phil'];
let user_Set = new Set(user_arr );

    user_Set.delete('John');
    user_Set.delete('Harry');

console.log(user_Set);//Set(2) {"Peter", "Phil"}

Using the '.delete(<value>)' method values can be deleted from the Set object.

WeakSet object also shares the same CRUD operations as Set object with the exception to '.values()' method. But the WeakSet differs slightly because the type of values it can take can only be 'object' and those values are weakly referenced.

let weak_Set = new WeakSet();
let settings = {'volume': 5, 'now_playing':{'video_id': 1, 'video_speed': '1.5'}};

    weak_Set.add(settings.now_playing); 

    console.log(weak_Set.has(settings.now_playing));//true

    delete settings.now_playing;

    console.log(weak_Set.has(settings.now_playing));//false

In the sample code above when the reference to 'setting;now_playing' is deleted the value inside 'weak_Set' also gets garbage collected.