How to iterate map inside map in JavaScript?

Map is a collection of keyed data items, just like an

let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
5. But the main difference is that
let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
3 allows keys of any type.

Methods and properties are:

  • let john = { name: "John" };
    
    // for every user, let's store their visits count
    let visitsCountMap = new Map();
    
    // john is the key for the map
    visitsCountMap.set(john, 123);
    
    alert( visitsCountMap.get(john) ); // 123
    7 – creates the map.
  • let john = { name: "John" };
    
    // for every user, let's store their visits count
    let visitsCountMap = new Map();
    
    // john is the key for the map
    visitsCountMap.set(john, 123);
    
    alert( visitsCountMap.get(john) ); // 123
    8 – stores the value by the key.
  • let john = { name: "John" };
    
    // for every user, let's store their visits count
    let visitsCountMap = new Map();
    
    // john is the key for the map
    visitsCountMap.set(john, 123);
    
    alert( visitsCountMap.get(john) ); // 123
    9 – returns the value by the key,
    let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    0 if
    let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    1 doesn’t exist in map.
  • let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    2 – returns
    let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    3 if the
    let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    1 exists,
    let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    5 otherwise.
  • let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    6 – removes the element (the key/value pair) by the key.
  • let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    7 – removes everything from the map.
  • let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    8 – returns the current element count.

For instance:

let map = new Map();

map.set('1', 'str1');   // a string key
map.set(1, 'num1');     // a numeric key
map.set(true, 'bool1'); // a boolean key

// remember the regular Object? it would convert keys to string
// Map keeps the type, so these two are different:
alert( map.get(1)   ); // 'num1'
alert( map.get('1') ); // 'str1'

alert( map.size ); // 3

As we can see, unlike objects, keys are not converted to strings. Any type of key is possible.

let john = { name: "John" };
let ben = { name: "Ben" };

let visitsCountObj = {}; // try to use an object

visitsCountObj[ben] = 234; // try to use ben object as the key
visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced

// That's what got written!
alert( visitsCountObj["[object Object]"] ); // 123
9 isn’t the right way to use a
let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
3

Although

let john = { name: "John" };
let ben = { name: "Ben" };

let visitsCountObj = {}; // try to use an object

visitsCountObj[ben] = 234; // try to use ben object as the key
visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced

// That's what got written!
alert( visitsCountObj["[object Object]"] ); // 123
9 also works, e.g. we can set
map.set('1', 'str1')
  .set(1, 'num1')
  .set(true, 'bool1');
2, this is treating
map.set('1', 'str1')
  .set(1, 'num1')
  .set(true, 'bool1');
3 as a plain JavaScript object, so it implies all corresponding limitations (only string/symbol keys and so on).

So we should use

map.set('1', 'str1')
  .set(1, 'num1')
  .set(true, 'bool1');
3 methods:
map.set('1', 'str1')
  .set(1, 'num1')
  .set(true, 'bool1');
5,
map.set('1', 'str1')
  .set(1, 'num1')
  .set(true, 'bool1');
6 and so on.

Map can also use objects as keys.

For instance:

let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123

Using objects as keys is one of the most notable and important

let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
3 features. The same does not count for
let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
5. String as a key in
let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
5 is fine, but we can’t use another
let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
5 as a key in
let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
5.

Let’s try:

let john = { name: "John" };
let ben = { name: "Ben" };

let visitsCountObj = {}; // try to use an object

visitsCountObj[ben] = 234; // try to use ben object as the key
visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced

// That's what got written!
alert( visitsCountObj["[object Object]"] ); // 123

As

let recipeMap = new Map([
  ['cucumber', 500],
  ['tomatoes', 350],
  ['onion',    50]
]);

// iterate over keys (vegetables)
for (let vegetable of recipeMap.keys()) {
  alert(vegetable); // cucumber, tomatoes, onion
}

// iterate over values (amounts)
for (let amount of recipeMap.values()) {
  alert(amount); // 500, 350, 50
}

// iterate over [key, value] entries
for (let entry of recipeMap) { // the same as of recipeMap.entries()
  alert(entry); // cucumber,500 (and so on)
}
2 is an object, it converts all
let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
5 keys, such as
let recipeMap = new Map([
  ['cucumber', 500],
  ['tomatoes', 350],
  ['onion',    50]
]);

// iterate over keys (vegetables)
for (let vegetable of recipeMap.keys()) {
  alert(vegetable); // cucumber, tomatoes, onion
}

// iterate over values (amounts)
for (let amount of recipeMap.values()) {
  alert(amount); // 500, 350, 50
}

// iterate over [key, value] entries
for (let entry of recipeMap) { // the same as of recipeMap.entries()
  alert(entry); // cucumber,500 (and so on)
}
4 and
let recipeMap = new Map([
  ['cucumber', 500],
  ['tomatoes', 350],
  ['onion',    50]
]);

// iterate over keys (vegetables)
for (let vegetable of recipeMap.keys()) {
  alert(vegetable); // cucumber, tomatoes, onion
}

// iterate over values (amounts)
for (let amount of recipeMap.values()) {
  alert(amount); // 500, 350, 50
}

// iterate over [key, value] entries
for (let entry of recipeMap) { // the same as of recipeMap.entries()
  alert(entry); // cucumber,500 (and so on)
}
5 above, to same string
let recipeMap = new Map([
  ['cucumber', 500],
  ['tomatoes', 350],
  ['onion',    50]
]);

// iterate over keys (vegetables)
for (let vegetable of recipeMap.keys()) {
  alert(vegetable); // cucumber, tomatoes, onion
}

// iterate over values (amounts)
for (let amount of recipeMap.values()) {
  alert(amount); // 500, 350, 50
}

// iterate over [key, value] entries
for (let entry of recipeMap) { // the same as of recipeMap.entries()
  alert(entry); // cucumber,500 (and so on)
}
6. Definitely not what we want.

How

let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
3 compares keys

To test keys for equivalence,

let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
3 uses the algorithm . It is roughly the same as strict equality
let recipeMap = new Map([
  ['cucumber', 500],
  ['tomatoes', 350],
  ['onion',    50]
]);

// iterate over keys (vegetables)
for (let vegetable of recipeMap.keys()) {
  alert(vegetable); // cucumber, tomatoes, onion
}

// iterate over values (amounts)
for (let amount of recipeMap.values()) {
  alert(amount); // 500, 350, 50
}

// iterate over [key, value] entries
for (let entry of recipeMap) { // the same as of recipeMap.entries()
  alert(entry); // cucumber,500 (and so on)
}
9, but the difference is that
// runs the function for each (key, value) pair
recipeMap.forEach( (value, key, map) => {
  alert(`${key}: ${value}`); // cucumber: 500 etc
});
0 is considered equal to
// runs the function for each (key, value) pair
recipeMap.forEach( (value, key, map) => {
  alert(`${key}: ${value}`); // cucumber: 500 etc
});
0. So
// runs the function for each (key, value) pair
recipeMap.forEach( (value, key, map) => {
  alert(`${key}: ${value}`); // cucumber: 500 etc
});
0 can be used as the key as well.

This algorithm can’t be changed or customized.

Chaining

Every

// runs the function for each (key, value) pair
recipeMap.forEach( (value, key, map) => {
  alert(`${key}: ${value}`); // cucumber: 500 etc
});
3 call returns the map itself, so we can “chain” the calls:

map.set('1', 'str1')
  .set(1, 'num1')
  .set(true, 'bool1');

For looping over a

map.set('1', 'str1')
  .set(1, 'num1')
  .set(true, 'bool1');
3, there are 3 methods:

  • // runs the function for each (key, value) pair
    recipeMap.forEach( (value, key, map) => {
      alert(`${key}: ${value}`); // cucumber: 500 etc
    });
    5 – returns an iterable for keys,
  • // runs the function for each (key, value) pair
    recipeMap.forEach( (value, key, map) => {
      alert(`${key}: ${value}`); // cucumber: 500 etc
    });
    6 – returns an iterable for values,
  • // runs the function for each (key, value) pair
    recipeMap.forEach( (value, key, map) => {
      alert(`${key}: ${value}`); // cucumber: 500 etc
    });
    7 – returns an iterable for entries
    // runs the function for each (key, value) pair
    recipeMap.forEach( (value, key, map) => {
      alert(`${key}: ${value}`); // cucumber: 500 etc
    });
    8, it’s used by default in
    // runs the function for each (key, value) pair
    recipeMap.forEach( (value, key, map) => {
      alert(`${key}: ${value}`); // cucumber: 500 etc
    });
    9.

For instance:

let recipeMap = new Map([
  ['cucumber', 500],
  ['tomatoes', 350],
  ['onion',    50]
]);

// iterate over keys (vegetables)
for (let vegetable of recipeMap.keys()) {
  alert(vegetable); // cucumber, tomatoes, onion
}

// iterate over values (amounts)
for (let amount of recipeMap.values()) {
  alert(amount); // 500, 350, 50
}

// iterate over [key, value] entries
for (let entry of recipeMap) { // the same as of recipeMap.entries()
  alert(entry); // cucumber,500 (and so on)
}

The insertion order is used

The iteration goes in the same order as the values were inserted.

let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
3 preserves this order, unlike a regular
let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
5.

Besides that,

let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
3 has a built-in
// array of [key, value] pairs
let map = new Map([
  ['1',  'str1'],
  [1,    'num1'],
  [true, 'bool1']
]);

alert( map.get('1') ); // str1
3 method, similar to
// array of [key, value] pairs
let map = new Map([
  ['1',  'str1'],
  [1,    'num1'],
  [true, 'bool1']
]);

alert( map.get('1') ); // str1
4:

// runs the function for each (key, value) pair
recipeMap.forEach( (value, key, map) => {
  alert(`${key}: ${value}`); // cucumber: 500 etc
});

When a

let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
3 is created, we can pass an array (or another iterable) with key/value pairs for initialization, like this:

// array of [key, value] pairs
let map = new Map([
  ['1',  'str1'],
  [1,    'num1'],
  [true, 'bool1']
]);

alert( map.get('1') ); // str1

If we have a plain object, and we’d like to create a

let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
3 from it, then we can use built-in method Object.entries(obj) that returns an array of key/value pairs for an object exactly in that format.

So we can create a map from an object like this:

let obj = {
  name: "John",
  age: 30
};

let map = new Map(Object.entries(obj));

alert( map.get('name') ); // John

Here,

// array of [key, value] pairs
let map = new Map([
  ['1',  'str1'],
  [1,    'num1'],
  [true, 'bool1']
]);

alert( map.get('1') ); // str1
7 returns the array of key/value pairs:
// array of [key, value] pairs
let map = new Map([
  ['1',  'str1'],
  [1,    'num1'],
  [true, 'bool1']
]);

alert( map.get('1') ); // str1
8. That’s what
let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
3 needs.

We’ve just seen how to create

let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
3 from a plain object with
let obj = {
  name: "John",
  age: 30
};

let map = new Map(Object.entries(obj));

alert( map.get('name') ); // John
1.

There’s

let obj = {
  name: "John",
  age: 30
};

let map = new Map(Object.entries(obj));

alert( map.get('name') ); // John
2 method that does the reverse: given an array of
// runs the function for each (key, value) pair
recipeMap.forEach( (value, key, map) => {
  alert(`${key}: ${value}`); // cucumber: 500 etc
});
8 pairs, it creates an object from them:

let prices = Object.fromEntries([
  ['banana', 1],
  ['orange', 2],
  ['meat', 4]
]);

// now prices = { banana: 1, orange: 2, meat: 4 }

alert(prices.orange); // 2

We can use

let obj = {
  name: "John",
  age: 30
};

let map = new Map(Object.entries(obj));

alert( map.get('name') ); // John
2 to get a plain object from
let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
3.

E.g. we store the data in a

let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
3, but we need to pass it to a 3rd-party code that expects a plain object.

Here we go:

let map = new Map();
map.set('banana', 1);
map.set('orange', 2);
map.set('meat', 4);

let obj = Object.fromEntries(map.entries()); // make a plain object (*)

// done!
// obj = { banana: 1, orange: 2, meat: 4 }

alert(obj.orange); // 2

A call to

// runs the function for each (key, value) pair
recipeMap.forEach( (value, key, map) => {
  alert(`${key}: ${value}`); // cucumber: 500 etc
});
7 returns an iterable of key/value pairs, exactly in the right format for
let obj = {
  name: "John",
  age: 30
};

let map = new Map(Object.entries(obj));

alert( map.get('name') ); // John
2.

We could also make line

let obj = {
  name: "John",
  age: 30
};

let map = new Map(Object.entries(obj));

alert( map.get('name') ); // John
9 shorter:

let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
0

That’s the same, because

let obj = {
  name: "John",
  age: 30
};

let map = new Map(Object.entries(obj));

alert( map.get('name') ); // John
2 expects an iterable object as the argument. Not necessarily an array. And the standard iteration for
map.set('1', 'str1')
  .set(1, 'num1')
  .set(true, 'bool1');
3 returns same key/value pairs as
// runs the function for each (key, value) pair
recipeMap.forEach( (value, key, map) => {
  alert(`${key}: ${value}`); // cucumber: 500 etc
});
7. So we get a plain object with same key/values as the
map.set('1', 'str1')
  .set(1, 'num1')
  .set(true, 'bool1');
3.

A

let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
4 is a special type collection – “set of values” (without keys), where each value may occur only once.

Its main methods are:

  • let prices = Object.fromEntries([
      ['banana', 1],
      ['orange', 2],
      ['meat', 4]
    ]);
    
    // now prices = { banana: 1, orange: 2, meat: 4 }
    
    alert(prices.orange); // 2
    5 – creates the set, and if an
    let prices = Object.fromEntries([
      ['banana', 1],
      ['orange', 2],
      ['meat', 4]
    ]);
    
    // now prices = { banana: 1, orange: 2, meat: 4 }
    
    alert(prices.orange); // 2
    6 object is provided (usually an array), copies values from it into the set.
  • let prices = Object.fromEntries([
      ['banana', 1],
      ['orange', 2],
      ['meat', 4]
    ]);
    
    // now prices = { banana: 1, orange: 2, meat: 4 }
    
    alert(prices.orange); // 2
    7 – adds a value, returns the set itself.
  • let prices = Object.fromEntries([
      ['banana', 1],
      ['orange', 2],
      ['meat', 4]
    ]);
    
    // now prices = { banana: 1, orange: 2, meat: 4 }
    
    alert(prices.orange); // 2
    8 – removes the value, returns
    let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    3 if
    let map = new Map();
    map.set('banana', 1);
    map.set('orange', 2);
    map.set('meat', 4);
    
    let obj = Object.fromEntries(map.entries()); // make a plain object (*)
    
    // done!
    // obj = { banana: 1, orange: 2, meat: 4 }
    
    alert(obj.orange); // 2
    0 existed at the moment of the call, otherwise
    let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    5.
  • let map = new Map();
    map.set('banana', 1);
    map.set('orange', 2);
    map.set('meat', 4);
    
    let obj = Object.fromEntries(map.entries()); // make a plain object (*)
    
    // done!
    // obj = { banana: 1, orange: 2, meat: 4 }
    
    alert(obj.orange); // 2
    2 – returns
    let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    3 if the value exists in the set, otherwise
    let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    5.
  • let map = new Map();
    map.set('banana', 1);
    map.set('orange', 2);
    map.set('meat', 4);
    
    let obj = Object.fromEntries(map.entries()); // make a plain object (*)
    
    // done!
    // obj = { banana: 1, orange: 2, meat: 4 }
    
    alert(obj.orange); // 2
    5 – removes everything from the set.
  • let map = new Map();
    map.set('banana', 1);
    map.set('orange', 2);
    map.set('meat', 4);
    
    let obj = Object.fromEntries(map.entries()); // make a plain object (*)
    
    // done!
    // obj = { banana: 1, orange: 2, meat: 4 }
    
    alert(obj.orange); // 2
    6 – is the elements count.

The main feature is that repeated calls of

let prices = Object.fromEntries([
  ['banana', 1],
  ['orange', 2],
  ['meat', 4]
]);

// now prices = { banana: 1, orange: 2, meat: 4 }

alert(prices.orange); // 2
7 with the same value don’t do anything. That’s the reason why each value appears in a
let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
4 only once.

For example, we have visitors coming, and we’d like to remember everyone. But repeated visits should not lead to duplicates. A visitor must be “counted” only once.

let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
4 is just the right thing for that:

let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
1

The alternative to

let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
4 could be an array of users, and the code to check for duplicates on every insertion using arr.find. But the performance would be much worse, because this method walks through the whole array checking every element.
let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
4 is much better optimized internally for uniqueness checks.

We can loop over a set either with

// runs the function for each (key, value) pair
recipeMap.forEach( (value, key, map) => {
  alert(`${key}: ${value}`); // cucumber: 500 etc
});
9 or using
// array of [key, value] pairs
let map = new Map([
  ['1',  'str1'],
  [1,    'num1'],
  [true, 'bool1']
]);

alert( map.get('1') ); // str1
3:

let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
2

Note the funny thing. The callback function passed in

// array of [key, value] pairs
let map = new Map([
  ['1',  'str1'],
  [1,    'num1'],
  [true, 'bool1']
]);

alert( map.get('1') ); // str1
3 has 3 arguments: a
let map = new Map();
map.set('banana', 1);
map.set('orange', 2);
map.set('meat', 4);

let obj = Object.fromEntries(map.entries()); // make a plain object (*)

// done!
// obj = { banana: 1, orange: 2, meat: 4 }

alert(obj.orange); // 2
0, then the same value
let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
06, and then the target object. Indeed, the same value appears in the arguments twice.

That’s for compatibility with

let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
3 where the callback passed
// array of [key, value] pairs
let map = new Map([
  ['1',  'str1'],
  [1,    'num1'],
  [true, 'bool1']
]);

alert( map.get('1') ); // str1
3 has three arguments. Looks a bit strange, for sure. But this may help to replace
let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
3 with
let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
4 in certain cases with ease, and vice versa.

The same methods

let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
3 has for iterators are also supported:

  • let john = { name: "John" };
    
    // for every user, let's store their visits count
    let visitsCountMap = new Map();
    
    // john is the key for the map
    visitsCountMap.set(john, 123);
    
    alert( visitsCountMap.get(john) ); // 123
    12 – returns an iterable object for values,
  • let john = { name: "John" };
    
    // for every user, let's store their visits count
    let visitsCountMap = new Map();
    
    // john is the key for the map
    visitsCountMap.set(john, 123);
    
    alert( visitsCountMap.get(john) ); // 123
    13 – same as
    let john = { name: "John" };
    
    // for every user, let's store their visits count
    let visitsCountMap = new Map();
    
    // john is the key for the map
    visitsCountMap.set(john, 123);
    
    alert( visitsCountMap.get(john) ); // 123
    12, for compatibility with
    let john = { name: "John" };
    
    // for every user, let's store their visits count
    let visitsCountMap = new Map();
    
    // john is the key for the map
    visitsCountMap.set(john, 123);
    
    alert( visitsCountMap.get(john) ); // 123
    3,
  • let john = { name: "John" };
    
    // for every user, let's store their visits count
    let visitsCountMap = new Map();
    
    // john is the key for the map
    visitsCountMap.set(john, 123);
    
    alert( visitsCountMap.get(john) ); // 123
    16 – returns an iterable object for entries
    let john = { name: "John" };
    
    // for every user, let's store their visits count
    let visitsCountMap = new Map();
    
    // john is the key for the map
    visitsCountMap.set(john, 123);
    
    alert( visitsCountMap.get(john) ); // 123
    17, exists for compatibility with
    let john = { name: "John" };
    
    // for every user, let's store their visits count
    let visitsCountMap = new Map();
    
    // john is the key for the map
    visitsCountMap.set(john, 123);
    
    alert( visitsCountMap.get(john) ); // 123
    3.

let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
3 – is a collection of keyed values.

Methods and properties:

  • let john = { name: "John" };
    
    // for every user, let's store their visits count
    let visitsCountMap = new Map();
    
    // john is the key for the map
    visitsCountMap.set(john, 123);
    
    alert( visitsCountMap.get(john) ); // 123
    20 – creates the map, with optional
    let prices = Object.fromEntries([
      ['banana', 1],
      ['orange', 2],
      ['meat', 4]
    ]);
    
    // now prices = { banana: 1, orange: 2, meat: 4 }
    
    alert(prices.orange); // 2
    6 (e.g. array) of
    let john = { name: "John" };
    
    // for every user, let's store their visits count
    let visitsCountMap = new Map();
    
    // john is the key for the map
    visitsCountMap.set(john, 123);
    
    alert( visitsCountMap.get(john) ); // 123
    22 pairs for initialization.
  • let john = { name: "John" };
    
    // for every user, let's store their visits count
    let visitsCountMap = new Map();
    
    // john is the key for the map
    visitsCountMap.set(john, 123);
    
    alert( visitsCountMap.get(john) ); // 123
    8 – stores the value by the key, returns the map itself.
  • let john = { name: "John" };
    
    // for every user, let's store their visits count
    let visitsCountMap = new Map();
    
    // john is the key for the map
    visitsCountMap.set(john, 123);
    
    alert( visitsCountMap.get(john) ); // 123
    9 – returns the value by the key,
    let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    0 if
    let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    1 doesn’t exist in map.
  • let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    2 – returns
    let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    3 if the
    let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    1 exists,
    let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    5 otherwise.
  • let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    6 – removes the element by the key, returns
    let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    3 if
    let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    1 existed at the moment of the call, otherwise
    let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    5.
  • let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    7 – removes everything from the map.
  • let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    8 – returns the current element count.

The differences from a regular

let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
5:

  • Any keys, objects can be keys.
  • Additional convenient methods, the
    let john = { name: "John" };
    
    // for every user, let's store their visits count
    let visitsCountMap = new Map();
    
    // john is the key for the map
    visitsCountMap.set(john, 123);
    
    alert( visitsCountMap.get(john) ); // 123
    38 property.

let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
4 – is a collection of unique values.

Methods and properties:

  • let prices = Object.fromEntries([
      ['banana', 1],
      ['orange', 2],
      ['meat', 4]
    ]);
    
    // now prices = { banana: 1, orange: 2, meat: 4 }
    
    alert(prices.orange); // 2
    5 – creates the set, with optional
    let prices = Object.fromEntries([
      ['banana', 1],
      ['orange', 2],
      ['meat', 4]
    ]);
    
    // now prices = { banana: 1, orange: 2, meat: 4 }
    
    alert(prices.orange); // 2
    6 (e.g. array) of values for initialization.
  • let prices = Object.fromEntries([
      ['banana', 1],
      ['orange', 2],
      ['meat', 4]
    ]);
    
    // now prices = { banana: 1, orange: 2, meat: 4 }
    
    alert(prices.orange); // 2
    7 – adds a value (does nothing if
    let map = new Map();
    map.set('banana', 1);
    map.set('orange', 2);
    map.set('meat', 4);
    
    let obj = Object.fromEntries(map.entries()); // make a plain object (*)
    
    // done!
    // obj = { banana: 1, orange: 2, meat: 4 }
    
    alert(obj.orange); // 2
    0 exists), returns the set itself.
  • let prices = Object.fromEntries([
      ['banana', 1],
      ['orange', 2],
      ['meat', 4]
    ]);
    
    // now prices = { banana: 1, orange: 2, meat: 4 }
    
    alert(prices.orange); // 2
    8 – removes the value, returns
    let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    3 if
    let map = new Map();
    map.set('banana', 1);
    map.set('orange', 2);
    map.set('meat', 4);
    
    let obj = Object.fromEntries(map.entries()); // make a plain object (*)
    
    // done!
    // obj = { banana: 1, orange: 2, meat: 4 }
    
    alert(obj.orange); // 2
    0 existed at the moment of the call, otherwise
    let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    5.
  • let map = new Map();
    map.set('banana', 1);
    map.set('orange', 2);
    map.set('meat', 4);
    
    let obj = Object.fromEntries(map.entries()); // make a plain object (*)
    
    // done!
    // obj = { banana: 1, orange: 2, meat: 4 }
    
    alert(obj.orange); // 2
    2 – returns
    let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    3 if the value exists in the set, otherwise
    let john = { name: "John" };
    let ben = { name: "Ben" };
    
    let visitsCountObj = {}; // try to use an object
    
    visitsCountObj[ben] = 234; // try to use ben object as the key
    visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced
    
    // That's what got written!
    alert( visitsCountObj["[object Object]"] ); // 123
    5.
  • let map = new Map();
    map.set('banana', 1);
    map.set('orange', 2);
    map.set('meat', 4);
    
    let obj = Object.fromEntries(map.entries()); // make a plain object (*)
    
    // done!
    // obj = { banana: 1, orange: 2, meat: 4 }
    
    alert(obj.orange); // 2
    5 – removes everything from the set.
  • let map = new Map();
    map.set('banana', 1);
    map.set('orange', 2);
    map.set('meat', 4);
    
    let obj = Object.fromEntries(map.entries()); // make a plain object (*)
    
    // done!
    // obj = { banana: 1, orange: 2, meat: 4 }
    
    alert(obj.orange); // 2
    6 – is the elements count.

Iteration over

let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
3 and
let john = { name: "John" };

// for every user, let's store their visits count
let visitsCountMap = new Map();

// john is the key for the map
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123
4 is always in the insertion order, so we can’t say that these collections are unordered, but we can’t reorder elements or directly get an element by its number.

How to Map a Map in JavaScript?

new Map() You can create a Map by passing an Array to the new Map() constructor: ... .
Map.get() The get() method gets the value of a key in a Map: ... .
Map.size. The size property returns the number of elements in a Map: ... .
Map.delete() The delete() method removes a Map element: ... .
Map.clear() ... .
Map.forEach() ... .
Map.entries() ... .
Map.keys().

How do you iterate through a Map variable?

How to Iterate Maps in Java?.
Iterating over entries using For-Each loop..
Iterating over keys or values using keySet() and values() method using for-each loop..
Iterating using stream() in JAVA 8..
Using entrySet().
Using Iterator through a Maps..

How to use Map () to iterate through array items in JavaScript?

How To Use ..
Step 1 — Calling a Function on Each Item in an Array. . ... .
Step 2 — Converting a String to an Array. . ... .
Step 3 — Rendering Lists in JavaScript Libraries. JavaScript libraries like React use . ... .
Step 4 — Reformatting Array Objects. ..

Is Map iterable in JS?

A Map is an iterable, so it can be directly iterated. Object does not implement an iteration protocol, and so objects are not directly iterable using the JavaScript for...of statement (by default).