In this lesson, we introduce two more data structures: maps and sets. They are special variants of objects, just like arrays. Although less used, they might still be very useful in some circumstances.
Maps
Maps are key/value structures just like objects. The only difference is that object keys are either strings or symbols, while maps allow keys of any data types.
Maps can be created in two different ways, either pass an array of keys and values to the Map() constructor function.
1let map = new Map([
2 ["Apple", 5],
3 ["Orange", 6],
4 ["Banana", 7],
5]);
6
7console.log(map);1Map(3) { 'Apple' => 5, 'Orange' => 6, 'Banana' => 7 }Or use the set() method.
1let map = new Map();
2
3map.set("Apple", 5);
4map.set("Orange", 6);
5map.set("Banana", 7);
6
7console.log(map);1Map(3) { 'Apple' => 5, 'Orange' => 6, 'Banana' => 7 }To access a map element, use the get() method.
1let map = new Map();
2
3map.set("Apple", 5);
4map.set("Orange", 6);
5map.set("Banana", 7);
6
7console.log(map.get("Orange"));16And because the map keys can be any data type, the following examples refer to different items.
1let map = new Map();
2
3map.set("1", "String 1");
4map.set(1, "Number 1");
5
6console.log(map.get("1"));
7console.log(map.get(1));1String 1
2Number 1Technically, you can use the square bracket syntax to retrieve map elements as well. But this syntax would be treating maps as plain objects, meaning the keys can only be strings or symbols, and you lose the point of using maps in the first place. So you should always use methods set() and get() when working with maps.
Lastly, you can remove an element using the delete() method.
1let map = new Map();
2
3map.set("Apple", 5);
4map.set("Orange", 6);
5map.set("Banana", 7);
6
7map.delete("Orange");
8
9console.log(map);1Map(2) { 'Apple' => 5, 'Banana' => 7 }Iterating over a map
To iterate over a map, you can use the for of loop. There are three methods that can be useful in this case. keys() allows you to iterate over the maps keys.
1let map = new Map();
2
3map.set("Apple", 5);
4map.set("Orange", 6);
5map.set("Banana", 7);
6
7for (let key of map.keys()) {
8 console.log(key);
9}1Apple
2Orange
3Bananavalues() allows you to iterate over the map values.
1let map = new Map();
2
3map.set("Apple", 5);
4map.set("Orange", 6);
5map.set("Banana", 7);
6
7for (let value of map.values()) {
8 console.log(value);
9}15
26
37And entries() allows you to iterate over the map elements in key/values pairs.
1let map = new Map();
2
3map.set("Apple", 5);
4map.set("Orange", 6);
5map.set("Banana", 7);
6
7for (let entry of map.entries()) {
8 console.log(entry);
9}1[ 'Apple', 5 ]
2[ 'Orange', 6 ]
3[ 'Banana', 7 ]JavaScript maps also offer a forEach() function that allows you to process each map element with a callback function. For example,
1let map = new Map();
2
3map.set("Apple", 5);
4map.set("Orange", 6);
5map.set("Banana", 7);
6
7map.forEach(myFunction);
8
9function myFunction(value, key, map) {
10 console.log("Value: " + value);
11 console.log("Key: " + key);
12 console.log("Map: " + map);
13}1Value: 5
2Key: Apple
3Map: [object Map]
4Value: 6
5Key: Orange
6Map: [object Map]
7Value: 7
8Key: Banana
9Map: [object Map]The function takes three arguments, value, key, and map.
Map methods
Other map-related methods include:
size
size is a property that returns the number of items in the map.
1let map = new Map();
2
3map.set("Apple", 5);
4map.set("Orange", 6);
5map.set("Banana", 7);
6
7console.log(map.size);13has()
The has() method checks the existence of an item.
1let map = new Map();
2
3map.set("Apple", 5);
4map.set("Orange", 6);
5map.set("Banana", 7);
6
7console.log(map.has("Orange"));
8console.log(map.has("Peach"));1true
2falseSets
Set is an array-like data structure. Except that arrays allow repetition of values, while set only allow unique values.
Sets can be created in two different ways. You can either pass an array to Set(). The repeated items in the array will be automatically removed.
1let set = new Set([1, 2, 3, 4, 3, 2, 1]);
2
3console.log(set);1Set(4) { 1, 2, 3, 4 }Alternatively, you can use the add() method to create the set. Adding same value multiple times will have no effect.
1let set = new Set();
2
3set.add(1);
4set.add(2);
5set.add(3);
6set.add(4);
7set.add(3);
8set.add(2);
9set.add(1);
10
11console.log(set);1Set(4) { 1, 2, 3, 4 }The delete() method removes an element from the set.
1let set = new Set();
2
3set.add(1);
4set.add(2);
5set.add(3);
6set.add(4);
7
8set.delete(2);
9
10console.log(set);1Set(3) { 1, 3, 4 }Iterating over a set
To iterate over a set, you can use the for of loop:
1let set = new Set(["Apple", "Orange", "Banana"]);
2
3for (let item of set) {
4 console.log(item);
5}1Apple
2Orange
3BananaOr the forEach() method.
1let set = new Set(["Apple", "Orange", "Banana"]);
2
3set.forEach(myFunction);
4
5function myFunction(value, alsoValue, set) {
6 console.log(value);
7 console.log(set);
8}1Apple
2Set(3) { 'Apple', 'Orange', 'Banana' }
3Orange
4Set(3) { 'Apple', 'Orange', 'Banana' }
5Banana
6Set(3) { 'Apple', 'Orange', 'Banana' }The callback function takes three arguments, two values, and one set. That looks a bit strange, but it is for compatibility with the map, where the forEach() function takes three arguments. Because in some cases, you might need to replace maps in your codebase with sets, and vice versa.
Set methods
Other useful methods for set include:
size
size is a property that returns the number of items in the set.
1let set = new Set(["Apple", "Orange", "Banana"]);
2
3console.log(set.size);13has()
The has() method checks the existence of an item.
1let set = new Set(["Apple", "Orange", "Banana"]);
2
3console.log(set.has("Apple"));
4console.log(set.has("Peach"));1true
2false