JavaScript Maps

A Map in JavaScript is a data structure that stores key-value pairs. The key and value can be of any data type, including objects. Maps provide a powerful way to store and retrieve data, making them an essential part of any JavaScript developer's toolkit.

In this tutorial, you will learn how to use JavaScript Maps and how they differ from other data structures like arrays and objects. You will also learn how to create Maps, add, retrieve, and delete elements, and how to use some of the built-in methods available in Maps.

Creating a Map

To create a Map, you can use the new Map() constructor. Here's an example:

1let myMap = new Map();

Initialize Map with key value

You can also initialize a Map with key-value pairs. Here's an example:

1let myMap = new Map([
2  ["name", "William Max"],
3  ["age", 30],
4  ["job", "Developer"]
5]);

In this example, we initialize a Map with three key-value pairs.

Adding Elements to a Map

To add elements to a Map, you can use the set() method. Here's an example:

1let myMap = new Map();
2
3myMap.set("name", "William Max");
4myMap.set("age", 30);
5myMap.set("job", "Developer");

In this example, we use the set() method to add three key-value pairs to the Map.

Retrieving Elements from a Map

To retrieve elements from a Map, you can use the get() method. Here's an example:

1let myMap = new Map([
2  ["name", "William Max"],
3  ["age", 30],
4  ["job", "Developer"]
5]);
6
7console.log(myMap.get("name")); // William Max
8console.log(myMap.get("age")); // 30
9console.log(myMap.get("job")); // Developer

In this example, we use the get() method to retrieve the value of the "name", "age", and "job" keys.

Deleting Elements from a Map

To delete elements from a Map, you can use the delete() method. Here's an example:

1let myMap = new Map([
2  ["name", "William Max"],
3  ["age", 30],
4  ["job", "Developer"]
5]);
6
7myMap.delete("name");
8
9console.log(myMap.get("name")); // undefined

In this example, we use the delete() method to delete the "name" key-value pair from the Map.

Built-in Map Methods

Here are some of the built-in methods available in Maps:

• clear(): This method removes all elements from a Map.

1let myMap = new Map([
2  ["name", "William Max"],
3  ["age", 30],
4  ["job", "Developer"]
5]);
6
7myMap.clear();
8
9console.log(myMap.size); // 0

• size: This property returns the number of elements in a Map.

1let myMap = new Map([
2  ["name", "William Max"],
3  ["age", 30],
4  ["job", "Developer"]
5]);
6
7console.log(myMap.size); // 3

• has(key): This method returns a Boolean value indicating whether a given key exists in the Map.

1let myMap = new Map([
2  ["name", "William Max"],
3  ["age", 30],
4  ["job", "Developer"]
5]);
6
7console.log(myMap.has("name")); // true
8console.log(myMap.has("email")); // false

• keys(): This method returns an iterable object containing all the keys in the Map.

1let myMap = new Map([
2  ["name", "William Max"],
3  ["age", 30],
4  ["job", "Developer"]
5]);
6
7for (let key of myMap.keys()) {
8  console.log(key);
9}
10
11// Output:
12// name
13// age
14// job

• values(): This method returns an iterable object containing all the values in the Map.

1let myMap = new Map([
2  ["name", "William Max"],
3  ["age", 30],
4  ["job", "Developer"]
5]);
6
7for (let value of myMap.values()) {
8  console.log(value);
9}
10
11// Output:
12// William Max
13// 30
14// Developer

• entries(): This method returns an iterable object containing all the key-value pairs in the Map.

1let myMap = new Map([
2  ["name", "William Max"],
3  ["age", 30],
4  ["job", "Developer"]
5]);
6
7for (let entry of myMap.entries()) {
8  console.log(entry);
9}
10
11// Output:
12// ["name", "William Max"]
13// ["age", 30]
14// ["job", "Developer"]