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
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
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
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
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
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
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
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
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
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
2
3
4
5
6
7
8
9
10
11
12
Resources
← Throw and Return Maps →