ES6 introduces two new types of collections, maps and sets

  • A Map is a key-value collection introduced in ES6.
  • A Set is a collection which only holds values

Maps - Creation & Adding Items


Example - Creating a new map and adding objects

//ES6 Maps and Sets - Create a map and add items

// general flow create a map, assign a key in which you can retrieve objects
let cardAce = {
  name : 'Ace of Spades'
};

let cardKing = {
  name : 'King of Clubs'
};


let deck = new Map();    // Create a new Map object
let deckAlt = new Map([['as', cardAce], ['kc', cardKing]]); // Alternative Syntax to create our deck map

deck.set('as', cardAce);  //Set new key/value in our deck map
deck.set('kc', cardKing); //Set new key/value in our deck map

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Maps - Managing Items



//ES6 Maps and Sets - Retrieving and Managing values within the map

let cardAce = {
  name : 'Ace of Spades'
};

let cardKing = {
  name : 'King of Clubs'
};


let deck = new Map();  
deck.set('as', cardAce);  
deck.set('kc', cardKing); 


console.log(deck.size); //access size of map
console.log(deck.get('as')); //get(keyvalue) - retrieves value from map by key
console.log(deck.delete('as')); //delete(keyvalue) - deletes value from map by key
console.log(deck.clear()); //clear() - removes all key/value pairs from the map

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Maps - Looping through Maps


//ES6 Maps and Sets - Looping through maps

let cardAce = {
  name : 'Ace of Spades'
};

let cardKing = {
  name : 'King of Clubs'
};


let deck = new Map();  
deck.set('as', cardAce);  
deck.set('kc', cardKing); 

//Loops through map and returns the keys
for (key of deck.keys()) {
  console.log(key);
}

//Loops through map and returns the values
for (value of deck.values()) {
  console.log(value);
}


//Loops through map and returns the key/value pairs as an array - Method #1
for (entry of deck.entries()) {
  console.log(entry);
}

//Loops through map and returns the key/value pairs as an array - Method #2
for (entry of deck) {
  console.log(entry);
}

//You can also override looping through your map using iterators and next() because it is an array


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

The WeakMap


//ES6 Maps and Sets - The WeakMap

let cardAce = {
  name : 'Ace of Spades'
};

let cardKing = {
  name : 'King of Clubs'
};


// In WeakMap's your key has to be a javascript object
// weakmaps hold 'weak' references meaning it is garbage collected
// therefore keys must be referencesTypes 
// weakmaps identify which objects arent being used anymore and removes them from memory
// looping is not possible, but you can get an object with a key

let keyOne = {a:1};
let keyTwo = {b:2};


let deck = new WeakMap();  
deck.set(keyOne, cardAce);  
deck.set(keyTwo, cardKing); 

// Get object from weakmap by key
console.log(deck.get(keyOne))



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Sets - Creation and Adding Items


Example : Creating a Set

//ES6 Maps and Sets - Creating and adding items;

// Set stores unique values
// each value can only appear once
let set = new Set([1, 1, 1]);

for (element of set) {
  console.log(element);
}

1
2
3
4
5
6
7
8
9
10

Example : Adding to a Set

//ES6 Maps and Sets - Adding items to a set;


let set = new Set([1, 1, 1]);

set.add(2);
set.add(2); // wont be added because set's values must be unique


for (element of set) {
  console.log(element);
}

1
2
3
4
5
6
7
8
9
10
11
12
13

Example : Removing from a set

//ES6 Maps and Sets - Deleting values from a set;


let set = new Set([1, 1, 1]);

set.add(2);

set.delete(1); // Delete from the set by key

set.clear(); //Removes all values from the set


for (element of set) {
  console.log(element);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Example : Checking for something in a set

//ES6 Maps and Sets - Checking for values in a set;

let set = new Set([1, 1, 1]);

set.add(2);

console.log(set.has(1)); //returns boolean if set contains x

for (element of set) {
  console.log(element);
}

1
2
3
4
5
6
7
8
9
10
11
12

Sets - Looping through Sets


//ES6 Maps and Sets - Looping through sets;


let set = new Set([1, 1, 1]);

set.add("aseq");


//Looping through sets with entries(), returns arrays of key/value pairs
for (element of set.entries()) {
  console.log(element);
}



//Looping through sets with values(), returns values in the set
for (element of set.values()) {
  console.log(element);
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Sets - Wrap Up


The WeakSet


The WeakSet can only store Objects Like the WeakMap, the WeakSet cannot be looped through

//ES6 Maps and Sets - The WeakSet;

let obj1 = {a:1};
let obj2 = {b:2};
let set = new WeakSet([obj1, obj2, obj1]);

set.add(obj2); // add to a weakset
set.delete(obj1); // delete from weakset

console.log(set.has(obj2)) // Check if a specific object exists in a set


1
2
3
4
5
6
7
8
9
10
11
12

Resources


Last Updated: 8/13/2019, 6:55:26 PM