Javascript Maps

Maps

JavaScript Map are another data structures introduced in ES6 used to store key-value paired data. Map are similar to Hashes, Hash Tables or Dictionaries in other programmings languages.

A Map holds key-value pairs where the keys can be any datatype. A Map remembers the original insertion order of the keys. A Map has size property that represents the size of the map.

new Map()

const m1=new Map();                         // empty Map
m1.set(0,"zero");
m1.set("age",30);

Map Vs Object

Although both Objects and Maps are data structures used to store key-value paired data, but they have different functionalities in usage. Here is difference between Map and Objects.

Add data in Map using Map

How to add data in Map? JavaScript Map use set() method to add new data. Unlike Objects, we cannot use dot or brackets notations to add data.

 
      const user=new Map();
      user.set("name","lorem");
  
      console.log(user);
  

Use multiple set

      const user=new Map(); 
      user.set("name","lorem").set(2,"two");
  
      console.log(user);
  

Map returns the value showing the key followed by hash rocket symbol, i.e (=>)

Size

Size property is used to check the size of Map. This is most efficient wat to calculate size, as compared to Objects.

Objects doesn't have any direct way to check length or size. We use Object.Entries to convert Object to Array and then calculate length of Array, which is very inefficient way.

    const user=new Map(); 
    user.set("name","lorem").set(2,"two");

    console.log(user.size);
  

has()

The has method checks is a given key is available in Map or not. It returns boolean value true of false.

Map has method is very fast and efficient when compared with Object.

    const user=new Map(); 
    user.set("name","lorem").set(2,"two");
      
  console.log(user.has(2));
  console.log(user.has("name"));
  console.log(user.has("age"));
  

delete from Map

delete method is used to remove key value from Map. This will return boolean true if the value was removed else false if value was not removed.

    const user=new Map(); 
    user.set("name","lorem").set(2,"two");
  
  user.delete(2);                    // true
  user.delete(3);                    // false
  
  

delete all values using clear

  const user=new Map(); 
  user.set("name","lorem").set(2,"two");
      
  user.clear();                    
      
  console.log(user);
  

iterate Map

To iterate Map in javascript, we can use forEach or for of loop.

Since Objects are not iterables using for of loop, we use for in loop to iterate Objects in JavaScript.

forEach in Map

    const user=new Map(); 
    user.set("name","lorem").set(2,"two");
  
    user.forEach(i=>console.log(i));
  

for of loop in Map

    const user=new Map(); 
    user.set("name","lorem").set(2,"two");
  
      for( let i of user){
          console.log(i);
      }
  

Map to Array

Convert Array to Set is easily done by using Array.from() method or by using spread operator.

using Array.from()

    const user=new Map(); 
    user.set("name","lorem").set(2,"two");
  
    const y=Array.from(x);
  
    console.log(y);
  

using Spread Operator

    const user=new Map(); 
    user.set("name","lorem").set(2,"two");
  
    const y=[...x];
  
    console.log(y);
  

WeakMap

Maps can be converted to Array. But if Map key value are changes or removed, they are still present in Array. The same thing happens with Sets.

The elements in Maps are not Garbage Collected causing Memory Leak.

    const user=new Map(); 
    user.set("name","lorem").set(2,"two");
  
    const y=new Array(...user);
  
    y.length=0;                     
  
    console.log(y);
    console.log(x);
      
  

Using WeekMap

WeekMap are introduced to handle this situation by Garbage Collecting and reference. If the original reference is changed or removed, the WeekMap value will also change.

To add values in WeekMap, use set() with key value parameters. The value must be window, object or function.

    const user=new WeekMap(); 
    user.set(window,"a");
          
    const y=new Array(...user);
  
    y.length=0;                     
  
    console.log(y);
    console.log(x);