A Map holds key-value pairs where the keys can be of any type, unlike plain Objects which only allow Strings and Symbols.
Before we dive in, let’s clear up a common confusion: The Map data structure is completely unrelated to the Array.prototype.map() method. Array.map() transforms an array, while a Map is a specialized container for storing keys and values.
To interact with a Map, you use specific methods like .set() and .get(). This is different from a regular object where you might use dot or bracket notation.
Notice what happens if we try to use bracket notation on a Map:
const myMap = new Map();
myMap['bla'] = 'blaa';
console.log(myMap.has('bla'));false
Bracket notation sets a property on the Map object instance itself, but it does not add an entry to the Map’s internal data structure! Always use .set():
const myMap = new Map();
myMap.set('a', 1);
myMap.set('b', 2);
console.log(myMap.size);2
Notice that Maps have a built-in .size property. To find the size of a regular object, you’d have to do Object.keys(obj).length, but a Map tracks its size automatically.
If you try to use an object as a key in a regular Object, JavaScript converts it to the string "[object Object]". If you use two different objects as keys, they will overwrite each other!
Maps do not do this. They preserve the exact reference. Let’s look at what happens when you use an object as a key in a Map:
Read the code. What exactly will it print? Commit to an answer before you look.
const obj1 = {};
const obj2 = {};
const dict = {};
dict[obj1] = 100;
dict[obj2] = 200;
const map = new Map();
map.set(obj1, 100);
map.set(obj2, 200);
console.log(dict[obj1]);
console.log(map.get(obj1));200 100
Because Maps store the actual reference, you can use DOM elements, functions, or any primitive as keys without them colliding.
To help visualize how Maps store items independently of their prototype chain, let’s look at a trace:
const myMap = new Map();
myMap.set('apple', 1);
myMap.set('banana', 2);
myMap.delete('apple');
const hasBanana = myMap.has('banana');You can remove items easily with .delete().
const myMap = new Map();
myMap.set('a', 1);
myMap.delete('a');
console.log(myMap.has('a'));false
A Map iterates its elements in insertion order. A for...of loop returns an array of [key, value] for each iteration:
const map1 = new Map();
map1.set('a', 1);
map1.set('b', 2);
for (const [key, value] of map1) {
console.log(`${key} = ${value}`);
}a = 1 b = 2
A plain Object inherits properties from Object.prototype, which means it has default keys (like toString or hasOwnProperty). This can lead to unexpected collisions if your data uses those names.
A Map does not contain any keys by default. It only contains what is explicitly put into it.
const myMap = new Map();
console.log(myMap.has('toString'));
const myObj = {};
console.log('toString' in myObj);false true
Use Map when you need a dictionary with dynamic keys, non-string keys, or when you are frequently adding and removing items. Stick to plain Object when you have a fixed structure or need JSON serialization.
Can you use a JavaScript Object as a key in a Map?
Yes, Maps can use objects, functions, or any primitive as keys. — Unlike plain Objects which convert all keys to strings or symbols, a Map preserves the exact reference of any object you use as a key.
How do you properly add a new key-value pair to a Map?
myMap.set('key', value) — You must use the `.set()` method. Using bracket notation attaches a property to the Map object instance but does not add the item to the actual Map data structure.
How do you find out how many items are currently stored in a Map?
myMap.size — Maps have a built-in `.size` property that keeps track of the number of elements they contain.
What is the relationship between the Map object and Array.prototype.map()?
They share a name but are completely unrelated. — Array.map() is a method that transforms elements in an array. A Map is a distinct data structure designed to store key-value pairs.
This Map is failing to store the score correctly. Fix the code so `.has('alice')` returns `true`.
This code runs. It just does the wrong thing. Read it, find the defect, fix it — the tests below decide when you are right.
Don't use bracket notation with Maps. Use the `.set()` method.
const scores = new Map();
scores.set('alice', 100);
console.log(scores.has('alice'));Create a Map and use the `userNode` object as a key to store the string `'admin'`. Then, print the value you stored.
Use `metadata.set(userNode, 'admin')` and then use `metadata.get(userNode)` inside `console.log()`.
const userNode = { id: 1 };
const metadata = new Map();
metadata.set(userNode, 'admin');
console.log(metadata.get(userNode));