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.
Syntax
new Map([iterable])
Parameters
iterable
- An
Array
or other iterable object whose elements are key-value pairs (arrays with two elements, e.g.[[ 1, 'one' ],[ 2, 'two' ]]
). Each key-value pair is added to the newMap
.
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 as NaN
(even though NaN !== 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 and maps compared
Object
is similar to Map
in that both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Because of this (and because there were no built-in alternatives), Object
s have been used as Map
s historically; however, there are important differences that make using a Map
preferable in certain cases:
- The keys of an
Object
areString
andSymbol
, whereas they can be any value for aMap
, including functions, objects, and any primitive. - The keys in Map are ordered while keys added to object are not. Thus, when iterating over it, a Map object returns keys in order of insertion. (Note that in the ECMAScript 2015 spec objects do preserve creation order for string and
Symbol
keys, so traversal of an object with only string keys would yield the keys in order of insertion) - You can get the size of a
Map
easily with thesize
property, while the number of properties in anObject
must be determined manually. - A
Map
is an iterable and can thus be directly iterated, whereas iterating over anObject
requires obtaining its keys in some fashion and iterating over them. - An
Object
has a prototype, so there are default keys in the map that could collide with your keys if you're not careful. As of ES5 this can be bypassed by usingObject.create(null)
, but this is seldom done. - A
Map
may perform better in scenarios involving frequent addition and removal of key pairs.
Properties
Map.length
- The value of the
length
property is 0.
To count how many elements are in aMap
, useMap.prototype.size
. get Map[@@species]
- The constructor function that is used to create derived objects.
Map.prototype
- Represents the prototype for the
Map
constructor. Allows the addition of properties to allMap
objects.
Map instances
All Map
instances inherit from Map.prototype
.
Properties
Map.prototype.constructor
- Returns the function that created an instance's prototype. This is the
Map
function by default. Map.prototype.size
- Returns the number of key/value pairs in the
Map
object.
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.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 the
Map
object, in insertion order. If a thisArg parameter is provided to forEach, it will be used as the this value for each callback. 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.keys()
- Returns a new
Iterator
object that contains the keys for each element in theMap
object in insertion order. Map.prototype.set(key, value)
- Sets the value for the
key
in theMap
object. Returns theMap
object. Map.prototype.values()
- Returns a new
Iterator
object that contains the values for each element in theMap
object in insertion order. Map.prototype[@@iterator]()
- Returns a new
Iterator
object that contains an array of[key, value]
for each element in theMap
object in insertion order.
Examples
Using the Map
object
var myMap = new Map(); var keyString = 'a string', keyObj = {}, 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:
var myMap = new Map(); myMap.set(NaN, 'not a number'); myMap.get(NaN); // "not a number" var otherNaN = Number('foo'); myMap.get(otherNaN); // "not a number"
Iterating Map
with for..of
Maps can be iterated using a for..of
loop:
var myMap = new Map(); myMap.set(0, 'zero'); myMap.set(1, 'one'); for (var [key, value] of myMap) { console.log(key + ' = ' + value); } // 0 = zero // 1 = one for (var key of myMap.keys()) { console.log(key); } // 0 // 1 for (var value of myMap.values()) { console.log(value); } // zero // one for (var [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); }); // Will show 2 logs; first with "0 = zero" and second with "1 = one"
Relation with Array objects
var kvArray = [['key1', 'value1'], ['key2', 'value2']]; // Use the regular Map constructor to transform a 2D key-value Array into a map var myMap = new Map(kvArray); myMap.get('key1'); // returns "value1" // Use the Array.from function 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 more succinct way to do the same with spread syntax console.log([...myMap]); // Or use the keys or values iterators and convert them to an array console.log(Array.from(myMap.keys())); // Will show ["key1", "key2"]
Cloning and merging Map
s
Just like Arrays, Maps can be cloned:
var original = new Map([ [1, 'one'] ]); var clone = new Map(original); console.log(clone.get(1)); // one console.log(original === clone); // false. Useful for shallow comparison
Keep in mind that the data itself is not cloned
Maps can be merged, maintaining key uniqueness:
var first = new Map([ [1, 'one'], [2, 'two'], [3, 'three'], ]); var second = new Map([ [1, 'uno'], [2, 'dos'] ]); // Merge two maps. The last repeated key wins. // Spread operator essentially converts a Map to an Array var 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:
var first = new Map([ [1, 'one'], [2, 'two'], [3, 'three'], ]); var second = new Map([ [1, 'uno'], [2, 'dos'] ]); // Merge maps with an array. The last repeated key wins. var 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
Usage notes
Beware that setting Object properties works for Map objects as well and can cause considerable confusion. Therefore this:
var wrongMap = new Map(); wrongMap['bla'] = 'blaa'; wrongMap['bla2'] = 'blaaa2';
still sort-of-works:
console.log(wrongMap); // Map { bla: 'blaa', bla2: 'blaaa2' }
but does not produce expected results:
wrongMap.has('bla'); // false wrongMap.delete('bla'); //false console.log(wrongMap); // Map { bla: 'blaa', bla2: 'blaaa2' }
and there is not much visual difference compared to the correct usage:
var myMap = new Map(); myMap.set('bla','blaa'); myMap.set('bla2','blaa2') console.log(myMap); // Map { 'bla' => 'blaa', 'bla2' => 'blaa2' } myMap.has('bla'); //true myMap.delete('bla'); //true console.log(myMap); //Map { 'bla2' => 'blaa2' }
Specifications
Specification | Status | Comment |
---|---|---|
ECMAScript 2015 (6th Edition, ECMA-262) The definition of 'Map' in that specification. |
Standard | Initial definition. |
ECMAScript Latest Draft (ECMA-262) The definition of 'Map' in that specification. |
Draft |
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
|
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 Yes |
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 Yes |
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 |
new Map(iterable) | Chrome Full support 38 | Edge Full support 12 | Firefox Full support 13 | 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 14 | Opera Android Full support 25 | Safari iOS Full support 9 | Samsung Internet Android Full support 3.0 | nodejs Full support 0.12 |
new Map(null) | Chrome Full support 38 | Edge Full support 12 | Firefox Full support 37 | IE Full support 11 | Opera Full support 25 | Safari Full support 9 | WebView Android Full support 38 | Chrome Android Full support 38 | Firefox Android Full support 37 | Opera Android Full support 25 | Safari iOS Full support 9 | Samsung Internet Android Full support 3.0 | nodejs
Full support
0.12
|
Map() without new throws | Chrome Full support 38 | Edge Full support 12 | Firefox Full support 42 | IE Full support 11 | Opera Full support 25 | Safari Full support 9 | WebView Android Full support 38 | Chrome Android Full support 38 | Firefox Android Full support 42 | Opera Android Full support 25 | Safari iOS Full support 9 | Samsung Internet Android Full support 3.0 | nodejs Full support 0.12 |
prototype | 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 Yes |
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 Yes |
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 Yes | WebView Android Full support 43 | Chrome Android Full support 43 | Firefox Android
Full support
36
| Opera Android Full support 30 | Safari iOS Full support Yes | 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 No support No | 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 No support No |
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.