What are Maps and Sets in JavaScript

<ObjectsIf Statements>

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.

let map = new Map([
  ["Apple", 5],
  ["Orange", 6],
  ["Banana", 7],
]);

console.log(map);

Map(3) { 'Apple' => 5, 'Orange' => 6, 'Banana' => 7 }

Or use the set() method.

let map = new Map();

map.set("Apple", 5);
map.set("Orange", 6);
map.set("Banana", 7);

console.log(map);

Map(3) { 'Apple' => 5, 'Orange' => 6, 'Banana' => 7 }

To access a map element, use the get() method.

let map = new Map();

map.set("Apple", 5);
map.set("Orange", 6);
map.set("Banana", 7);

console.log(map.get("Orange"));

6

And because the map keys can be any data type, the following examples refer to different items.

let map = new Map();

map.set("1", "String 1");
map.set(1, "Number 1");

console.log(map.get("1"));
console.log(map.get(1));

String 1
Number 1

Technically, 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.

let map = new Map();

map.set("Apple", 5);
map.set("Orange", 6);
map.set("Banana", 7);

map.delete("Orange");

console.log(map);

Map(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.

let map = new Map();

map.set("Apple", 5);
map.set("Orange", 6);
map.set("Banana", 7);

for (let key of map.keys()) {
  console.log(key);
}

Apple
Orange
Banana

values() allows you to iterate over the map values.

let map = new Map();

map.set("Apple", 5);
map.set("Orange", 6);
map.set("Banana", 7);

for (let value of map.values()) {
  console.log(value);
}

5
6
7

And entries() allows you to iterate over the map elements in key/values pairs.

let map = new Map();

map.set("Apple", 5);
map.set("Orange", 6);
map.set("Banana", 7);

for (let entry of map.entries()) {
  console.log(entry);
}

[ 'Apple', 5 ]
[ 'Orange', 6 ]
[ 'Banana', 7 ]

JavaScript maps also offer a forEach() function that allows you to process each map element with a callback function. For example,

let map = new Map();

map.set("Apple", 5);
map.set("Orange", 6);
map.set("Banana", 7);

map.forEach(myFunction);

function myFunction(value, key, map) {
  console.log("Value: " + value);
  console.log("Key: " + key);
  console.log("Map: " + map);
}

Value: 5
Key: Apple
Map: [object Map]
Value: 6
Key: Orange
Map: [object Map]
Value: 7
Key: Banana
Map: [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.

let map = new Map();

map.set("Apple", 5);
map.set("Orange", 6);
map.set("Banana", 7);

console.log(map.size);

3
  • has()

The has() method checks the existence of an item.

let map = new Map();

map.set("Apple", 5);
map.set("Orange", 6);
map.set("Banana", 7);

console.log(map.has("Orange"));
console.log(map.has("Peach"));

true
false

Sets

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.

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

console.log(set);

Set(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.

let set = new Set();

set.add(1);
set.add(2);
set.add(3);
set.add(4);
set.add(3);
set.add(2);
set.add(1);

console.log(set);

Set(4) { 1, 2, 3, 4 }

The delete() method removes an element from the set.

let set = new Set();

set.add(1);
set.add(2);
set.add(3);
set.add(4);

set.delete(2);

console.log(set);

Set(3) { 1, 3, 4 }

Iterating over a set

To iterate over a set, you can use the for of loop:

let set = new Set(["Apple", "Orange", "Banana"]);

for (let item of set) {
  console.log(item);
}

Apple
Orange
Banana

Or the forEach() method.

let set = new Set(["Apple", "Orange", "Banana"]);

set.forEach(myFunction);

function myFunction(value, alsoValue, set) {
  console.log(value);
  console.log(set);
}

Apple
Set(3) { 'Apple', 'Orange', 'Banana' }
Orange
Set(3) { 'Apple', 'Orange', 'Banana' }
Banana
Set(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.

let set = new Set(["Apple", "Orange", "Banana"]);

console.log(set.size);

3
  • has()

The has() method checks the existence of an item.

let set = new Set(["Apple", "Orange", "Banana"]);

console.log(set.has("Apple"));
console.log(set.has("Peach"));

true
false
<ObjectsIf Statements>