Use the Set and Map Objects

In JavaScript, in addition to strings and numbers, there are other types called arrays and objects. Many of you have probably used them before. The Set and Map objects provide more convenient functions for arrays and objects.

In this article, we will explain the differences from arrays and objects with code.

Set object

We can say that a Set object is the equivalent of an array (Array).

const set = new Set;
const ary = [];

The biggest difference is that a Set cannot have the same value added to it.

set.add(‘a’);
// => Set(1) {‘a’}
set.add(‘a’);
// => Set(1) {‘a’}

Of course, in the case of arrays, the same values can be added.

ary.push(‘a’);
ary.push(‘a’);
// => [‘a’, ‘a’].

The fact that only unique values can be added may be an advantage in some cases.

The Set object has a set of methods that can be manipulated basically the same way as arrays.

Adding an Element

The add method is used to add elements.

set.add('a');
set.add('b');

Deleting an Element

You can delete an element by specifying a value with the delete method

set.delete(‘a’);

Use the clear method to delete everything and make it empty.

set.clear();

Checking for the existence of a value

Use the has method to check for the existence of a value.

if (set.has('a')) {
    // case with value
} else {
    // case without value
}

Looping with Iteration

Various iterations using for of are available for Set objects. For example, the following object is defined

const set = new Set;
set.add('text');
set.add(100);
set.add(true);
for (let item of set) console.log(item)
// => text
// => 100
// => true

The forEach method is also available.

set.forEach(item => console.log(item));
// => text
// => 100
// => true

Conversion to Array

Array.from is used to convert a Set object to an array.

Array.from(set);
// => ['text', 100, true]

Map object

The Map object will be the equivalent of an object type.

const map = new Map;
const obj = {};

By passing a two-dimensional array when initializing, a Map object can be created that contains the data. The first value in the nested array is the key and the second is the value.

const map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

One of the characteristics of Map is that the keys can be of any type. While object types can only use strings or symbols as keys, Map can also use functions, objects, etc. as keys.

const map = new Map;
const date = new Date;
map.set(date, 10);
map.get(date);
// => 10
function func() {}
map.set(func, 30);
map.get(func);
// => 30

Adding and Retrieving Data

Data can be added using the set and retrieved using the get methods.

const map = new Map;
const date = new Date;
map.set(date, 10);
map.get(date);
// => 10

Deleting Data

Data can be deleted using the delete method.

map.delete(date);

To delete all data, use the clear method.

map.clear();

Get number of data

Map objects have a size property that allows you to get the number of data. For objects, you would have used Object.keys.

map.size;
// => 3

Checking for the Existence of a Key

The has method can be used to check whether a specified key exists.

if (map.has(date)) {
    // the key exists
} else {
    // the key does not exist
}

Loop Processing Using Iteration

Various iterations using for of are available for Map objects. For example, the following object is defined

const map = new Map;
map.set(‘text’, 100);
map.set(10, 200);
map.set(true, 300);

At this time, you can iterate over map. You can get the keys and values in an array. This is the same as the entries method.

for (let [key, item] of map) console.log({key, item})
// => {key: ‘text’, item: 100}
// => {key: 10, item: 200}
// => {key: true, item: 300}

To iterate over keys, use the keys method.

for (let item of map.keys()) console.log(item)
// => ‘text’
// => 10
// => true

Conversely, to use values, use the values method

for (let item of map.values()) console.log(item)
// => 100
// => 200
// => 300

The forEach method can also be used.

map.forEach((item, key) => console.log({key, item}))
// => {key: ‘text’, item: 100}
// => {key: 10, item: 200}
// => {key: true, item: 300}

Conclusion.

The Set object and Map object may not be used very often, as arrays and objects can be substituted in many cases. However, now that forEach and the like are used more often than for statements, there are many situations where it is useful to learn how to use them.