JavaScript Maps and Sets
A Map stores a drink under a guest. A Set stores extras and keeps each extra once. This page sets lida to tea, then replaces that drink with mint, and puts mint and lemon in a set. The line reads lida / mint / 2.
Not the strict-mode page
That page threw ReferenceError for an undeclared name. Nothing here is thrown. get on a missing key returns undefined. It does not throw.
The same key replaces the drink
orders.set("lida", "tea") stores the first drink. orders.set("lida", "mint") does not add a second row. It overwrites the value for that key. size counts keys, not how many times you called set.
const orders = new Map();
orders.set("lida", "tea");
orders.set("lida", "mint");
console.log(orders.get("lida"));
console.log(orders.size);
The logs are mint, then 1. orders.get("nima") is undefined, because that key was never stored. orders.has("lida") is true. Read a map with get. orders.lida and orders["lida"] are object syntax, and they do not read this map.
Two objects are two keys
A map can use an object as a key. It keeps that object, not a string made from its fields. Another object with the same fields is a different key.
const cup = { guest: "lida" };
const other = { guest: "lida" };
const orders = new Map();
orders.set(cup, "tea");
console.log(orders.get(cup));
console.log(orders.get(other));
console.log(orders.size);
The logs are tea, then undefined, then 1. A plain object would turn both keys into the string "[object Object]", so the second write would replace the first. The map does not do that.
A set drops the copy
add("mint") twice still leaves one mint. lemon is a second value, so size is 2. has answers yes or no. It does not return the value.
const extras = new Set();
extras.add("mint");
extras.add("mint");
extras.add("lemon");
console.log(extras.size);
console.log(extras.has("lemon"));
The logs are 2, then true. new Set(["mint", "mint", "lemon"]) is the same set: the copy of mint is already gone. A set has values only. It does not store a drink under a guest.
delete removes that one entry
delete returns true when it removed something. A missing value returns false and the set stays as it was.
const extras = new Set(["mint", "lemon"]);
console.log(extras.delete("lemon"));
console.log(extras.size);
console.log(extras.has("lemon"));
The logs are true, then 1, then false. mint is still there. The same delete and has exist on a map, and they use the key: orders.delete("lida") removes that guest.
The line
The page replaces lida's drink, builds the set from three words, and writes guest, drink, and size.
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
const orders = new Map();
orders.set("lida", "tea");
orders.set("lida", "mint");
const extras = new Set(["mint", "mint", "lemon"]);
const line = document.querySelector("#line");
line.textContent = "lida / " + orders.get("lida") + " / " + extras.size;
</script>
</body>
</html>
The line reads lida / mint / 2. The first set to tea does not show, because the second set replaced it. The repeated mint does not raise the size. ReferenceError was the strict-mode line.
At the counter
- Set lida to tea, then to mint. get("lida") is mint and size is 1.
- Store tea under cup. get(other) is undefined and size stays 1.
- Add mint, mint, and lemon. size is 2 and has("lemon") is true.
- Delete lemon. size is 1 and has("lemon") is false.
- Read the page. The line is lida / mint / 2.
Misses
A second set on the same key is an update, not a new guest. A second add of the same extra is ignored.
- Reading the map with
orders["lida"] - Treating two lookalike objects as one key
- Expecting
hasto return the drink - Forgetting that
new Setalready drops copies - Reading the line as ReferenceError
Keep this
seton an existing key replaces the value, andsizestays the same- Object keys are compared as objects, not as their fields
- A set keeps each value once
deleteremoves one entry andhasthen returns false- The page line is lida / mint / 2
🧠 Test Your Knowledge
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
📝 Instructions
- Read each question carefully
- Select the best answer for each question
- You can retake the quiz as many times as you want
- Your progress will be shown at the top