JavaScript Map Object

A JavaScript Map object is a collection of key-value pairs, either/both of which can be of primitive or object data type.

js map

A Map object in JavaScript is defined with the new keyword. 

				
					var colours = new Map();

A key for a value can be set using the set() method. Here we set the key red for the value #ff0000. 

				
					colours.set('red','#ff0000');
js map set get

To get a value associated with a key, we use the get() method. 

				
				colours.get('red');

The size property returns the number of key/value pairs in the Map object. 

				
				colours.size; // 1

The has() method checks the key's presence in the Map. It returns a Boolean value. 

				
				colours.has('red'); // true

If you want to remove a particular entry, use the delete() method, and pass the entry's key as an argument. 

				
				colours.delete('red');

check the elements in it .. 

				
				colours.size; // 0

remove all entries 

				
				colours.clear();

We can also use arrays and literal objects as keys while setting 

				
					colours.set(['red'],'#ff0000');
					colours.set({'red': 'red'},'#ff0000');

but accessing them with the get() method as they are without referencing to some ... will not return the above assigned values. 

				
					colours.get(['red']); // undefined
					colours.get({'red': 'red'}); // undefined

works similar to the Object.is() method. On comparing an empty array with an empty array, it returns false. It returns false even on arrays containing the same element(s). 

				
					Object.is([],[]); // false
					Object.is(['red'],['red']); // false

But if the array or object is assigned to some variable and compared, it will return true. 

				
					var empty = [];
					var red = ['red'];
					Object.is(empty, empty); // true
					Object.is(red, red); // true

Both get(['red']) and get({'red': 'red'}) will return undefined as they reference to different 

				
					colours.get(['red']); // undefined
					colours.get({'red': 'red'}); // undefined

.... 

				
					var r = ['red'];
					colours.set(r,'#ff0000');
					colours.get(r); // #ff0000

... 

				
					var r = {'red': 'red'};
					colours.set(r, '#ff0000');
					colours.get(r); // #ff0000

Cloning

for...of returns the value 2 

					
					let c = {
						'red': '#ff0000'
					};

					var colours = new Map();

					var clone = new Map(original);

Iteration

for...of returns the value 2 

					
					var colours = new Map();
					colours.set('red','#ff0000');
					colours.set(['blue'],'#00ff00');
					colours.set({'yellow':''}, '#ffff00');

key value 

					
					for (var [key, value] of colours) {
					  console.log(key + ': ' + value);
					}

entries 

					
					for (var [key, value] of colours.entries()) {
					  console.log(key + ': ' + value);
					}

key 

					
					for (var key of colours.keys()) {
					  console.log(key);
					}

value 

					
					for (var value of colours.values()) {
					  console.log(value);
					}

forEach 

					
						colours.forEach(function(value, key) {
						  console.log(key + ' = ' + value);
						});

Converting Arrays into Maps, Maps into Arrays

You can use the regular Map constructor to transform a two-dimensional (2D) key-value Array into a Map. The colours array here is a two-dimensional array. The toHex variable is instantiated 

					
					var colours = [['red', '#ff0000'], ['yellow', '#ffff00']];

					var toHex = new Map(colours);

					console.log(toHex); // Map {"red" => "#ff0000", "yellow" => "#ffff00"}
					console.log(toHex['red']); // #ff0000
					console.log(toHex['yellow']); // #ffff00

convert back to Map 

					
						Array.from(toHex); //
						[...toHex]; //

convert back to Map 

					
						Array.from(toHex.keys()); //
						Array.from(toHex.values()); //