path: root/files/id/web/javascript/reference/global_objects/map/index.html

---
title: Map
slug: Web/JavaScript/Reference/Global_Objects/Map
tags:
  - ECMAScript6
  - JavaScript
  - Map
  - NeedsTranslation
  - TopicStub
translation_of: Web/JavaScript/Reference/Global_Objects/Map
---
<div>{{JSRef}}</div>

<p>The <strong><code>Map</code></strong> object is a simple key/value map. Any value (both objects and {{Glossary("Primitive", "primitive values")}}) may be used as either a key or a value.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox"><code>new Map([iterable])
</code></pre>

<h3 id="Parameters">Parameters</h3>

<dl>
 <dt><code>iterable</code></dt>
 <dd>Iterable is an Array or other iterable object whose elements are key-value pairs (2-element Arrays). Each key-value pair is added to the new Map. <code>null</code> is treated as <code>undefined</code>.</dd>
</dl>

<h2 id="Description">Description</h2>

<p>A Map object iterates its elements in insertion order — a {{jsxref("Statements/for...of", "for...of")}} loop returns an array of <code>[key, value]</code> for each iteration.</p>

<h3 id="Key_equality">Key equality</h3>

<p>Key equality is based on the "same-value" algorithm: <code>NaN</code> is considered the same as <code>NaN</code> (even though <code>NaN !== NaN</code>) and all other values are considered equal according to the semantics of the === operator. In earlier versions of the ECMAScript 6 draft <code>-0</code> and <code>+0</code> were considered distinct (even though <code>-0 === +0</code>), this has been changed in later versions and has been adapted in Gecko 29 {{geckoRelease("29")}} ({{bug("952870")}}) and a <a href="https://code.google.com/p/v8/issues/detail?id=3069">recent nightly Chrome</a>.</p>

<h3 id="Objects_and_maps_compared">Objects and maps compared</h3>

<p>{{jsxref("Object", "Objects")}} are similar to <code>Maps</code> 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), <code>Objects</code> have been used as <code>Maps</code> historically; however, there are important differences between <code>Objects</code> and <code>Maps</code> that make using a <code>Map</code> better:</p>

<ul>
 <li>An <code>Object</code> has a prototype, so there are default keys in the map. This could be bypassed by using <code>map = Object.create(null)</code> since ES5, but was seldomly done.</li>
 <li>The keys of an <code>Object</code> are {{jsxref("String", "Strings")}} and {{jsxref("Symbol", "Symbols")}}, where they can be any value for a <code>Map</code>.</li>
 <li>You can get the size of a <code>Map</code> easily while you have to manually keep track of size for an <code>Object</code>.</li>
</ul>

<p>This does not mean you should use <code>Map</code>s everywhere, objects still are used in most cases. <code>Map</code> instances are only useful for collections, and you should consider adapting your code where you have previously used objects for such. Objects shall be used as records, with fields and methods.<br>
 If you're still not sure which one to use, ask yourself the following questions:</p>

<ul>
 <li>Are keys usually unknown until run time, do you need to look them up dynamically?</li>
 <li>Do all values have the same type, and can be used interchangeably?</li>
 <li>Do you need keys that aren't strings?</li>
 <li>Are key-value pairs often added or removed?</li>
 <li>Do you have an arbitrary (easily changing) amount of key-value pairs?</li>
 <li>Is the collection iterated?</li>
</ul>

<p>Those all are signs that you want a <code>Map</code> for a collection. If in contrast you have a fixed amount of keys, operate on them individually, and distinguish between their usage, then you want an object.</p>

<h2 id="Properties">Properties</h2>

<dl>
 <dt><code>Map.length</code></dt>
 <dd>The value of the <code>length</code> property is 0.</dd>
 <dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt>
 <dd>The constructor function that is used to create derived objects.</dd>
 <dt>{{jsxref("Map.prototype")}}</dt>
 <dd>Represents the prototype for the <code>Map</code> constructor. Allows the addition of properties to all <code>Map</code> objects.</dd>
</dl>

<h2 id="Map_instances"><code>Map</code> instances</h2>

<p>All <code>Map</code> instances inherit from {{jsxref("Map.prototype")}}.</p>

<h3 id="Properties_2">Properties</h3>

<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Properties')}}</p>

<h3 id="Methods">Methods</h3>

<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Methods')}}</p>

<h2 id="Examples">Examples</h2>

<h3 id="Using_the_Map_object">Using the <code>Map</code> object</h3>

<pre class="brush: js">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 () {}
</pre>

<h3 id="Using_NaN_as_Map_keys">Using <code>NaN</code> as <code>Map</code> keys</h3>

<p><code>NaN</code> can also be used as a key. Even though every <code>NaN</code> is not equal to itself (<code>NaN !== NaN</code> is true), the following example works, because <code>NaN</code>s are indistinguishable from each other:</p>

<pre class="brush: js">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"
</pre>

<h3 id="Iterating_Maps_with_for..of">Iterating <code>Maps</code> with <code>for..of</code></h3>

<p>Maps can be iterated using a <code>for..of</code> loop:</p>

<pre class="brush: js">var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
for (var [key, value] of myMap) {
  console.log(key + " = " + value);
}
// Will show 2 logs; first with "0 = zero" and second with "1 = one"

for (var key of myMap.keys()) {
  console.log(key);
}
// Will show 2 logs; first with "0" and second with "1"

for (var value of myMap.values()) {
  console.log(value);
}
// Will show 2 logs; first with "zero" and second with "one"

for (var [key, value] of myMap.entries()) {
  console.log(key + " = " + value);
}
// Will show 2 logs; first with "0 = zero" and second with "1 = one"
</pre>

<h3 id="Iterating_Maps_with_forEach()">Iterating <code>Maps</code> with <code>forEach()</code></h3>

<p>Maps can be iterated using the <code>forEach()</code> method:</p>

<pre class="brush: js">myMap.forEach(function(value, key) {
  console.log(key + " = " + value);
}, myMap)
// Will show 2 logs; first with "0 = zero" and second with "1 = one"
</pre>

<h3 id="Relation_with_Array_objects">Relation with <code>Array</code> objects</h3>

<pre class="brush: js">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 spread operator to transform a map into a 2D key-value Array.
console.log(uneval([...myMap])); // Will show you exactly the same Array as kvArray

// Or use the spread operator on the keys or values iterator to get
// an array of only the keys or values
console.log(uneval([...myMap.keys()])); // Will show ["key1", "key2"]
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-map-objects', 'Map')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td>Initial definition.</td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>
    <p>{{ CompatChrome(38) }} [1]</p>
   </td>
   <td>{{ CompatGeckoDesktop("13") }}</td>
   <td>11</td>
   <td>25</td>
   <td>7.1</td>
  </tr>
  <tr>
   <td>Constructor argument: <code>new Map(iterable)</code></td>
   <td>{{ CompatChrome(38) }}</td>
   <td>{{ CompatGeckoDesktop("13") }}</td>
   <td>{{CompatNo}}</td>
   <td>25</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>iterable</td>
   <td>{{ CompatChrome(38) }}</td>
   <td>{{ CompatGeckoDesktop("17") }}</td>
   <td>{{CompatNo}}</td>
   <td>25</td>
   <td>7.1</td>
  </tr>
  <tr>
   <td><code>Map.clear()</code></td>
   <td>{{ CompatChrome(31) }}<br>
    {{ CompatChrome(38) }}</td>
   <td>{{CompatGeckoDesktop("19")}}</td>
   <td>11</td>
   <td>25</td>
   <td>7.1</td>
  </tr>
  <tr>
   <td><code>Map.keys(), Map.values(), Map.entries()</code></td>
   <td>{{ CompatChrome(37) }}<br>
    {{ CompatChrome(38) }}</td>
   <td>{{CompatGeckoDesktop("20")}}</td>
   <td>{{CompatNo}}</td>
   <td>25</td>
   <td>7.1</td>
  </tr>
  <tr>
   <td><code>Map.forEach()</code></td>
   <td>{{ CompatChrome(36) }}<br>
    {{ CompatChrome(38) }}</td>
   <td>{{CompatGeckoDesktop("25")}}</td>
   <td>11</td>
   <td>25</td>
   <td>7.1</td>
  </tr>
  <tr>
   <td>Key equality for -0 and 0</td>
   <td>{{ CompatChrome(34) }}<br>
    {{ CompatChrome(38) }}</td>
   <td>{{CompatGeckoDesktop("29")}}</td>
   <td>{{CompatNo}}</td>
   <td>25</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Constructor argument: <code>new Map(null)</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("37")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>Monkey-patched <code>set()</code> in Constructor</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("37")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>Map[@@species]</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("41")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>Map()</code> without <code>new</code> throws</td>
   <td>{{CompatUnknown}}</td>
   <td>{{ CompatGeckoDesktop("42") }}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{ CompatChrome(38) }} [1]</td>
   <td>{{ CompatGeckoMobile("13") }}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>8</td>
  </tr>
  <tr>
   <td>Constructor argument: <code>new Map(iterable)</code></td>
   <td>{{CompatNo}}</td>
   <td>{{ CompatChrome(38) }}</td>
   <td>{{ CompatGeckoMobile("13") }}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>iterable</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{ CompatGeckoMobile("17") }}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>8</td>
  </tr>
  <tr>
   <td><code>Map.clear()</code></td>
   <td>{{CompatNo}}</td>
   <td>{{ CompatChrome(31) }}<br>
    {{ CompatChrome(38) }}</td>
   <td>{{CompatGeckoMobile("19")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>8</td>
  </tr>
  <tr>
   <td><code>Map.keys(), Map.values(), Map.entries()</code></td>
   <td>{{CompatNo}}</td>
   <td>{{ CompatChrome(37) }}<br>
    {{ CompatChrome(38) }}</td>
   <td>{{CompatGeckoMobile("20")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>8</td>
  </tr>
  <tr>
   <td><code>Map.forEach()</code></td>
   <td>{{CompatNo}}</td>
   <td>{{ CompatChrome(36) }}<br>
    {{ CompatChrome(38) }}</td>
   <td>{{CompatGeckoMobile("25")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>8</td>
  </tr>
  <tr>
   <td>Key equality for -0 and 0</td>
   <td>{{CompatNo}}</td>
   <td>{{ CompatChrome(34) }}<br>
    {{ CompatChrome(38) }}</td>
   <td>{{CompatGeckoMobile("29")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Constructor argument: <code>new Map(null)</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("37")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>Monkey-patched <code>set()</code> in Constructor</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("37")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>Map[@@species]</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("41")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>Map()</code> without <code>new</code> throws</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("42")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Starting with Chrome 31, the feature was available behind a preference. In <code>chrome://flags</code>, activate the entry “Enable Experimental JavaScript”.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=697479">Map and Set bug at Mozilla</a></li>
 <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets">ECMAScript Harmony proposal</a></li>
 <li>{{jsxref("Set")}}</li>
 <li>{{jsxref("WeakMap")}}</li>
 <li>{{jsxref("WeakSet")}}</li>
</ul>