JavaScript Map & Set
A Map stores key and value pairs where the key can be any type.
An object can only use strings and symbols as keys.
A Map can use numbers, objects, or anything else.
Example
javascript
const scores = new Map();
scores.set("Ada", 90);
console.log(scores.get("Ada"));
console.log(scores.size);The output is 90 then 1.
set(key, value) adds or replaces an entry.
get(key) reads it, and has(key) checks for it.
size counts the entries, like an array's length.
Syntax
javascript
const map = new Map();
map.set(key, value);
map.get(key);size is a property, not a method.
This is the main reason to choose a Map.
Example
javascript
const map = new Map();
const keyObject = { id: 1 };
map.set(1, "a number key");
map.set(keyObject, "an object key");
console.log(map.get(1));
console.log(map.get(keyObject));An object would have turned both keys into strings.
has, delete and clear manage the contents.
Example
javascript
const map = new Map();
map.set("a", 1);
console.log(map.has("a"));
map.delete("a");
console.log(map.has("a"));
console.log(map.size);The output is true, false, 0.
A Map remembers the order entries were added.
Example
javascript
const scores = new Map();
scores.set("Ada", 90);
scores.set("Grace", 95);
const lines = [];
for (const [name, score] of scores) {
lines.push(name + ":" + score);
}
console.log(lines.join(" "));Each entry unpacks into a key and a value.
A Map can be created from an array of pairs.
Example
javascript
const scores = new Map([
["Ada", 90],
["Grace", 95]
]);
console.log(scores.size);
console.log(scores.get("Grace"));Object.entries produces exactly this shape.
Use a Map when keys are not strings, or when you add and remove often.
Use an object for fixed, known properties.
Example
javascript
const map = new Map();
map.set("size", 1);
console.log(map.size);
console.log(map.get("size"));Note that size as a key does not clash with the size property.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Map</title>
</head>
<body>
<h1>JavaScript Map</h1>
<p id="out"></p>
<script>
const scores = new Map([
["Ada", 90],
["Grace", 95],
["Alan", 88]
]);
let lines = "";
for (const [name, score] of scores) {
lines += name + ": " + score + "<br>";
}
document.getElementById("out").innerHTML =
lines + "Total entries: " + scores.size;
</script>
</body>
</html>Run the above example in the Try It Editor.
Try a number key:
Add scores.set(1, 99) and read it back with get(1).
size counts the entries.A Map is the right choice when keys are dynamic or not strings.
It also gives you a reliable count and order, which objects do not.
For a simple record with known fields, an object is still simpler.