JavaScript Map & Set
Map methods let you loop over entries and convert to and from other structures.
A Map is iterable, so spread and for of both work.
Array methods need a conversion step first.
Example
javascript
const scores = new Map([["Ada", 90], ["Grace", 95]]);
console.log([...scores.keys()].join(","));
console.log([...scores.values()].join(","));The output is Ada,Grace then 90,95.
keys(), values() and entries() return iterators.
forEach works like the array version, with value first.
Spread turns any of them into a real array.
Syntax
javascript
map.forEach(function (value, key) {});
[...map.keys()];In forEach, the value comes before the key.
This is the opposite of what most people expect.
It matches the array signature, where the value comes first.
Example
javascript
const scores = new Map([["Ada", 90]]);
scores.forEach(function (value, key) {
console.log(key + " scored " + value);
});Getting these the wrong way round is a common mistake.
Spread the entries, then any array method works.
Example
javascript
const scores = new Map([["Ada", 90], ["Grace", 95], ["Alan", 60]]);
const passed = [...scores.entries()]
.filter(function (pair) {
return pair[1] >= 80;
})
.map(function (pair) {
return pair[0];
});
console.log(passed.join(","));Destructuring the pair makes this read better still.
values() spreads straight into reduce.
Example
javascript
const scores = new Map([["Ada", 90], ["Grace", 95]]);
const total = [...scores.values()].reduce(function (sum, n) {
return sum + n;
}, 0);
console.log(total);The output is 185.
Object.fromEntries works when every key is a string.
Example
javascript
const scores = new Map([["Ada", 90], ["Grace", 95]]);
const object = Object.fromEntries(scores);
console.log(Object.keys(object).join(","));
console.log(object.Ada);Non-string keys would be converted to strings in the process.
Object.entries produces the pairs a Map expects.
Example
javascript
const settings = { theme: "dark", size: "large" };
const map = new Map(Object.entries(settings));
console.log(map.size);
console.log(map.get("theme"));This round trip is a common way to move between the two.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Map Methods</title>
</head>
<body>
<h1>Map Methods</h1>
<p id="out"></p>
<script>
const scores = new Map([["Ada", 90], ["Grace", 95], ["Alan", 60]]);
const passed = [...scores.entries()]
.filter(function (pair) { return pair[1] >= 80; })
.map(function (pair) { return pair[0]; });
const total = [...scores.values()].reduce(function (s, n) { return s + n; }, 0);
document.getElementById("out").innerHTML =
"Names: " + [...scores.keys()].join(", ") +
"<br>Passed: " + passed.join(", ") +
"<br>Total: " + total;
</script>
</body>
</html>Run the above example in the Try It Editor.
Try a lower pass mark:
Change 80 to 50 and see everyone pass.
keys, values and entries return iterators.forEach gives the value before the key.Object.fromEntries converts a Map to an object.Object.entries converts an object to a Map.A Map is iterable but not an array, so a spread is usually the first step.
The value-before-key order in forEach is worth memorising.
Converting between Map and object is a two-way, one-line operation.