Skip to content
Related Articles

Related Articles

Improve Article

Map in JavaScript

  • Difficulty Level : Easy
  • Last Updated : 21 Jul, 2021

In this article we would be discussing Map object provided by ES6. Map is a collection of elements where each element is stored as a Key, value pair. Map object can hold both objects and primitive values as either key or value. When we iterate over the map object it returns the key,value pair in the same order as inserted.
Syntax: 
 

new Map([it])

Parameter:
it - It is any iterable object whose values are stored as 
     key, value pair,
     If the parameter is not specified then a new map is created 
     is Empty

Returns:
A new Map object

Now lets create some Map using the Map object 
 

Java




// map1 contains 
// 1 => 2
// 2 => 3
// 4 -> 5
var map1 = new Map([[1 , 2], [2 ,3 ] ,[4, 5]]);
  
console.log("Map1");
console.log(map1);
  
// map2 contains 
// firstname => sumit
// lastname => ghosh
// website => geeksforgeeks 
var map2 = new Map([["firstname" ,"sumit"], 
        ["lastname", "ghosh"], ["website", "geeksforgeeks"]]);
  
console.log("Map2");
console.log(map2);
  
  
// map3 contains
// Whole number => [1, 2, 3, 4]
// Decimal number => [1.1, 1.2, 1.3, 1.4]
// Negative number => [-1, -2, -3, -4]
var map3 = new Map([["whole numbers", [1 ,2 ,3 ,4]],
            ["Decimal numbers" , [1.1, 1.2, 1.3, 1.4]],
            ["negative numbers", [-1, -2, -3, -4]]]);
  
console.log("Map3");
console.log(map3);
  
  
// map 4 contains 
// storing arrays both as key and value
// "first name ", "Last name" => "sumit", "ghosh"
// "friend 1", "sourav" => "friend 2", "gourav"
var map4 = new Map([[["first name", "last name"],
            ["sumit", "ghosh"]],
            [["friend 1", "friend 2"],
            ["sourav","gourav"]]]);
  
console.log("Map4");
console.log(map4);

Output: 
 

Output_1_1



 

Ouput_1_2

Propertise: 
Map.prototype.size – It returns the number of elements or the key-value pairs in the map. 
Methods: 
 

  1. Map.prototype.set() – It adds the key and value to the Map Object. 
    Syntax: 
     
map1.set(k, v);

Parameters:
k - Key of the element to be added to the Map
v - value of the element to be added to the Map

Returns:
It returns a Map object
  1. Map.prototype.has() – It return a boolean value depending on whether the specified key is present or not 
    Syntax: 
     
map1.has(k);

Parameters:
k - Key of the element to checked 

Returns:
true if the element with the specified key is present 
or else returns false. 
  1. Map.prototype.get() – It returns the value of the corresponding key 
    Syntax: 
     
map1.get(k);

Parameters:
k - Key, whose value is to be returned

Returns:
The value associated with the key, if it is present 
in Map, otherwise returns undefined
  1. Map.prototype.delete() – It delete’s both the key as well as a value from the map. 
    Syntax: 
     
map1.delete(k);

Parameters:
k - Key which is to be deleted from the map 

Returns:
true if the value is found and deleted from 
the map otherwise, it returns false
  1. Map.prototype.clear() – Removes all the elements from the Map object 
    Syntax: 
     
map1.clear();

Parameters:
No parameters

Returns:
undefined
  1. Lets use all the methods described above: 
    Example: 
     

Java




// Using Map.prototype.set(k, v)
// creating an empty map
var map1 = new Map();
  
// adding some elements to the map 
map1.set("first name", "sumit");
map1.set("last name", "ghosh");
map1.set("website", "geeksforgeeks")
    .set("friend 1","gourav")
    .set("friend 2","sourav");
  
// map1 contains 
// "first name" => "sumit"
// "last name" => "ghosh"
// "website" => "geeksforgeeks"
// "friend 1" => "gourav"
// "friend 2" => "sourav"
console.log(map1);
      
// Using Map.prototype.has(k)
  
// retuns true
console.log("map1 has website ? "
                    map1.has("website"));
  
// return false
console.log("map1 has firend 3 ? "
                    map1.has("friend 3"));
      
  
// Using Map.prototype.get(k)
  
// returns geeksforgeeks
console.log("get value for key website "+
                    map1.get("website"));
  
// returns undefined
console.log("get value for key friend 3 "+
                    map1.get("friend 3"));
  
// Using Map.prototype.delete(k)
  
// removes key "website" and its value from 
// the map 
// it prints the value of the key
console.log("delete element with key website " 
                    + map1.delete("website"));
      
// as the value is deleted from 
// the map hence it returns false
console.log("map1 has website ? "
                    map1.has("website"));
  
// returns false as this key is not in the list
console.log("delete element with key website " +
                    map1.delete("friend 3"));
  
  
// Using Map.prototype.clear()
// removing all values from map1 
map1.clear();
  
// map1 is empty
console.log(map1);
  1. Output: 
     

Output_2

  1. Map.prototype.entries() – It returns an iterator object that contains key/value pair for each element present in the Map object. 
    Syntax: 
     
map1.entries();

Parameters:
No parameters

Returns:
It returns an iterator object 
  1. Map.prototype.keys() – It returns an iterator object which contains all the keys present in the Map Object. 
    Syntax: 
     
map1.keys();

Parameters:
No parameter

Returns:
An iterator object 
  1. Map.prototype.values() – It returns an iterator object which contains all the values present in the Map Object. 
    Syntax: 
     
map1.values();

Parameters:
No parameter

Returns: 
An iterator object 
  1. Lets use all the methods described above: 
    Example: 
     

Java




// creating an empty map
var map1 = new Map();
  
// adding some elements to the map 
map1.set("first name", "sumit");
map1.set("last name", "ghosh");
map1.set("website", "geeksforgeeks")
    .set("friend 1","gourav")
    .set("friend 2","sourav");
  
  
// Using Map.prototype.entries()
  
// getting all the entries of the map
var get_entries = map1.entries();
  
  
// it prints
// ["first name", "sumit"]
// ["last name", "ghosh"]
// ["website", "geeksforgeeks"]
// ["friend 1", "gourav"]
// ["friend 2", "sourav"]
console.log("----------entries---------");
for(var ele of get_entries)
console.log(ele);
  
// Using Map.prototype.keys()
  
// getting all the keys of the map 
var get_keys = map1.keys();
  
// it prints
// "first name", "last name", 
// "website", "friend 1", "friend 2"
console.log("--------keys----------");
for(var ele of get_keys)
console.log(ele);
  
// Using Map.prototype.values()
  
// getting all the values of the map
var get_values = map1.values();
  
// it prints all the values
// "sumit", "ghosh", "geeksforgeeks"
// "gourav", "sourav"
console.log("----------values------------");
for(var ele of get_values)
console.log(ele);
  1. Output: 
     

Output_3

  1. Map.prototype.forEach() – It executes the callback function once for each key/value pair in the Map, in the insertion order. 
    Syntax: 
     
map1.forEach(callback[, thisArgument]);

Parameters:
callback - It is a function which is to be executed for each element of the Map.
thisargument - Value to be used as this when executing the callback.

Returns:
undefined
  1. The callback function is provided with three parameters as follows: 
    • the element key
    • the element value
    • the Map object to be traversed
  2. Map.prototype[@@iterator]() – It returns an Map iterator function which is entries() method of Map object by default. 
    Syntax: 
     
map1[Symbol.iterator]

Parameters:
No parameters

Returns:
Returns an map iterator object and it is 
entries() by default
  1. Example: 
     

Java




// using Map.prototype[@@iterator]()
// creating an empty map
var map1 = new Map();
  
// adding some elements to the map 
map1.set("first name", "sumit");
map1.set("last name", "ghosh");
map1.set("website", "geeksforgeeks")
    .set("friend 1", "gourav")
    .set("friend 2", "sourav");
  
// By default this method returns the 
// same iterator object return by entires methods
var getit = map1[Symbol.iterator]();
  
// it prints
// ["first name", "sumit"]
// ["last name", "ghosh"]
// ["website", "geeksforgeeks"]
// ["friend 1", "gourav"]
// ["friend 2", "sourav"]
for(var elem of getit)
    console.log(elem);
  1. Output: 
     

Output_5

  1. Note:- We can create a user define iterable rather than using the default one.

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.




My Personal Notes arrow_drop_up
Recommended Articles
Page :