Thursday, July 19, 2018

Javascript Map Object tutorials with examples

Learn javascript map object
The map is the object used to hold key and value pairs. Key and values can container either primitive types and custom data types. The reason for storing data in the map is key can be of any type.

Object Declaration syntax 

Map object can be created using the empty constructor or parameterized constructor.
new Map(parameters)
new Map()using Map() constructor, we can create an empty map.
Parameters in the constructor are optional which holds arrays of objects or iterable objects whose format should be key and value pairs

Object Declaration examples 

Map can store all primitive type including NaN and Undefined in key and values

Empty Map Constructor
var mapVariable = new Map();
mapVariable.set('key1', 'value1')
mapVariable.set('key2','value2')
console.log(mapVariable.size) // outputs 2
console.log(mapVariable.get('key1'));    // returns value1 of key1

var x = new Map([['1', 'Emp1'], ['2', 'Emp2']);

console.log(x.size);
x.set('3', 'Emp3');
console.log(x.size);

var mapArray = new Map([['1', 'Emp1'], ['2', 'Emp2']]);
console.log(mapArray.size); // returns 2
mapArray.set('3', 'Emp3');
console.log(mapArray.size);  // returns 3
console.log(mapArray.get('1')); // returns Emp1 
console.log(mapArray.set('1', 'kiran')); //setting Employee object
console.log(mapArray.get('1')); // returns Emp1 
console.log(mapArray.size);  // returns 3

Map object extends from Map.Prototype global object. so all the methods in Map.prototype are available in map object So we will see important map methods with examples below.

Object Properties

Map.size returns the size of the map object i.e Count of data(key+value)
Frequently used Methods 
We will see the basic methods with examples and explanations.

The clear() method 

This method removes key and values from a map Syntax and example.
 Syntax is clear();
var clearMethodTest = new Map();
clearMethodTest.set(1,'test')
console.log(clearMethodTest.size); // returns 1
clearMethodTest.clear();
console.log(clearMethodTest.size); // returns 0

delete() method

This methods outputs
true - if the key exists and removed key and corresponding value from the map false - if key not exist.

Syntax  and Example 

delete(key:object): Boolean
var mapArray = new Map([['1', 'Emp1'], ['2', 'Emp2']]);
console.log(mapArray.size); // returns 2
mapArray.set('3', 'Emp3');
console.log( mapArray.size); // returns 3 with initial size
console.log(mapArray.delete('1'));// returns true as key 1 exist and deleted
console.log(mapArray.size); // return 2  after deleted key
console.log(mapArray.get('1')); // returns undefined as there is no key exist

Entries() method 

Entries method returns a new iterator object which contains key and value pair and map entries retrieved in insertion order

syntax & Examples

entries(): Iterator
return Iterator of arrays with key and values
var mapArray = new Map([['1', 'Emp1'], ['2', 'Emp2']]);
console.log(mapArray.size); // returns 2
mapArray.set('3', 'Emp3');
var iterator1 = mapArray.entries();
console.log(iterator1.next().value); // output: ["1", "Emp1"]
console.log(iterator1.next().value); // output: ["2", "Emp2"]
console.log(iterator1.next().value); // output: ["3", "Emp3"]
console.log(iterator1.next().value); // output: undefined

forEach Method

It is to iterate the objects of the map.
Syntax and exam
myMap.forEach(callbackFunction{, optional arguments})
the callback function will be called on key and value of each iterated arguments Arguments are optional
var mapArray = new Map([['1', 'Emp1'], ['2', 'Emp2']]);
console.log(mapArray.size); // returns 2
mapArray.set('3', 'Emp3');
mapArray.forEach(function (value, key) { 
        console.log(key+':'+value);
}
output is
1:Emp1
2:Emp2
3:Emp3

get/set/has methods 

get(key) method returns value for a given key of a Map, undefined returned if key does not exist.
set(key,value) - save the value for the given key, if key not exists, create a new key and value.
 has(key)- return true if the key exists in the map, return false if a key does not exist in the map.
Example
var mapArray = new Map([['1', 'Emp1'], ['2', 'Emp2']]);
console.log(mapArray.size); // returns 2
mapArray.set('3', 'Emp3');
 console.log(mapArray.get('1'));  // returns Emp1
 console.log(mapArray.set('1','New Emp'));  // saves new value for key 1 and return new Map 
 console.log(mapArray.get('1')); // returns Emp1
 console.log(mapArray.has('1'));  // returns true
console.log(mapArray.has('15'));  // returns false

keys() values() method 

keys() returns iterator objects with keys values() returns iterator object with values

var mapArray = new Map([['1', 'Emp1'], ['2', 'Emp2']]);
var mapArray = new Map([['1', 'Emp1'], ['2', 'Emp2']]);
console.log(mapArray.size); // returns 2
mapArray.set('3', 'Emp3');
var keys = mapArray.keys();
console.dir(keys.next()); // returns { value: '1', done: false }
console.dir(keys.next()); // returns { value: '2', done: false }
console.dir(keys.next()); // returns { value: '3', done: false }
console.dir(keys.next()); // returns { value: 'undefined', done: true }
var keys = mapArray.values();
console.dir(keys.next()); // returns { value: 'Emp1', done: false }
console.dir(keys.next()); // returns { value: 'Emp2', done: false }
console.dir(keys.next()); // returns { value: 'Emp3', done: false }
console.dir(keys.next()); // returns { value: 'undefined', done: true }
Next, we will see some of the example use cases of Map object

How to convert Map to Object in javascript?

There are a number of ways to convert to ObjectOne easiest way is to use forEach iteration of Map

const sourceMap = new Map();
sourceMap.set("booleanKey", true);
sourceMap.set("arrayKey", [{a:1}, {b:2}, {c:3}]);
sourceMap.set("stringKey", '129');
const plainObject = {};
sourceMap.forEach(function (value, key) {
    plainObject[key] = sourceMap.get(key);
});
console.log(plainObject);

Clone of map object in javascript

Copy of a map can be done by the creation of a new map object with the parameter. Create a Map object like below
var newMap1 = new Map(originalMap)
Add data to map dynamically
Data will be added to the map by calling map constructor with array/iterable of objects. you can add dynamically by using a set method of the object.
var dynamicMap=new Map();
dynamicMap.set('newkey', 'newvalues');

Convert Map object to JSON object.

use cases like map object to JSON or JSON to map object occurs during application development. Use JSON.stringfy() will convert to JSON object

mapArray.forEach(function(val,key){
var tempObj={};
tempObj[key]=val;
jsonObj.push(tempObj)
})
console.log(jsonObj)
console.log(JSON.stringify(jsonObj));
That's all my understanding on the javascript map object. I will document advanced Map examples in future articles