When to use Map over {}

Question

When to use Map over {}. Everything that could be done with Map could also be achieved using {} i.e. Object except one thing which is setting key of type other than string.

var mp = new Map();    
mp.set(1, 'one');    
mp.set(2, 'two');    

var ob = {};    
ob[1] = 'one';    
ob[2] = 'two';    

console.log(mp);    
console.log(mp.get(1));    
console.log(typeof mp.keys().next().value);    

console.log(ob);    
console.log(ob[1]);    
console.log(typeof Object.keys(ob)[0]);

Output :

Map { 1 => 'one', 2 => 'two' }
one
number
{ '1': 'one', '2': 'two' }
one
string

Which method should be used at what scenarios when I can do the some thing with any of them.

Answer 1

mozilla documentation is enough descriptive, I believe.

The Map object is a simple key/value map. Any value (both objects and primitive values) may be used as either a key or a value.

Objects and maps compared

Objects are similar to Maps in that both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Because of this (and because there were no built-in alternatives), Objects have been used as Maps historically; however, there are important differences between Objects and Maps that make using a Map better:

• An Object has a prototype, so there are default keys in the map. This could be bypassed by using map = Object.create(null) since ES5, but was seldom done.

• The keys of an Object are Strings and Symbols, whereas they can be any value for a Map, including functions, objects, and or any primitive.

• You can get the size of a Map easily with the size property, while the size of an Object must be determined manually.

This does not mean you should use Maps everywhere, objects still are used in most cases. Map instances are only useful for collections, and you should consider adapting your code where you have previously used objects for such. Objects shall be used as records, with fields and methods. If you're still not sure which one to use, ask yourself the following questions:

• Are keys usually unknown until run time, do you need to look them up dynamically?
• Do all values have the same type, and can be used interchangeably?
• Do you need keys that aren't strings?
• Are key-value pairs often added or removed?
• Do you have an arbitrary (easily changing) amount of key-value pairs?
• Is the collection iterated?

Those all are signs that you want a Map for a collection. If in contrast you have a fixed amount of keys, operate on them individually, and distinguish between their usage, then you want an object.

Answer 2

Here is a bug I once had:

var scrabbled = {
  The: 6,
  word: 8,
  length: 10,
  is: 2,
  weird: 9
};
$.each(scrabbled, function(k, v) {
  console.log(k, v);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

(jQuery fixed it in 1.9, but it was not a fun day at work till I finally realised what was wrong.)

Yes, I suppose if you restrict yourself to string indices, there's nothing you can do with Map that you can't do with objects; but there's easy things to mess up with objects if you are not careful and doing things in a safe way (like iterating with for...in... without .hasOwnProperty check).

Answer 3

From the MDN,

• An Object has a prototype, so there are default keys in the map. This could be bypassed by using map = Object.create(null) since ES5, but was seldom done.

• The keys of an Object are Strings and Symbols, whereas they can be any value for a Map, including functions, objects, and or any primitive.

• You can get the size of a Map easily with the size property, while the size of an Object must be determined manually.

Maps are usually useful for a collection where your keys are not string and key-value pairs are often removed or added. If your keys are fixed than an object will be better suited.

Answer 4

The difference is Object have strings as key, whereas Map can have any type of key.

If you have a number, and a number as string, then with objects, the key is the same (both get if they are not strings converted to strings), but with maps, the two keys are different and points to different values.

var m = new Map;
m.set(1, 'number 1');
m.set('1', 'string 1');

console.log(m.get(1));   // 'number 1'
console.log(m.get('1')); // 'string 1'

var o = Object.create(null); // an empty object without prototypes
o[1] = 'number 1';
o['1'] = 'string 1';

console.log(o[1]); // 'string 1'

The main reason to use an object over a map is, object works on every systems and maps only with on newr browsers, at least where ES6 is working.