Javascript: Map object & Loop
A Javascript Map object holds the key-value pairs of elements. An array or any other iterable object can be passed to the Map.
– Map is a new data structure introduced in JavaScript ES6.
– It’s an alternative to JavaScript Object for storing key/value pairs.
– It has useful methods for iteration over the key/value pairs.
Create a Map object in Javascript
1 2 3 | var map = new Map(); map.set('name', 'John'); map.set('id', 11); |
Get the full content of the Map
1 | console.log(map); // Map { 'name' => 'John', 'id' => 11 } |
Get value of the Map using key
1 2 | console.log(map.get('name')); // John console.log(map.get('id')); // 11 |
Get size of the Map
1 | console.log(map.size); // 2 |
Check key exists in Map
1 2 | console.log(map.has('name')); // true console.log(map.has('age')); // false |
Get keys of the Map object
1 | console.log(map.keys()); // MapIterator { 'name', 'id' } |
Get values of the Map object
1 | console.log(map.values()); // MapIterator { 'John', 11 } |
Get elements of the Map
1 2 3 4 5 6 | for (let element of map) { console.log(element); } // Output: // [ 'name', 'John' ] // [ 'id', 11 ] |
Print key value pairs
1 2 3 4 5 6 | for (let [key, value] of map) { console.log(key + " - " + value); } // Output: // name - John // id - 11 |
Print only keys of the Map
1 2 3 4 5 6 | for (let key of map.keys()) { console.log(key); } // Output: // name // id |
Print only values of the Map
1 2 3 4 5 6 | for (let value of map.values()) { console.log(value); } // Output: // John // 11 |
Iterating Map object with forEach() function
1 2 3 4 5 6 | map.forEach(function(value, key) { console.log(key, value); }); // Output: // name John // id 11 |
Add a new element to the Map
1 2 | map.set('gender', 'M'); console.log(map); // Map(3) {"name" => "John", "id" => 11, "gender" => "M"} |
Delete an element from the Map
1 2 | map.delete('gender'); console.log(map); // Map(2) {"name" => "John", "id" => 11} |
Delete all key-value pairs of the Map
1 2 | map.clear(); console.log(map); // Map(0) {} |
CONVERT ARRAY INTO MAP & CONVERT MAP INTO ARRAY
Creating Map object with multi-dimensional array as iterable
1 2 3 4 | var multiArray = [ ['id', 5], ['name', 'John'] ]; |
Convert Array object into Map object
1 2 3 | // this creates a key-value pair var myMap = new Map(multiArray); console.log(myMap); // Map(2) {"id" => 5, "name" => "John"} |
Convert Map into Array
1 2 3 4 5 | // Array.from() method is used to do so var mapToArray = Array.from(myMap); // JSON.stringify() method is used to print the array console.log(JSON.stringify(mapToArray)); // [["id",5],["name","John"]] |
Map is similar to Object as both have key-value pairs.
However, iteration is easier in Map as compared to Object.
Map can be directly iterated whereas you have to obtain the keys of an Object to iterate it.
The other difference is that the keys of Object has to be String or Symbol but for Map, it can be anything like Object, String, Function, etc.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var myMap = new Map(); var keyString = 'Test String'; var keyObject = {x:5, y:6}; var keyFunction = function(param) { console.log(param); }; myMap.set(keyString, 'My String'); myMap.set(keyObject, 'My Object'); myMap.set(keyFunction, 'My Function'); console.log(myMap.size); // 3 console.log(myMap.get(keyString)); // My String console.log(myMap.get(keyObject)); // My Object console.log(myMap.get(keyFunction)); // My Function |
Hope this helps. Thanks.
Find me on
Mukesh Chapagain is a graduate of Kathmandu University (Dhulikhel, Nepal) from where he holds a Masters degree in Computer Engineering. Mukesh is a passionate web developer who has keen interest in open source technologies, programming & blogging. 
