JavaScript · Lesson 27 / 32 · English
Maps
Understand the idea. Change the code. Build confidence with one focused experiment.
Read this lesson in தமிழ் ↗.
Start with the idea
Map stores key/value entries and supports keys beyond strings. Use get and set rather than ordinary object property syntax.
Learning goal: Explain what the example does, predict its result, and change it to solve the practice task.
Step-by-step lesson notes
Map in JavaScript
A Map is a collection of key-value pairs where keys can be any type (not just strings). Maps maintain insertion order and are iterable.
Map vs Object
| Feature | Map | Object |
|---|---|---|
| Key types | Any type (objects, functions) | Only strings/symbols |
| Order | Insertion order | Mostly insertion order (ES2015+) |
| Size | map.size | Object.keys(obj).length |
| Iteration | Directly iterable | Need Object.keys() etc. |
| Performance | Better for frequent add/remove | Better for simple lookups |
Working with Maps
const map = new Map();
// Setting values (any type as key)
map.set("name", "Alice");
map.set(42, "the answer");
map.set(true, "boolean key");
const objKey = { id: 1 };
map.set(objKey, "object as key");
// Getting values
console.log(map.get("name")); // "Alice"
console.log(map.get(42)); // "the answer"
console.log(map.get(objKey)); // "object as key"
// Checking and deleting
map.has("name"); // true
map.delete(42); // removes that entry
map.size; // 3
// Iteration
for (const [key, value] of map) {
console.log(key, value);
}
map.forEach((value, key) => console.log(key, value));
[...map.keys()]; // array of keys
[...map.values()]; // array of values
[...map.entries()]; // array of [key, value] pairs
// Initialize from array
const map2 = new Map([["a", 1], ["b", 2]]);
// Convert to object
const obj = Object.fromEntries(map);
map.clear(); // remove all entriesA complete example
Run this complete index.js program in the JavaScript console editor below. The earlier reference fragments may need a browser page or other surrounding setup.
const progress = new Map();
progress.set("Kavi", 3);
progress.set("Maya", 5);
console.log(progress.get("Kavi"));
console.log(progress.size);
for (const [name, count] of progress) console.log(name + ": " + count);Predict first. Reveal the expected result.
3 2 Kavi: 3 Maya: 5
Make one change. See what happens.
Load the example, change a value, predict the output, and run it again. Use the console output to check your reasoning.
Wait for the editor to load, then load this example and press Run.
Powered by the free OneCompiler editor. Code you run is sent to that external service. Keep personal data and secret keys out of your examples.
Put the idea to work
Practice challenge
Update Kavi to 4 and check size again.
Reveal the answer and reasoning
progress.set("Kavi", 4) updates the existing entry. size stays 2.
One mistake to avoid: progress["Kavi"] is an ordinary property, not a Map entry. Use progress.get("Kavi").
Your learning checkpoint
- Explain the example in your own words.
- Complete the challenge before revealing its answer.
- Describe the common mistake and how to avoid it.