Map VS Object in JavaScript

Map vs Object in JavaScript

According to MDN:

A Map object can iterate its elements in insertion order - a for..of loop will return an array of [key, value] for each iteration.

and

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, 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.
However, this can be bypassed using map = Object.create(null). The
keys of an Object are Strings, where they can be any value for a Map.
You can get the size of a Map easily while you have to manually keep
track of size for an Object.

Map

The iterability-in-order is a feature that has long been wanted by developers, in part because it ensures the same performance in all browsers. So to me that's a big one.

The myMap.has(key) method will be especially handy, and also the myMap.size property.

When to use Object map vs Map class in ES6

Here are the differences I've found thus-far:

• Map allows you to use any type for the key. So if you want, you can store an entire object in the key, where, for an index signature, Typescript currently only supports string or number keys.

• Map is only natively supported in ES6. If targeting ES5 or lower, you need to provide a polyfill.

Not sure if these are exhaustive though.

Edit: Just discovered an Objects and maps compared section in the Mozilla docs, which looks pretty comprehensive.

It includes the following items not mentioned above:

• The keys in Map are ordered while keys added to object are not. Thus, when iterating over it, a Map object returns keys in order of insertion.

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

• A Map is an iterable and can thus be directly iterated, whereas iterating over an Object requires obtaining its keys in some fashion and iterating over them.

• An Object has a prototype, so there are default keys in the map that could collide with your keys if you're not careful. As of ES5 this can be bypassed by using map = Object.create(null), but this is seldom done.

• A Map may perform better in scenarios involving frequent addition and removal of key pairs.

Maps vs Objects in ES6, When to use?

What is an applicable example of using Maps over objects?

I think you've given one good example already: You at least need to use Maps when you are using objects (including Function objects) as keys.

in particular, "when would keys be unknown until runtime?"

Whenever they are not known at compile time. In short, you should always use a Map when you need a key-value collection. A good indicator that you need a collection is when you add and remove values dynamically from the collection, and especially when you don't know those values beforehand (e.g. they're read from a database, input by the user, etc).

In contrast, you should be using objects when you know which and how many properties the object has while writing the code - when their shape is static. As @Felix has put it: when you need a record. A good indicator for needing that is when the fields have different types, and when you never need to use bracket notation (or expect a limited set of property names in it).

What is difference between Map and Set?

Provided you are talking about the ES6 types, they aren't the same data structure even though the Set might be implemented with a Map.

Your definition of Map is right, but a Set is a collection of unique values, unlike an array which can have duplicates.

var array = [1, 2, 3, 3];

var set = new Set(array); // Will have [1, 2, 3]
assert(set.size, 3);

var map = new Map();
map.set('a', 1);
map.set('b', 2);
map.set('c', 3);
map.set('C', 3);
map.set('a', 4); // Has: a, 4; b, 2; c: 3, C: 3
assert(map.size, 4);

What is difference between Map and Set?

Provided you are talking about the ES6 types, they aren't the same data structure even though the Set might be implemented with a Map.

Your definition of Map is right, but a Set is a collection of unique values, unlike an array which can have duplicates.

var array = [1, 2, 3, 3];

var set = new Set(array); // Will have [1, 2, 3]
assert(set.size, 3);

var map = new Map();
map.set('a', 1);
map.set('b', 2);
map.set('c', 3);
map.set('C', 3);
map.set('a', 4); // Has: a, 4; b, 2; c: 3, C: 3
assert(map.size, 4);

map function for objects (instead of arrays)

There is no native map to the Object object, but how about this:

var myObject = { 'a': 1, 'b': 2, 'c': 3 };

Object.keys(myObject).forEach(function(key, index) {
  myObject[key] *= 2;
});

console.log(myObject);
// => { 'a': 2, 'b': 4, 'c': 6 }

---

Related Topics