JavaScript 101: Understanding Map and Set Data Types

JavaScript 101: Understanding Map and Set Data Types

In this tutorial, we will explore the basics of these data types and learn how to use them in our code

Table of contents

JavaScript's Map and Set data types are powerful tools that allow developers to store and manipulate data in a more efficient and organized way.

Map

A Map is a collection of key-value pairs where each key is unique. It is similar to an object in JavaScript, but with some added features and benefits.

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

const myMap = new Map();

You can also initialize a Map with key-value pairs by passing an array of arrays to the constructor:

const myMap = new Map([
  ["key1", "value1"],
  ["key2", "value2"],
  ["key3", "value3"]
]);

To add key-value pairs to a Map, you can use the set() method:

myMap.set("key4", "value4");

To retrieve a value from a Map based on its key, you can use the get() method:

console.log(myMap.get("key4")); // "value4"

You can check if a key exists in a Map by using the has() method:

console.log(myMap.has("key4")); // true
console.log(myMap.has("key5")); //false

You can remove a key-value pair from a Map by using the delete() method:

myMap.delete("key4");
console.log(myMap.has("key4")); // false

You can loop through the key-value pairs of a Map using the forEach() method:

myMap.forEach((value, key) => {
  console.log(key + ": " + value);
});

Set

A Set is a collection of unique values. It is similar to an array in JavaScript, but with some added features and benefits.

To create a new Set, you can use the new keyword followed by the Set() constructor:

const mySet = new Set();

You can also initialize a Set with values by passing an array to the constructor:

const mySet = new Set(["value1", "value2", "value3"]);

const array = ["value1", "value2", "value3"]

To add values to a Set, you can use the add() method:

mySet.add("value4");

To check if a value exists in a Set, you can use the has() method:

console.log(mySet.has("value4")); // true

You can remove a value from a Set by using the delete() method:

mySet.delete("value4");
console.log(mySet.has("value4")); // false

You can loop through the values of a Set using the forEach() method:

mySet.forEach(value => {
  console.log(value);
});
// value1
// value2
// value3
// value4

You can also use the for...of loop to iterate through the values of a Set:

for (let value of mySet) {
  console.log(value);
}
// value1
// value2
// value3
// value4

It's worth noting that Sets are not indexed-based and do not have a key-value pair like Maps.

In conclusion, Map and Set are powerful data types in JavaScript that can be useful in various scenarios, such as storing unique values or key-value pairs. They are also highly efficient and easy to use, making them a valuable addition to any developer's toolbox.

I'd love to connect with you via Twitter & LinkedIn

Happy hacking!