Map in JavaScript. Code examples

Map or map (display, dictionary) represents a data structure where each element has a key and a value. Keys within a map are unique, meaning that only one element can be mapped to a single key. To create a map, the Map object constructor is used:

    const myMap = new Map();

You can also initialize the map with initial values. To do this, an array is passed to the constructor, the elements of which represent arrays of two elements – the first element will act as a key, and the second as values:

    const myMap = new Map([[1, "a"], [2, "b"], [3, "c"]]);
    console.log(myMap);     // Map(3) {1 => "a", 2 => "b", 3 => "c"}

In this case, keys and values do not have to be of the same type:

    const myMap = new Map([["a", 1], [2, "b"], ["c", true]]);
    console.log(myMap);     // Map(3) {"a" => 1, 2 => "b", "c" => true}

The size method allows you to check the number of elements in the map:

    const myMap = new Map([["a", 1], [2, "b"], ["c", true]]);
    console.log(myMap.size);     // 3

The set method is used to add elements:

    const myMap = new Map([[1, "a"], [2, "b"], [3, "c"]]);
    myMap.set(4, "d");      //adding an element
    myMap.set(2, "v");      //element change
    console.log(myMap);     // Map(4) {1 => "a", 2 => "v", 3 => "c", 4 => "d"}

If there are no elements for this key, then a new element is added. If the key already exists, then the existing element changes its value.

The get method is used to get elements. You need to pass the element key to the method:

    const myMap = new Map([[1, "Tom"], [2, "Bob"], [3, "Sam"]]);
    console.log(myMap.get(2));  // Bob
    console.log(myMap.get(7));  // undefined

The delete() method is used to delete a single element by key:

    const myMap = new Map([[1, "Tom"], [2, "Bob"], [3, "Sam"]]);
    myMap.delete(2);
    console.log(myMap);     // Map(2) {1 => "Tom", 3 => "Sam"}

The clear() method is used to remove all elements.

Iterating Map objects

The forEach method is used to iterate over the elements:

    const myMap = new Map([[1, "Tom"], [2, "Bob"], [3, "Sam"]]);

    myMap.forEach(function (value1, value2, map) {
        console.log(value2, value1);//1 Tom 2 Bob 3 Sam
    })

The forEach method takes as a parameter a callback function that has three parameters. The first and second parameters are the value and key of the currently iterated element, respectively, and the third parameter is the Map object iterable.

Also, loops are used to iterate over an object, for example for … of:

    const myMap = new Map([[1, "Tom"], [2, "Bob"], [3, "Sam"]]);

    for (item of myMap) {
        console.log(item[0], item[1]);
    }

Each element from the Map is placed into the item variable, which in turn represents an array. The first element of this array is the key and the second element is the value of the element.

The keys method allows you to select only the keys of an array:

    const myMap = new Map([[1, "Tom"], [2, "Bob"], [3, "Sam"]]);

    for (item of myMap.keys()) {
        console.log(item);
    }

The values method also allows you to iterate over the values of the elements:

    const myMap = new Map([[1, "Tom"], [2, "Bob"], [3, "Sam"]]);

    for (item of myMap.values()) {
        console.log(item);
    }