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
s have been used as Map
s historically.
However, there are important differences that make Map
preferable in certain 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 |
The keys of an Note: Since ECMAScript 2015, objects do preserve creation order for string and |
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. |
Iterating over an Object requires obtaining its keys in some fashion and iterating over them. |
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. |
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:
let 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.
let 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 theMap
object in insertion order. Map.prototype.values()
- Returns a new
Iterator
object that contains the values for each element in theMap
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
let myMap = new Map() let keyString = 'a string' let keyObj = {} let 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:
let myMap = new Map() myMap.set(NaN, 'not a number') myMap.get(NaN) // "not a number" let otherNaN = Number('foo') myMap.get(otherNaN) // "not a number"
Iterating Map with for..of
Maps can be iterated using a for..of
loop:
let myMap = new Map() myMap.set(0, 'zero') myMap.set(1, 'one') for (let [key, value] of myMap) { console.log(key + ' = ' + value) } // 0 = zero // 1 = one for (let key of myMap.keys()) { console.log(key) } // 0 // 1 for (let value of myMap.values()) { console.log(value) } // zero // one for (let [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
let kvArray = [['key1', 'value1'], ['key2', 'value2']] // Use the regular Map constructor to transform a 2D key-value Array into a map let 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:
let original = new Map([ [1, 'one'] ]) let clone = new Map(original) console.log(clone.get(1)) // one console.log(original === clone) // false (useful for shallow comparison)
Important: Keep in mind that the data itself is not cloned.
Maps can be merged, maintaining key uniqueness:
let first = new Map([ [1, 'one'], [2, 'two'], [3, 'three'], ]) let second = new Map([ [1, 'uno'], [2, 'dos'] ]) // Merge two maps. The last repeated key wins. // Spread operator essentially converts a Map to an Array let 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:
let first = new Map([ [1, 'one'], [2, 'two'], [3, 'three'], ]) let second = new Map([ [1, 'uno'], [2, 'dos'] ]) // Merge maps with an array. The last repeated key wins. let 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 (ECMA-262) The definition of 'Map' in that specification. |
Browser compatibility
Desktop | Mobile | Server | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Map | Chrome Full support 38 | Edge Full support 12 | Firefox Full support 13 | IE Full support 11 | Opera Full support 25 | Safari Full support 8 | WebView Android Full support 38 | Chrome Android Full support 38 | Firefox Android Full support 14 | Opera Android Full support 25 | Safari iOS Full support 8 | Samsung Internet Android Full support 3.0 | nodejs
Full support
0.12
|
Map() constructor | Chrome Full support 38 | Edge Full support 12 | Firefox Full support 13 | IE Full support 11 | Opera Full support 25 | Safari Full support 8 | WebView Android Full support 38 | Chrome Android Full support 38 | Firefox Android Full support 14 | Opera Android Full support 25 | Safari iOS Full support 8 | Samsung Internet Android Full support 3.0 | nodejs
Full support
0.12
|
clear | Chrome Full support 38 | Edge Full support 12 | Firefox Full support 19 | IE Full support 11 | Opera Full support 25 | Safari Full support 8 | WebView Android Full support 38 | Chrome Android Full support 38 | Firefox Android Full support 19 | Opera Android Full support 25 | Safari iOS Full support 8 | Samsung Internet Android Full support 3.0 | nodejs Full support 0.12 |
delete | Chrome Full support 38 | Edge Full support 12 | Firefox Full support 13 | IE Full support 11 | Opera Full support 25 | Safari Full support 8 | WebView Android Full support 38 | Chrome Android Full support 38 | Firefox Android Full support 14 | Opera Android Full support 25 | Safari iOS Full support 8 | Samsung Internet Android Full support 3.0 | nodejs
Full support
0.12
|
entries | Chrome Full support 38 | Edge Full support 12 | Firefox Full support 20 | IE No support No | Opera Full support 25 | Safari Full support 8 | WebView Android Full support 38 | Chrome Android Full support 38 | Firefox Android Full support 20 | Opera Android Full support 25 | Safari iOS Full support 8 | Samsung Internet Android Full support 3.0 | nodejs Full support 0.12 |
forEach | Chrome Full support 38 | Edge Full support 12 | Firefox Full support 25 | IE Full support 11 | Opera Full support 25 | Safari Full support 8 | WebView Android Full support 38 | Chrome Android Full support 38 | Firefox Android Full support 25 | Opera Android Full support 25 | Safari iOS Full support 8 | Samsung Internet Android Full support 3.0 | nodejs Full support 0.12 |
get | Chrome Full support 38 | Edge Full support 12 | Firefox Full support 13 | IE Full support 11 | Opera Full support 25 | Safari Full support 8 | WebView Android Full support 38 | Chrome Android Full support 38 | Firefox Android Full support 14 | Opera Android Full support 25 | Safari iOS Full support 8 | Samsung Internet Android Full support 3.0 | nodejs
Full support
0.12
|
has | Chrome Full support 38 | Edge Full support 12 | Firefox Full support 13 | IE Full support 11 | Opera Full support 25 | Safari Full support 8 | WebView Android Full support 38 | Chrome Android Full support 38 | Firefox Android Full support 14 | Opera Android Full support 25 | Safari iOS Full support 8 | Samsung Internet Android Full support 3.0 | nodejs
Full support
0.12
|
Key equality for -0 and 0 | Chrome Full support 38 | Edge Full support 12 | Firefox Full support 29 | IE No support No | Opera Full support 25 | Safari Full support 9 | WebView Android Full support 38 | Chrome Android Full support 38 | Firefox Android Full support 29 | Opera Android Full support 25 | Safari iOS Full support 9 | Samsung Internet Android Full support 3.0 | nodejs Full support 4.0.0 |
keys | Chrome Full support 38 | Edge Full support 12 | Firefox Full support 20 | IE No support No | Opera Full support 25 | Safari Full support 8 | WebView Android Full support 38 | Chrome Android Full support 38 | Firefox Android Full support 20 | Opera Android Full support 25 | Safari iOS Full support 8 | Samsung Internet Android Full support 3.0 | nodejs Full support 0.12 |
set | Chrome Full support 38 | Edge Full support 12 | Firefox Full support 13 | IE
Partial support
11
| Opera Full support 25 | Safari Full support 8 | WebView Android Full support 38 | Chrome Android Full support 38 | Firefox Android Full support 14 | Opera Android Full support 25 | Safari iOS Full support 8 | Samsung Internet Android Full support 3.0 | nodejs
Full support
0.12
|
size | Chrome Full support 38 | Edge Full support 12 | Firefox
Full support
19
| IE Full support 11 | Opera Full support 25 | Safari Full support 8 | WebView Android Full support 38 | Chrome Android Full support 38 | Firefox Android
Full support
19
| Opera Android Full support 25 | Safari iOS Full support 8 | Samsung Internet Android Full support 3.0 | nodejs Full support 0.12 |
values | Chrome Full support 38 | Edge Full support 12 | Firefox Full support 20 | IE No support No | Opera Full support 25 | Safari Full support 8 | WebView Android Full support 38 | Chrome Android Full support 38 | Firefox Android Full support 20 | Opera Android Full support 25 | Safari iOS Full support 8 | Samsung Internet Android Full support 3.0 | nodejs Full support 0.12 |
@@iterator | Chrome Full support 43 | Edge Full support 12 | Firefox
Full support
36
| IE No support No | Opera Full support 30 | Safari Full support 10 | WebView Android Full support 43 | Chrome Android Full support 43 | Firefox Android
Full support
36
| Opera Android Full support 30 | Safari iOS Full support 10 | Samsung Internet Android Full support 4.0 | nodejs Full support 0.12 |
@@species | Chrome Full support 51 | Edge Full support 13 | Firefox Full support 41 | IE No support No | Opera Full support 38 | Safari Full support 10 | WebView Android Full support 51 | Chrome Android Full support 51 | Firefox Android Full support 41 | Opera Android Full support 41 | Safari iOS Full support 10 | Samsung Internet Android Full support 5.0 | nodejs
Full support
6.5.0
|
@@toStringTag | Chrome Full support 44 | Edge Full support 79 | Firefox Full support 51 | IE No support No | Opera No support No | Safari No support No | WebView Android Full support 44 | Chrome Android Full support 44 | Firefox Android Full support 51 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android Full support 4.0 | nodejs Full support 6.0.0 |
Legend
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Uses a non-standard name.
- Uses a non-standard name.