JavaScript Map

Map is combination of key and value pair. Here key can be a primitive data type value or any other object. Map is generally a data structure in Javascript.

new Map()
new Map([iterable])

//Create an empty map
let firstMap = new Map();
//Initialize a map with element
//Using array of [key, value] pairs
let secondMap = new Map([
    ['Fruit',"Mango"],
    ["Error",404],
    [true,"Instruction"]
  ]);
console.log(firstMap);
console.log(secondMap);

Map {}
Map { 'Fruit' => 'Mango', 'Error' => 404, true => 'Instruction' }

That is basic methods which are create a map. You'll can also use Object.entries(). Which is returning an array that is combination of key value pairs.

//Create a map using Object.entries
let map = new Map(Object.entries({
  code:"JavaScript",
  error:"Missing value",
  browser:"Chrome"  ,
}));
console.log(map);

Map {
  'code' => 'JavaScript',
  'error' => 'Missing value',
  'browser' => 'Chrome' }

Map method and properties

map.set(key,value)

This method are used to add a element in map. When given key value are already exist in map. In this situation this method are modified new value to existing key.

//Create a map
let map = new Map([["Project","007"]]);
console.log(map);

//Add a new element
map.set("User","Admin");
console.log(map);

//Modified User key value
map.set("User","Manager");
console.log(map);

Map { 'Project' => '007' }
Map { 'Project' => '007', 'User' => 'Admin' }
Map { 'Project' => '007', 'User' => 'Manager' }

map.get(key)

That is an simplest method which are return map element value by using of particular key. When key are not exist then this method are return undefined value.

//Create an empty map
let map = new Map([["Project","007"]]);

console.log("Project : ",map.get("Project"));
console.log("Project : ",map.get("secretProject"));

Project :  007
Project :  undefined

map.has(key)

This method are used to check given map key element are exist or not exist. When element is exist (found) then its returns a boolean true value, otherwise return false value.

//Create a map called company
let company = new Map([
  ["Tester","100"],
  ["Programmer","10000"],
  ["Client","100000"]
]);
//Check existence using has() method
console.log("Client is Exist ? ",company.has("Client"));

console.log("Programmer is Exist ? ",company.has("Programmer"));

console.log("Partner is Exist ? ",company.has("Partner"));

Client is Exist ?  true
Programmer is Exist ?  true
Partner is Exist ?  false

map.delete(key)

This method are used to delete an element of map. This operation is based on a map key value, when key is existed, Then in this case this method are delete that element. Otherwise this method not remove any element.

//Create a map
let company = new Map([
  ["Tester","100"],
  ["Programmer","10000"],
  ["Client","100000"],
  ["Partner","5"],
  ["Manager","10"]
]);

console.log("Before : ",company);

company.delete("Partner");

console.log("When Remove Partner :",company);

Before :  Map {
  'Tester' => '100',
  'Programmer' => '10000',
  'Client' => '100000',
  'Partner' => '5',
  'Manager' => '10' }
When Remove Partner : Map {
  'Tester' => '100',
  'Programmer' => '10000',
  'Client' => '100000',
  'Manager' => '10' }

map.size

size are return the value of number of existing elements in map.

//Create a map
let documents = new Map([
  ["File","100"],
  ["Books","10"],
  ["Images","50"],
]);

console.log("Size : ",documents.size);

Size :  3

map.clear()

This method are remove all element in existing map.

//Create a map
let documents = new Map([
  ["File","100"],
  ["Books","10"],
  ["Images","50"],
]);

console.log("Before : ",documents);

documents.clear(); //remove all element

console.log("After : ",documents);

Before :  Map { 'File' => '100', 'Books' => '10', 'Images' => '50' }
After :  Map {}

Iterating over a map

There are three ways to iterate map elements. By using key and value pair, by using key and by using values. Basically there are three method which are used to iterate map element. map.entries(), map.keys() and map.values().

//Create a map
let documents = new Map([
  ["File",100],
  ["Books",10],
  ["Images",50],
  ["EBook",30]
]);

console.log("Entries : ",documents.entries());
console.log("Keys : ",documents.keys());
console.log("Values : ",documents.values());

Entries :  MapIterator {
  [ 'File', 100 ],
  [ 'Books', 10 ],
  [ 'Images', 50 ],
  [ 'EBook', 30 ] }
Keys :  MapIterator { 'File', 'Books', 'Images', 'EBook' }
Values :  MapIterator { 100, 10, 50, 30 }

If you are understand the format of that returning value then you'll can get those element value by any loop. Let's seen an example to iterate map element by for-loop.

//Create a map
let documents = new Map([
  ["File",100],
  ["Books",10],
  ["Images",50],
  ["EBook",30]
]);
//Get key value pair
for(let [key,value] of documents.entries()){

  console.log("Key : ",key," Values :",value);
}
//Get all keys
for(let key of documents.keys()){
  console.log("Key : ",key);

}
//Get all keys values
for(let key of documents.values()){
  console.log("Value : ",key);
}

Key :  File  Values : 100
Key :  Books  Values : 10
Key :  Images  Values : 50
Key :  EBook  Values : 30
Key :  File
Key :  Books
Key :  Images
Key :  EBook
Value :  100
Value :  10
Value :  50
Value :  30

In case when you'll are try to retrieves map element by while loop. Then first you'll are need to convert map element into an array.Array.from() are used to convert MapIterator into an array. For example.

//Create a map
let map = new Map([
  ["File",100],
  ["Books",10],
  ["Images",50],
  ["EBook",30]
]);

var index=0;
var entries=Array.from(map.entries());
while(entries.length>index){
  console.log("Key : " ,entries[index][0],"  Value :",entries[index][1]);
  index++;
}

index=0;
var key=Array.from(map.keys());

while(key.length>index){
  console.log("Key  : ",key[index]);
  index++;
}

index=0;
var value=Array.from(map.values());
while(value.length>index){
  console.log("Value : " ,value[index]);
  index++;
}

Key :  File   Value : 100
Key :  Books   Value : 10
Key :  Images   Value : 50
Key :  EBook   Value : 30
Key  :  File
Key  :  Books
Key  :  Images
Key  :  EBook
Value :  100
Value :  10
Value :  50
Value :  30

WeakMap

Weakmap is type of map which contain key and value pairs. In this map, key can be form of an object or an arbitrary values.

new WeakMap()
new WeakMap([iterable])

Here iterable is form of an array or can be form of other, iterable objects.

//Create a empty weakmap
var weakMap = new WeakMap();

//Make objects
var first = {};
var second = function() {};

//make object as key
weakMap.set(first, 1000);
weakMap.set(second, 'Grow Level');

//Display map value by using key object
console.log(weakMap.get(first));
console.log(weakMap.get(second));

1000
Grow Level