When to use Map instead of plain JS objects

1. Map accepts any type of key

As mentioned before, if the key of an object is not a string or symbol, JS will implicitly convert it to a string.

Fortunately, the map key type is no problem

const numbersMap = new Map();

numbersMap.set(1, 'one');
numbersMap.set(2, 'two');

[...numbersMap.keys()]; // => [1, 2]

1 and 2 are the keys in numbersMap and the type of these keys (number) remains the same.

You can use any key type in an MPA: numbers, booleans, strings, and symbols.

const booleansMap = new Map();

booleansMap.set(true, "Yep");
booleansMap.set(false, "Nope");

[...booleansMap.keys()]; // => [true, false]

booleansMap uses booleans as keys, no problem. In contrast, Boolean keys do not work in plain objects.

Let's break through the imagination: can the entire object be used as the key of the map? The answer is: yes.

Objects as keys

Suppose you need to store some data associated with an object without attaching that data to the object itself. This is not possible using plain objects.

A workaround is to use an array of object-value tuples:

const foo = { name: 'foo' };
const bar = { name: 'bar' };

const kindOfMap = [
  [foo, 'Foo related data'],
  [bar, 'Bar related data']
]

kindOfMap is an array containing pairs of objects and associated values.

The biggest problem with this approach is that the complexity of accessing values ​​by key is O(n), and we have to traverse the entire array to get the desired value by key.

function getByKey(kindOfMap, key) {
  for (const [k, v] of kindOfMap) {
    if (key === k) {
      return v;
    }
  }
  return undefined;
}

getByKey(kindOfMap, foo); // => 'Foo related data'

WeakMap (a specialized version of Map) does the above without going through all this trouble: it only accepts objects as keys.

The main difference between Map and Weakmap is that Weakmap allows the key objects to be garbage collected, thus preventing memory leaks.

Well, it is very easy to refactor the above code using WeakMap:

const foo = { name: 'foo' };
const bar = { name: 'bar' };

const mapOfObjects = new WeakMap();

mapOfObjects.set(foo, 'Foo related data');
mapOfObjects.set(bar, 'Bar related data');

mapOfObjects.get(foo); // => 'Foo related data'

In contrast to Map, WeakMap only accepts objects as keys and has fewer methods.

2. Map has no restrictions on key names

Any object in JS inherits properties from the prototype object, and so do normal objects.

If you override properties inherited from a prototype, you may break code that depends on those prototype properties:

function isPlainObject(value) {
  return value.toString() === '[object Object]';
}

const actor = {
  name: 'Harrison Ford',
  toString: 'Actor: Harrison Ford'
};

// Does not work!
isPlainObject(actor); // TypeError: value.toString is not a function

A property toString defined on an object participant overrides the toString() method inherited from the prototype. This breaks isObject() because it relies on the toString() method.

Check the list of properties and methods that ordinary objects inherit from their prototypes, and avoid defining custom properties using those method names.

For example, suppose you have a UI for managing some custom fields. Users can add custom fields by specifying a name and value:

It can be convenient to store the state of your custom fields in a plain object:

const userCustomFields = {
  'color': 'blue',
  'size': 'medium',
  'toString': 'A blue box'
};

But the user might choose a custom field name, like toString (as in the example), a constructor, etc., which might break our object.

Do not use user input values ​​as keys on plain objects.

Map does not have this problem, the key value names are not restricted:

function isMap(value) {
  return value.toString() === '[object Map]';
}

const actorMap = new Map();

actorMap.set('name', 'Harrison Ford');
actorMap.set('toString', 'Actor: Harrison Ford');

// Works!
isMap(actorMap); // => true

Regardless of the fact that actorMap has a property called toString, the toString() method will work fine.

3. Map is iterable

In order to iterate over the properties of a normal object, you must use other helper static functions, such as Object.keys() or Object.entries():

const colorsHex = {
  'white': '#FFFFFF',
  'black': '#000000'
};

for (const [color, hex] of Object.entries(colorsHex)) {
  console.log(color, hex);
}
// 'white' '#FFFFFF'
// 'black' '#000000'

Object.entries(colorsHex) returns an array of key-value pairs extracted from the object.

However, map itself is iterable:

const colorsHexMap = new Map();

colorsHexMap.set('white', '#FFFFFF');
colorsHexMap.set('black', '#000000');

for (const [color, hex] of colorsHexMap) {
  console.log(color, hex);
}
// 'white' '#FFFFFF'
// 'black' '#000000'

colorsHexMap is iterable. You can use it anywhere an iterable is accepted: for() loops, spread operators [...map] .

Map provides methods that return iterables: map.keys() to traverse keys, map.values() to traverse values

4. Map size

Another problem with plain objects is that you can't immediately tell how many properties it contains.

const exams = {
  'John Smith': '10 points',
  'Jane Doe': '8 points',
};

Object.keys(exams).length; // => 2

To determine the size of exams, one must go through all the keys to determine their number.

Map provides a size attribute, which indicates the number of attributes.

const examsMap = new Map([
  ['John Smith', '10 points'],
  ['Jane Doe', '8 points'],
]);
  
examsMap.size; // => 2

Determining the number of attributes in a map is even simpler: examsMap.size.

The above is the details of when to use Map instead of ordinary JS objects. For more information about JS objects, please pay attention to other related articles on 123WORDPRESS.COM!