<p>A Javascript map object is a collection of key-value pairs where <strong>keys and objects can be of any data type </strong>including objects, functions, &amp; primitive types, unlike the objects, created using <code>{}</code> should have only a string or a symbol as a key. The map data type was added in the EcmaScript version 6(ES6).&nbsp;</p>
<p>To create a JS map, <code>Map</code> constructor is used. We can optionally pass an array of iterable objects to the <code>Map</code> to add the key-value pairs of that iterable object to the map.</p>
<pre class="language-javascript"><code>const items = new Map([iterable]);</code></pre>
<p>We can add key-value pairs to the map with the help of <code>set</code> method.</p>
<pre class="language-javascript"><code>const person = new Map();
person.set('name', 'John');
person.set('age', 25);

console.log(person.size); // 2</code></pre>
<p>A <code>Map</code> instance has got various methods for reading and manipulating the elements(key-value pairs) in it. It's an iterable and so by using iterative methods or loops we can read the data.&nbsp;</p>
<p>The various methods that we can use on maps are:</p>
<ul>
<li><code>set()</code> - to add key-value pairs to the map</li>
<li><code>get()</code> - to get the value of the key if it exists</li>
<li><code>has()</code> - to check if the key exists in the map, returns a boolean</li>
<li><code>delete()</code> - to delete the map element specified by the key</li>
<li><code>clear()</code> - to clear/delete all the elements of the map</li>
<li><code>keys()</code> - to get the iterator object of all keys in the map</li>
<li><code>values()</code> - to get the iterator object of all values in the map</li>
<li><code>entries()</code> - to get an iterator object with [key, value] elements&nbsp;</li>
<li><code>forEach()</code> - to call/invoke a callback function on every element in a map</li>
<li><code>size</code> - to get the total number of elements in a map</li>
</ul>
<p>Let's understand each method with examples</p>
<h2 style="text-align: center;">Javascript map methods</h2>
<h3>set() method</h3>
<pre class="language-javascript"><code>const items = new Map(); // Initializing empty map
const john = { name: 'John', age: 25};
items.set(john, 'person'); // object as a key
items.set(1, 'number'); // number as a key
items.set(true, 'boolean'); // boolean as a key
items.set('color', 'red');

console.log(items.size); // 4</code></pre>
<p>We can see from the above that having any type of data type as the key is the specialty of javascript map objects. If it's a normal object then the keys get converted to strings or object strings.</p>
<p>As we know that the instance of <code>Map</code> returns an iterable, so we can use <a href="https://devapt.com/for-loops-javascript" target="_blank" rel="noopener">for-of loop</a> to read the values of an iterable just like in <a href="https://devapt.com/javascript-set-weakset" target="_blank" rel="noopener">JS sets</a>.&nbsp;</p>
<pre class="language-javascript"><code>// Iterating from the previous map object
for(const item of items) {
  console.log(item);
}
// Logs:
// [{name: "John"}, "person"]
// [1, "number"]
// [true, "boolean"]
// ["color", "red"]</code></pre>
<h3>get() method</h3>
<pre class="language-javascript"><code>const letters = new Map([['a', 1], ['b', 2], [3, 'c'], [4, 'd']]);
letters.get('a'); // 1
letters.get(4); // d</code></pre>
<h3>has() method</h3>
<pre class="language-javascript"><code>const letters = new Map([['a', 1], ['b', 2], [3, 'c'], [4, 'd']]);

// Checks if the key exists in the map element and returns a boolean
letters.has(5); // false
letters.has(4); // true</code></pre>
<h3>delete() method</h3>
<pre class="language-javascript"><code>const letters = new Map([['a', 1], ['b', 2], [3, 'c'], [4, 'd']]);

// Deletes the map element if the given key exists
letters.delete('b');
console.log(letters.size); // 3
</code></pre>
<h3>clear() method</h3>
<pre class="language-javascript"><code>const letters = new Map([['a', 1], ['b', 2], [3, 'c'], [4, 'd']]);

// Clears or deletes all the elements in the map
letters.clear();
console.log(letters.size); // 0</code></pre>
<h3>keys() method</h3>
<pre class="language-javascript"><code>const letters = new Map([['a', 1], ['b', 2], [3, 'c'], [4, 'd']]);

// map.key() method returns key of every map element
for(const key of letters.keys()) {
  console.log(key);
}
// Logs: a, b, 3, 4</code></pre>
<h3>values() method</h3>
<pre class="language-javascript"><code>const letters = new Map([['a', 1], ['b', 2], [3, 'c'], [4, 'd']]);

// map.values() returns the value of each map element
for(const value of letters.values()) {
  console.log(value);
}
// Logs: 1, 2, c, d</code></pre>
<h3>entries() method</h3>
<p>The&nbsp; <code>entries()</code> method is similar to the <code>Object.entries()</code>, where it returns keys and values of an object as an array of <code>[key, value]</code> arrays. Similarly in the case of map <code>entries()</code> method, an iterator with <code>[key, value]</code> arrays is returned for every element in the map, instead of an array.</p>
<pre class="language-javascript"><code>const letters = new Map([['a', 1], ['b', 2], [3, 'c'], [4, 'd']]);

for(const letter of letters.entries()) {
  console.log(letter);
}

// Logs: ["a", 1], ["b", 2], [3, "c"], [4, "d"]</code></pre>
<h3>forEach() method</h3>
<p>The map <code>forEach</code> method works the same as the <code>forEach</code> method on arrays. It allows running a callback function on every element of the map. The first two arguments of the callback function gives value and key of the current element.&nbsp; &nbsp;</p>
<pre class="language-javascript"><code>const letters = new Map([['a', 1], ['b', 2], [3, 'c'], [4, 'd']]);

letters.forEach((value, key) =&gt; console.log(key, value));
// Logs: a 1, b 2, 3 c, 4 d</code></pre>
<h3>size property</h3>
<p>The size property of a <code>Map</code> instance returns the total number of elements(key-value pairs) present in the map, nothing but the length of the map. This property is not available on a normal object created using <code>{}</code>.</p>
<pre class="language-javascript"><code>const letters = new Map([['a', 1], ['b', 2], [3, 'c'], [4, 'd']]);

console.log(letters.size); // 4</code></pre>
<p>So far we've seen different ways to iterate the map object. Let's see all together once.</p>
<h2 style="text-align: center;">Different ways to iterate maps</h2>
<pre class="language-javascript"><code>const letters = new Map([['a', 1], ['b', 2], [3, 'c'], [4, 'd']]);

for(const [key, value] of letters) console.log(key, value); 
for(const [key, value] of letters.entries()) console.log(key, value);
letters.forEach((value, key) =&gt; console.log(key, value)); 
// Above three iterations log the same result

for(const key of letters.keys()) console.log(key); // Logs: keys 
for(const value of letters.values()) console.log(value); // Logs: values</code></pre>
<h2 style="text-align: center;">JS maps from JS objects</h2>
<p>A JS map can be created from JS objects by converting them to arrays and vice versa.</p>
<pre class="language-javascript"><code>// From object to map
const obj = {
  a: 1, 
  b: 2, 
  c: 3, 
  d: 4
}
const mapObj = new Map(Object.entries(obj));
for(const element of mapObj) console.log(element); 
// Logs: ["a", 1], ["b", 2], ["c", 3], ["d", 4]

// From map to object
const objFromMap = Object.fromEntries(mapObj);
console.log(objFromMap); 
// Logs: {a: 1, b: 2, c: 3, d: 4}</code></pre>
<h2 style="text-align: center;">When and where to use JS map object?</h2>
<p>A map is a collection of elements(key-value pairs) and the elements can be iterated in the order of their insertion.</p>
<h3>A map can be used</h3>
<h4>1. To preserve the order of the key-value pairs</h4>
<p>The order of the key-value pairs is not guaranteed in the object created using <code>{}</code> but javscript map object has definite order of the insertion of elements.&nbsp;</p>
<h4>2. To get good performance in frequent addition and removal of key-value pairs</h4>
<p>Objects created using <code>{}</code> or <code>Object</code> are not optimized for frequent addition and deletion of key-value pairs. So in such cases using JS maps can give good performance.</p>
<p>There's a special case of JS maps called WeakMap, let's have a glimpse at it.</p>
<h2 style="text-align: center;">What is a weak map in Javascript?</h2>
<p>A weakmap is similar to the map in Javascript but with limitations on the key data types and the methods, it can have.</p>
<p>Unlike map, weakmap can contain only the objects as keys and values can be of any data type. And only <code>set()</code>, <code>get()</code>, <code>has()</code>, <code>delete()</code> methods are available on a <code>WeakMap</code> instance. No iterative methods can be applied on weak maps, including, <code>forEach</code> etc.</p>
<pre class="language-javascript"><code>const colors = new WeakMap();
const green = { name: 'green'};
const greenHex = { hex: '#00FF00'}
const red = { name: 'red'};
colors.set(green, greenHex);
colors.set(red, '#FF0000');
console.log(colors.has(red)); // true
colors.delete(red);
console.log(colors.has(red)); // false

// Try adding a string key or any other data type except object to the weakmap
colors.set('blue', '#0000FF'); // Throws an error
</code></pre>
<blockquote>
<p>A weakmap is called so because of the weak references to the data(objects) it contains. When the reference to the objects is lost, they get garbage collected.</p>
</blockquote>
<pre class="language-javascript"><code>let a = { index: 1 };
let b = { index: 2 };

const wMap = new WeakMap();

wMap.set(a, 'one');
wMap.set(b, 'two');
console.log(wMap.has(a)); // true
console.log(wMap.has(b)); // true
a = null; // removing the reference for { index: 1 } 
console.log(wMap.has(a)); // false</code></pre>
<p>WeakMap, similar to WeakSet is mainly used as additional storage of data for objects that are stored or managed from another location.&nbsp;</p>
<p>That was a quick look at weak maps and overall the maps in Javascript.</p>

Javascript map is a collection of key-value pairs of any data type. Learn more about JS maps, their methods and differences between maps and weakmaps.

Posts tagged with Map

What is a JavaScript map? Difference b/w JS map & weakmap