JavaScript Maps

Posted on by Tiffany
JavaScript Maps

Map is one of the important pieces of knowledge when using JavaScript. In this tutorial, we will introduce you to JavaScript Maps in detail. 

What is JS Maps

In JS, Map can be considered as a data structure stored in the form of Key – Value. This may cause some users when learning to confuse Map and Object. However, when distinguished, the object will only accept String or Symbol values as Key. While Map can accept all data types.

How to create JS Maps

Two commonly used ways when you want to create a Map in JS are:

Using new Map(): we will pass new Map() a valid array.

For example:

const cars = new Map([
   ["Chevrolet", 200],
   ["Toyota", 300],
   ["BMW", 300]
]);
or
const students = new Map(); // an empty map

Using Map.set(): Add element values directly to Map via set(). This way you can also change the values in the Map.

For example:

cars.set("Chevrolet", 200);
cars.set("Toyota", 300);
cars.set("BMW", 300);

Commonly used methods in JS Maps

MethodDescription
new Map()creates a Map with an iterable object parameter (optional) with each element of the form [key, value].
set()stores the value by key and returns a map.
get()returns the value by key, if the key does not exist, returns undefined.
delete()deletes the value corresponding to the key and returns true if the key exists, otherwise returns false.
has()returns true if the key exists, false otherwise.
forEach()Use when you want to call a function for a key-value pair in a map.
map.sizeReturns the number of elements in Map

Add element to Map

To add an element to a Map in JavaScript, you can use the set method, with the syntax:

map.set(key, value);

This method assigns a value to the key key inside the Map.

If the key does not exist, Map creates a new element with the corresponding Key. Otherwise, if the key already exists, Map will assign a new value to it.

Get the value of an element in Map

To get the value corresponding to the key of the map in JavaScript, you can use the map.get(key) method as follows:

cars.get("BMW"); // Returns 300

If the key exists in the Map, the map.get(key) method returns the corresponding value, otherwise it returns undefined.

Get the number of elements in Map

To get the number of Map elements in JavaScript, you use the map.size() method, for example:

cars.size; // Return 3
// empty map
const students = new Map();
console.log(students.size);
// 0 - empty array

Check element exists in Map

To check if an element in a Map exists – essentially checking if a key value exists, you can use the has method as follows:

map.has(key);

If there is a key in the Map, the map.has(key) method returns true, otherwise it returns false.

For example:

const cars = new Map([
    ["Chevrolet", 200],
    ["Toyota", 300],
    ["BMW", 300]
]);

cars.has("BMW"); // True
cars.has("Audi"); // False

Delete an element in Map

To delete an element in a Map, you use the delete method:

map.delete(key);

If the Key exists in the Map, the element corresponding to the Key will be removed from the Map. The map.delete(key) method returns true if the key exists, false otherwise.

const cars = new Map([
     ["Chevrolet", 200],
     ["Toyota", 300],
     ["BMW", 300]
]);

// delete element with key "BMW" - exists
cars.delete("BMW"); // true
// after deleting, map does not exist BMW element
cars.has("BMW"); // False

Remove all elements in Map

Above is how to remove an element from a Map. To remove all elements from the Map, you use the clear() method:

const cars = new Map([
     ["Chevrolet", 200],
     ["Toyota", 300],
     ["BMW", 300]
]);

// delete all elements
cars.clear();
// map becomes empty
console.log(cars); // Map(0) {}

Iterate elements in Map

The following are ways to iterate over Map elements in JavaScript.

Using for…of

Map is an iterable object. Therefore, you can use for…of to iterate over the elements of a Map.

const mymap = new Map([
   [5, "x"],
   [4, "y"],
   [3, "z"],
]);

for (const item of mymap) {
   console.log(item);
}
/*
  * [5, "x"]
  * [4, "y"]
  * [3, "z"]
  */

Using the forEach method

You can also use forEach to iterate over the elements of the map as follows:

const mymap = new Map([
   [5, "x"],
   [4, "y"],
   [3, "z"],
]);

mymap.forEach((value, key, map) => {
   console.log(value, key, map);
});
/*
  * x 5 Map(3) {5 => "x", 4 => "y", 3 => "z"}
  * y 4 Map(3) {5 => "x", 4 => "y", 3 => "z"}
  * z 3 Map(3) {5 => "x", 4 => "y", 3 => "z"}
  */

map.keys() method

Returns an iterable object containing the key values of the elements in insertion order.

const mymap = new Map([
    [5, "x"],
    [4, "y"],
    [3, "z"],
]);
for (const key of mymap.keys()) {
   console.log(key);
}
/*
  * 5
  * 4
  * 3
  */

map.values() method

Returns an iterable object containing the values of the elements in insertion order.

const mymap = new Map([
    [5, "x"],
    [4, "y"],
    [3, "z"],
]);
for (const value of mymap.values()) {
   console.log(value);
}
/*
  * x
  * y
  * z
  */

entries() method

Returns an iterable object whose corresponding element is an array [key, value].

const mymap = new Map([
     [5, "x"],
     [4, "y"],
     [3, "z"],
]);
for (const item of mymap.entries()) {
   console.log(item);
}
/*
  * [5, "x"]
  * [4, "y"]
  * [3, "z"]
  */

Convert Map to Array

Here are some ways to convert a map in JavaScript to an array using spread syntax.

Convert Map keys to Array

const mymap = new Map([
      [5, "x"],
      [4, "y"],
      [3, "z"],
]);
const keys = [...mymap.keys()];
console.log(keys);
// [5, 4, 3]

Convert Map values to Array

const mymap = new Map([
      [5, "x"],
      [4, "y"],
      [3, "z"],
]);
const values = [...mymap.values()];
console.log(values);
// ["x", "y", "z"]

Common situations when working with Maps

Summary

In conclusion, we’ve covered each specific method when working with JavaScript Maps. Hope the above article will be useful to you. To learn more about JavaScript you can visit our LearnShareIT website. Thanks for reading!

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *