A Simple Introduction to the ES6 Map Data Structure in JavaScript
By: Javascript Jeep
Tags: Javascript Tips, Maps, JavaScript, Javascript Tricks, Web Development

A Map is a collection of key🔑 — value pairs, similar to an object. It stores the key🔑 — value pairs in the insertion order.

We can create a Map by passing an iterable object whose elements are in the form of key🔑 — value (Eg. [ [1,”one”], [2,”two”] ] ), or you can create an empty Map , then insert entries.

Why we need Map if we have Object s

A Map is similar to Object, but any value can be used as key in maps, but keys in objects are only Strings and Symbols

2. The key🔑 — value pairs in Map maintains the insertion order, whereas Object don’t.

3. You can get the size of the Map , but we don’t have a built-in method to get size in Object (but we can do it manually).

4. Maps are iterable, whereas an Object is not iterable by-default.

5. Maps have additional methods not available to normal objects

Methods in Maps

Map cheatsheet

Example:

Different Ways to create maps

2. Map methods

Let’s create simple Map:

// creating a map

var fruits = new Map(); fruits.set('🍎', "Apple"); fruits.set('🍋', "Mango"); fruits; //{"🍎" => "Apple", "🍋" => "Mango"}

Map has a property size which returns the current Map size (total number of entries).

// size fruits.size; // 2

set(🔑, value) → Set the value for the key in the Map and returns the Map. If the key is already present in the map, then the value is overwritten.

// set(key , value) method fruits.set( '🍇', "Grapes"); fruits; // {"🍎" => "Apple", "🍋" => "Mango", "🍇" => "Grapes"}

get(🔑) → Returns the value associated to the key, or returns undefined if there is no key on the Map that matches the passed key.

// get(key)

fruits.get('🍇'); // GRAPES. fruits.get('🍊'); //undefined.

delete(🔑) → Delete the entry matching the key and returns true. If the key is not found in the map, then it returns false.

// delete(key) fruits.delete('🍊') //false fruits.delete('🍇'); // true

has(🔑) → Returns true if the map has the key provided, else return false.

//HAS(key) fruits.has('🍇'); // true fruits.has('🍊'); //false

keys() → Returns a new iterator that contains the keys in insertion order.

//keys fruits.keys() // MapIterator {"🍎", "🍋"}

values() → Returns a new iterator that contains the values in insertion order.

// values fruits.values() // MapIterator {"Apple", "Mango"}

entries() → Returns an iterator which has an array of [🔑-value] pair in insertion order.

//entries --> returns key value pair fruits.entries() // MapIterator {"🍎" => "Apple", "🍋" => "Mango"}

clear() → Delete all key🔑-value pairs from the Map.

// clear fruits.clear(); // deletes all element fruits; // Map(0) {}

Things you should know about Map

You can use any value (object or function or primitive ) as a key in the Map . Map uses the SameValueZero algorithm. It is similar to strict equality ( === ) but the difference is that NaN is considered equal to NaN (i.e, NaN === NaN → true. In normal JS, this is not true. In this case NaN can be used as key and we don’t have any duplicate NaN).

var map = new Map() var obj = {}; var arr = []; var nan = NaN; var fun = function() {} map.set(obj, "object"); map.set(arr , "array"); map.set(fun, "function"); map.set(nan, "Wrong number"); map.keys(); // MapIterator {{…}, Array(0), ƒ, NaN} map.values(); // MapIterator {"object", "array", "function","Wrong number"}

Iterating through Map

Using for…of

// creating a map

var fruits = new Map(); fruits.set('🍎', "Apple"); fruits.set('🍋', "Mango"); fruits; //{"🍎" => "Apple", "🍋" => "Mango"} -------------------------------------------------------------------- //Method 1: for(var [key, val] of fruits) { console.log(key, value); }

🍎 Apple

🍋 Mango -------------------------------------------------------------------- Method 4 --> using entries for (var [key, val] of fruits.entries()) { console.log(key , val); } 🍎 Apple

🍋 Mango --------------------------------------------------------------------

// Method 2 --> using keys for(var key of fruits.keys()) { console.log(key, fruits.get(key)); }

🍎 Apple

🍋 Mango

--------------------------------------------------------------------

Method 3 --> using values for(var val of fruits.values()) { console.log(val); } Apple

Mango

If you find this helpful surprise 🎁 me here.

Share if you feel happy.

Follow Javascript Jeep🚙 if you feel worthy.