ES6 Map Object

What is a Map?

A map is a collection of keyed data items, just like an object. But the main difference is that, unlike with objects, a map’s keys are not converted into strings, therefore allowing keys of any type. This is one of the most notable and important features of a map.

If We Have Objects, Why Use Maps?

Fair question! I agree that on the surface maps and objects sound a bit similar. But there are a few key differences between the two:

1. Like I stated above, any value can be used as a key in maps, but keys in objects are only Strings and/or Symbols.
2. A map remembers the original insertion order of its entries and maintains that order, whereas with objects, maintaining insertion order is not guaranteed. Just because you inserted entries in a specific order doesn’t mean they will remain in that order when iterating through the object.
3. You can get the size of a map by way of a built-in method, but we don’t have a built-in method to get size in Object, although it can be accomplished manually.
4. Maps are iterable, objects are not by-default. Iterating over an object requires retrieving its keys and iterating over them.
5. Maps have additional, helpful methods that are not made available to objects.
6. Maps perform better in scenarios involving frequent additions and removals of key-value pairs. Objects, in contrast, are not optimized for frequent additions and removals of key-value pairs.

Initializing a Map

In order to create an instance of a map, we can make use of the map constructor as such, new Map(). Doing this will create an empty map that can have entries added later. If we wish to create an instance of a map and initialize it concurrently, we can do so by adding a 2D array into our call to the constructor as such, new Map([['name', 'john'], [9, 44], [true, 'yes']]) , where each array represents a key-value pair. The first item in the array becomes the key and the second becomes the value.

Helpful Map Methods / Property

1. Map.set(key, value) — sets a key-value pair in the map object. Returns the entire map object. AlthoughMap[key] = valuealso works, this is treating map as a plain JS object, so it implies all limitations of an object.
2. Map.get(key) — returns the specified key’s corresponding value but if a key does not exist, undefined will be returned instead.
3. Map.has(key) — returns a boolean specifying if the key exists.
4. Map.delete(key) — returns true if the element specified by the key exists and is successfully removed, otherwise returns false if the key does not exist.
5. Map.clear() — removes all key-value pairs from the map object.
6. Map.size — returns the current count of the maps elements.

Iterating Through a Map

The ES6 Map object also provides a few helpful ways for iterating through it so that we can access its keys and values.

For…Of Loop

One such way for iterating through a map object is by making use of a for…of loop. Below are a few different methods for iterating with a for…of:

1. Map.keys() — As the name of this method suggests, this is a method for retrieving an array containing all of the keys of a map object. We can use this hand-in-hand with a for…of loop to iterating through said keys.

2. Map.values() — similarly to Map.keys() , this method returns an array containing all of the values of a map object, which we can then use alongside a for…of loop.

3. Map.entries() — this method is used to return an array of the the key-value pairs of a map object. This array will be returned in the form of a two dimensional array, where the zeroth index represents the key and the first index represents its corresponding value. Note here that by default, a for…of loop gives you the key-value pairs.

forEach

Last but not least, and what may be unexpected, is the forEach method! Yes, just like we have with arrays, the map prototype has a forEach method that will be helpful for us.

Conclusion

So in conclusion, the Map object is a new ES6 feature that holds key-value pairs and remembers the original insertion order of the keys, unlike objects, which do hold key-value pairs as well, but do not retain the original insertion order of the entries. Also, something important and notable to remember is that any value (both objects & primitives) may be used as either a key or a value.