Map
A collection of key-value pairs where the key can be any value and insertion order is preserved.
- Returns
- A new
Mapobject.
Example
#const scores = new Map()
scores.set('Emma', 120).set('Jack', 95)
scores.set('Emma', 150)
console.log(scores.get('Emma'))
console.log(scores.has('Mia'))
console.log(scores.size)
console.log(scores)Definition and usage
#Map stores key-value pairs, similar to a plain object, but has a few important advantages. The key can be anything: a number, an object, or a function, not just a string. You can read the number of pairs right away from the size property, and the iteration order always matches the insertion order.
The basic methods are set(key, value) to write, get(key) to read, has(key) to check, delete(key) to remove, and clear() to empty the whole map. The set() method returns the map, so calls can be chained.
You can iterate over a map with a for...of loop, which returns [key, value] pairs, or with the forEach() method. The keys(), values(), and entries() methods return iterators, which are easy to turn into an array: [...map.keys()].
Choose Map when you frequently add and remove entries, or when keys aren’t strings. Leave a plain object for data with a fixed shape, like { name, level }, and for writing in JSON format.
Syntax
#new Map()
new Map(iterable)
map.set(key, value)
map.get(key)
map.has(key)
map.delete(key)
map.clear()
map.sizeParameters
#iterable
optional
An array of[key, value]pairs, or another iterable object of pairs, e.g. the result ofObject.entries().
More examples
#const emma = { name: 'Emma' }
const jack = { name: 'Jack' }
const lastSeen = new Map([
[emma, 'yesterday'],
[jack, 'today']
])
console.log(lastSeen.get(emma))
console.log(lastSeen.get({ name: 'Emma' }))Object keys are compared by reference. The new object { name: "Emma" } looks the same, but it’s a different object than emma.
const cart = new Map([
['HTML Course', 49],
['CSS Course', 59]
])
for (const [course, price] of cart) {
console.log(`${course}: $${price}`)
}
console.log([...cart.keys()])
console.log(Object.fromEntries(cart))const answers = ['B', 'A', 'B', 'C', 'B']
const counts = new Map()
for (const answer of answers) {
counts.set(answer, (counts.get(answer) ?? 0) + 1)
}
console.log(counts)Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#JSON.stringify()turns a map into an empty object{}. Before saving it, convert it withObject.fromEntries(map)or[...map].- Don’t write data with
map[key] = value. That creates an ordinary object property, whichget(),has(), andsizecan’t see. - For counting occurrences, the pattern
map.set(k, (map.get(k) ?? 0) + 1)is short and readable.
Related entries
#- SetA collection of unique values: each value can appear in the set only once.
- WeakMapA map with objects as keys that doesn’t keep them in memory: the entry disappears along with the unused object.
- Object.entries()Returns an array of an object’s [key, value] pairs.
- Object.fromEntries()Creates an object from a list of [key, value] pairs.
- for...ofWalks the successive values of an iterable object: an array, a string, a Map, a Set, and others.
Spotted a mistake or missing an example? Write to us.