Questions tagged [es6-map]

Syntax

To create a map:

const myMap = new Map();  //Map(0) 

This will create a new empty map object. The Map() constructor takes one optional parameter. For example, it can take an array of key/value pairs:

const myArr = [[1, 'one'], [2, 'two']];
const myMap = new Map(myArr);  //Map(2) {1 => "one", 2 => "two"}

This creates a map object with key 1 with a value of 'one' and key 2 with a value of 'two'. This is also possible with an iterable object:

const myIt = {
*[Symbol.iterator]() {
    yield [1, 'one'];
    yield [2, 'two'];
}};
const myMap = new Map(myIt); //Map(2) {1 => "one", 2 => "two"}

Again, this creates a map with the same structure as the last example.

Note that any value, from primitives to objects, can be used as either a key or a value. This includes NaN (Not a Number):

const myArr = [[NaN, 'one']];
const myMap = new Map(myArr);  //Map(1) {NaN => "one"}

This creates a map with a key of NaN with the value of "one". Even though NaNs are indistinguishable from each other, you cannot use them for multiple keys:

const myArr = [[NaN, 'one'], [NaN, 'two']];
const myMap = new Map(myArr);  //Map(1) {NaN => "two"}

This will only create one key of NaN where the last value associated with NaN will be in the map.

There are also getters and setters for the Map Object:

const myMap = new Map();  //Map(0)
myMap.set(1, "one");    //Map(1) {1 => "one"}
myMap.set(2, "two");    //Map(2) {1 => "one", 2 => "two"}
myMap.get(1);           //one
myMap.get(2);           //two

You can also create a map with mixed keys:

const myMap = new Map();
myMap.set(1, "one");
myMap.set("two", 2);
myMap.set(function () { return 3; }, "three")

This will create a map with a key of integer 1 with string value "one", a key of string "two" with an integer value of 2, and a key of an anonymous function with a string value of "three". However, while this works with setting, getting the last key will be impossible unless you define it outside the map first:

const myFunc = function () { };
const myMap = new Map();
myMap.set(1, "one");
myMap.set("two", 2);
myMap.set(myFunc, "three")
myMap.get(myFunc);    // three

To iterate through the map, you can use destructuring with the for...of loop:

for (var [key, value] of myMap) {
    console.log(key + ' = ' + value);
}

Or the forEach loop can be used as well:

myMap.forEach(function(value, key) {
    console.log(key + ' = ' + value);
});

Both examples will output the keys along with their values.

Reference

developer.mozilla.org