JavaScript Map And Set

This tutorial is about JavaScript Map and Set, which are two of the newest additions to the JavaScript language. Map and Set are powerful data structures that allow you to store and manipulate data in an efficient and organized way. In this tutorial, we will discuss the differences between Map and Set and how to use them in your code.

Why should you use it?

Map and Set are more efficient than regular JavaScript objects.
Map and Set allow you to store and manipulate data in an organized way.
Map and Set provide an easy way to iterate over data.

Map

The JavaScript Map object is a simple key/value data structure. It is used to store data in a structure similar to an array, but where each element is associated with a key rather than an index. This allows for quick insertion, retrieval, and deletion of data from the map.

To create a Map, you can use the new Map() constructor:

script.js

const map = new Map();

You can also pass an array of key/value pairs to the constructor to initialize the map:

script.js

const map = new Map([
  ['name', 'John Doe'],
  ['age', 30],
]);

Once you have created a Map, you can access its elements by using the get() method. This method takes a key as an argument and returns the associated value:

script.js

const map = new Map([
  ['name', 'John Doe'],
  ['age', 30],
]);

const name = map.get('name');
console.log(name); // 'John Doe'

You can also use the set() method to add new elements to the map. This method takes two arguments: a key and a value. If the key already exists in the map, its value will be updated:

script.js

const map = new Map([
  ['name', 'John Doe'],
  ['age', 30],
]);

map.set('name', 'Jane Doe');

const name = map.get('name');
console.log(name); // 'Jane Doe'

You can also use the has() method to check if a key exists in the map. This method takes a key as an argument and returns true if the key exists, or false if it does not:

script.js

const map = new Map([
  ['name', 'John Doe'],
  ['age', 30],
]);

const hasName = map.has('name');
console.log(hasName); // true

Finally, you can use the delete() method to remove an element from the map. This method takes a key as an argument and returns true if the element was successfully removed, or false if it did not exist:

script.js

const map = new Map([
  ['name', 'John Doe'],
  ['age', 30],
]);

const deleted = map.delete('name');
console.log(deleted); // true

To learn more about map, visit Map.

Set

A Set is a collection of unique values, which can be of any type. It is an object that holds key-value pairs and remembers the original insertion order of the keys. It can be iterated over, and you can add/remove elements from it. The Set object is a powerful addition to the JavaScript language and can be very useful in a variety of situations.

To create a Set, you can use the new Set() constructor. To add an element to the Set, use the add() method. To remove an element from the Set, use the delete() method. The has() method can be used to check if an element is present in the Set.

The following example shows how to create a Set and add/remove elements from it:

script.js

let mySet = new Set();

// add elements to the set
mySet.add('foo');
mySet.add('bar');

// remove elements from the set
mySet.delete('foo');

// check if an element is present in the set
console.log(mySet.has('bar')); // true

The forEach() method can be used to iterate over the elements of a Set. The following example shows how to use the forEach() method to iterate over the elements of a Set:

script.js

let mySet = new Set();

mySet.add('foo');
mySet.add('bar');

// iterate over the elements of the set
mySet.forEach(function(element) {
  console.log(element);
});
// foo
// bar

The size property can be used to get the size of the Set. The following example shows how to use the size property to get the size of a Set:

script.js

let mySet = new Set();

mySet.add('foo');
mySet.add('bar');

// get the size of the set
console.log(mySet.size); // 2

To learn more about set, visit Set.