A Simple Introduction to the ES6 Map Data Structure in JavaScript

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

1. 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

Example:

1. 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.