Map
The Map
object holds key-value pairs and remembers the original insertion
order of the keys. Any value (both objects and
primitive values) may be used as
either a key or a value.
Description
A Map
object iterates its elements in insertion order — a
for...of
loop returns an
array of [key, value]
for each iteration.
Key equality
-
Key equality is based on the
sameValueZero
algorithm. -
NaN
is considered the same asNaN
(even thoughNaN !== NaN
) and all other values are considered equal according to the semantics of the===
operator. -
In the current ECMAScript specification,
-0
and+0
are considered equal, although this was not so in earlier drafts. See "Value equality for -0 and 0" in the Browser compatibility table for details.
Objects vs. Maps
Object
is similar to Map
—both let you set keys to
values, retrieve those values, delete keys, and detect whether something is
stored at a key. For this reason (and because there were no built-in
alternatives), Object
has been used as Map
historically.
However, there are important differences that make Map
preferable in some
cases:
Map | Object | |
---|---|---|
Accidental Keys |
A Map does not contain any keys by default. It only
contains what is explicitly put into it.
|
An
Note: As of ES5, this can be bypassed by using
|
Key Types |
A Map 's keys can be any value (including functions,
objects, or any primitive).
|
The keys of an Object must be either a
String or a Symbol .
|
Key Order |
The keys in |
Although the keys of an ordinary
The order was first defined for own properties only in ECMAScript
2015; ECMAScript 2020 defines order for inherited properties as well.
See the
OrdinaryOwnPropertyKeys
and
EnumerateObjectProperties
abstract specification operations. But note that no single mechanism
iterates
all of an object's properties; the various mechanisms
each include different subsets of properties.
( |
Size |
The number of items in a Map is easily retrieved from its
size property.
|
The number of items in an Object must be determined
manually.
|
Iteration |
A Map is an
iterable, so it can be directly iterated.
|
Note:
|
Performance |
Performs better in scenarios involving frequent additions and removals of key-value pairs. |
Not optimized for frequent additions and removals of key-value pairs. |
Serialization and parsing |
No native support for serialization or parsing.
(But you can build your own serialization and parsing support for
|
Native support for serialization from
Native support for parsing from JSON to |
Setting object properties
Setting Object properties works for Map objects as well, and can cause considerable confusion.
Therefore, this appears to work in a way:
const wrongMap = new Map()
wrongMap['bla'] = 'blaa'
wrongMap['bla2'] = 'blaaa2'
console.log(wrongMap) // Map { bla: 'blaa', bla2: 'blaaa2' }
But that way of setting a property does not interact with the Map data structure. It uses the feature of the generic object. The value of 'bla' is not stored in the Map for queries. Other operations on the data fail:
wrongMap.has('bla') // false
wrongMap.delete('bla') // false
console.log(wrongMap) // Map { bla: 'blaa', bla2: 'blaaa2' }
The correct usage for storing data in the Map is through the set(key, value)
method.
const contacts = new Map()
contacts.set('Jessie', {phone: "213-555-1234", address: "123 N 1st Ave"})
contacts.has('Jessie') // true
contacts.get('Hilary') // undefined
contacts.set('Hilary', {phone: "617-555-4321", address: "321 S 2nd St"})
contacts.get('Jessie') // {phone: "213-555-1234", address: "123 N 1st Ave"}
contacts.delete('Raymond') // false
contacts.delete('Jessie') // true
console.log(contacts.size) // 1
Constructor
Map()
-
Creates a new
Map
object.
Static properties
get Map[@@species]
-
The constructor function that is used to create derived objects.
Instance properties
Map.prototype.size
-
Returns the number of key/value pairs in the
Map
object.
Instance methods
Map.prototype.clear()
-
Removes all key-value pairs from the
Map
object. Map.prototype.delete(key)
-
Returns
true
if an element in theMap
object existed and has been removed, orfalse
if the element does not exist.Map.prototype.has(key)
will returnfalse
afterwards. Map.prototype.get(key)
-
Returns the value associated to the
key
, orundefined
if there is none. Map.prototype.has(key)
-
Returns a boolean asserting whether a value has been associated to the
key
in theMap
object or not. Map.prototype.set(key, value)
-
Sets the
value
for thekey
in theMap
object. Returns theMap
object.
Iteration methods
Map.prototype[@@iterator]()
-
Returns a new Iterator object that contains an array of
[key, value]
for each element in theMap
object in insertion order. Map.prototype.keys()
-
Returns a new Iterator object that contains the keys for each element in the
Map
object in insertion order. Map.prototype.values()
-
Returns a new Iterator object that contains the values for each element in the
Map
object in insertion order. Map.prototype.entries()
-
Returns a new Iterator object that contains an array of
[key, value]
for each element in theMap
object in insertion order. Map.prototype.forEach(callbackFn[, thisArg])
-
Calls
callbackFn
once for each key-value pair present in theMap
object, in insertion order. If athisArg
parameter is provided toforEach
, it will be used as thethis
value for each callback.
Examples
Using the Map object
const myMap = new Map()
const keyString = 'a string'
const keyObj = {}
const keyFunc = function() {}
// setting the values
myMap.set(keyString, "value associated with 'a string'")
myMap.set(keyObj, 'value associated with keyObj')
myMap.set(keyFunc, 'value associated with keyFunc')
myMap.size // 3
// getting the values
myMap.get(keyString) // "value associated with 'a string'"
myMap.get(keyObj) // "value associated with keyObj"
myMap.get(keyFunc) // "value associated with keyFunc"
myMap.get('a string') // "value associated with 'a string'"
// because keyString === 'a string'
myMap.get({}) // undefined, because keyObj !== {}
myMap.get(function() {}) // undefined, because keyFunc !== function () {}
Using NaN as Map keys
NaN
can also be used as a key. Even though every NaN
is
not equal to itself (NaN !== NaN
is true), the following example works because
NaN
s are indistinguishable from each other:
const myMap = new Map()
myMap.set(NaN, 'not a number')
myMap.get(NaN)
// "not a number"
const otherNaN = Number('foo')
myMap.get(otherNaN)
// "not a number"
Iterating Map with for..of
Maps can be iterated using a for..of
loop:
const myMap = new Map()
myMap.set(0, 'zero')
myMap.set(1, 'one')
for (const [key, value] of myMap) {
console.log(key + ' = ' + value)
}
// 0 = zero
// 1 = one
for (const key of myMap.keys()) {
console.log(key)
}
// 0
// 1
for (const value of myMap.values()) {
console.log(value)
}
// zero
// one
for (const [key, value] of myMap.entries()) {
console.log(key + ' = ' + value)
}
// 0 = zero
// 1 = one
Iterating Map with forEach()
Maps can be iterated using the
forEach()
method:
myMap.forEach(function(value, key) {
console.log(key + ' = ' + value)
})
// 0 = zero
// 1 = one
Relation with Array objects
const kvArray = [['key1', 'value1'], ['key2', 'value2']]
// Use the regular Map constructor to transform a 2D key-value Array into a map
const myMap = new Map(kvArray)
myMap.get('key1') // returns "value1"
// Use Array.from() to transform a map into a 2D key-value Array
console.log(Array.from(myMap)) // Will show you exactly the same Array as kvArray
// A succinct way to do the same, using the spread syntax
console.log([...myMap])
// Or use the keys() or values() iterators, and convert them to an array
console.log(Array.from(myMap.keys())) // ["key1", "key2"]
Cloning and merging Maps
Just like Array
s, Map
s can be cloned:
const original = new Map([
[1, 'one']
])
const clone = new Map(original)
console.log(clone.get(1)) // one
console.log(original === clone) // false (useful for shallow comparison)
Note: Keep in mind that the data itself is not cloned.
Maps can be merged, maintaining key uniqueness:
const first = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
])
const second = new Map([
[1, 'uno'],
[2, 'dos']
])
// Merge two maps. The last repeated key wins.
// Spread operator essentially converts a Map to an Array
const merged = new Map([...first, ...second])
console.log(merged.get(1)) // uno
console.log(merged.get(2)) // dos
console.log(merged.get(3)) // three
Maps can be merged with Arrays, too:
const first = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
])
const second = new Map([
[1, 'uno'],
[2, 'dos']
])
// Merge maps with an array. The last repeated key wins.
const merged = new Map([...first, ...second, [1, 'eins']])
console.log(merged.get(1)) // eins
console.log(merged.get(2)) // dos
console.log(merged.get(3)) // three
Specifications
Specification |
---|
ECMAScript Language Specification # sec-map-objects |
Browser compatibility
BCD tables only load in the browser