JavaScript Map & Set
JavaScript Map
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
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.
Map Basics
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
Syntax
javascript
const map = new Map();
map.set(key, value);
map.get(key);size is a property, not a method.
Any Key Type
This is the main reason to choose a Map.
Example
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.
Checking and Removing
has, delete and clear manage the contents.
Example
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.
Looping in Insertion Order
A Map remembers the order entries were added.
Example
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.
Building from an Array
A Map can be created from an array of pairs.
Example
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.
Map or Object?
Use a Map when keys are not strings, or when you add and remove often.
Use an object for fixed, known properties.
Example
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
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>Try It Yourself
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).
Important Points
- A Map holds key and value pairs.
- Keys can be any type, including objects.
sizecounts the entries.- Entries keep their insertion order.
- Use an object for fixed, known properties.
Conclusion
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.