JavaScript Map

map: a key-value object that is built for iterations

Most of us are probably using the basic JavaScript object as a map, and working around all the stuff it’s not build to do. While the Map is sitting shamed on the side, wondering why we did not give her a chance. Personally, I have a love-hate relationship with this one since on a pri-job interview, after the HR asked about Map, I gave a good explanation. Only later on I found out that she knew only about the JavaScript array map method.

To give the map the attention it deserves, this time I’ll compare the two on the daily usage. Next time I’ll dive into some more interesting changes and weird places.

Basic map operations

Usage of native javaScript object as map:

let jsObject = {};
let jsObject2 = {somevalue:'someValue'};
jsObject['key'] = 'value';
jsObject.oneMoreKey = 'value';
let value = jsObject['key'];
let onewMoreValue = jsObject.oneMoreValue;

Usage of map:

let jsMap = new Map();
let jsMap2 = new Map([ ['key','value'], ['key2':'value2']...);
jsMap.set('key1','value');
jsMap.set('key2','value').set('key3','value');
let value = jsMap.get('key1');

Until now it seems that the good old object is the winner since it was shorter. But once we want to do a little more we see how unsuitable the basic JavaScript object is as a map:

let jsObject = {}; 
let jsMap = new Map(); ...

A. Check if the map has a value:

if(!!jsObject.hasOwnProperty(key)) ...
if(jsMap.has(key))...

B. Get a list of the map keys:

let objKeys = Object.keys(jsObject);
let mapKeys = jsMap.keys()

C. Get a list of the map values:

let objValues = [];
for(let key of Object.keys(jsObject)){ 
   objValues.push(jsObject[key])); 
}
let mapValues = jsMap.values()

D. Iteration over the map values:

for(let key of Object.keys(jsObject)){
   console.log(jsObject[key]);
}

// for javascripts map you can choose:
for (var [key, value] of jsMap) {
  console.log(key + ' = ' + value);
}
for (var key of jsMap.keys()) {
  console.log(key);
}
for (var value of jsMap.values()) {
  console.log(value);
}
for (var [key, value] of jsMap.entries()) {
  console.log(key + ' = ' + value);
}

E. Clearing the map:

jsObject = {};
jsMap.clear();

F. Removing elements from the map:

delete jsObject.value;
jsMap.delete('key');

G. Get the map length:

let jsObjLength = Object.keys(jsObject).length;
let jsMapLength = jsMap.size;

There are plenty of differences and nuances between the two, but this post is getting longer than intended. So next time I’ll write some of the map edge cases, details, and a frightening entrance to the void through the map object.

But before I leave, just wanted to share one more difference between the two. That unlike object who I imagine as I messy truck driver, who can carry whatever you want just by throwing it to the back, unknowing that he is carrying. I see the map as an old librarian who knows exactly how many books there is, and where is each one of them. And if you only think of putting a book in the wrong place, the code will change into Stephen King’s nightmare.  Explanation on the next time.