JavaScript Map & Set

JavaScript Map Methods

Written by Swapnil RajaPublished 24 Aug 2026

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.

The Methods

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.

forEach Puts the Value First

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.

Using Array Methods

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.

Totalling the Values

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.

Converting to an Object

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.

Converting from an Object

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>

Try It Yourself

Run the above example in the Try It Editor.

Try a lower pass mark:

Change 80 to 50 and see everyone pass.

Important Points

keys, values and entries return iterators.
Spread turns an iterator into an array.
forEach gives the value before the key.
Object.fromEntries converts a Map to an object.
Object.entries converts an object to a Map.

Conclusion

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.

PreviousJavaScript Map NextJavaScript Set