JavaScript's Map Object, TL;DR

JavaScript's (JS) built-in Map object is essentially just a simple list containing several key-value pairs, and it is useful when you want to represent your data as a list of items where each item has an associated value with it (note that Maps should not be confused with JS's similarly named but different built-in map() method).

A good example of a Map in real life is a to-do list, which associates every activity in the to-do list with whether it's been completed or not (eg let todo = new Map(); todo.set("Get groceries", false);, etc).

The 4 most important Map methods to remember are:

set() - Creates a new key-value pair in the Map object
get() - Returns the key's associated value
has() - Returns boolean true or false if the key exists
delete() - Deletes the key-value pair from the Map object

Example

In this simple example, we create a Map object (people) to contain a list of people's names and ages - the name is the key, and age the value.

let people = new Map(); // initialize a new Map() object

// SYNTAX: mapName.set(key, value)
people.set('Eric', 15);
people.set('Stacy', 20);
people.set('Joan', 25);

We can then run the following built-in methods to get data and modify the Map:

people.get('Eric'); // 15
people.size; // 3
people.has('Dan'); // false
people.delete('Joan');
people.size; // 2

Iterating Over Map Objects

Map objects in JS are iterable, unlike plain objects in JS, hence we can simply do the following to iterate over any Map object (in the order in which they were inserted):

// Assume people object still exists

for (let [key, value] of people){
    console.log(key, value);
}

Copying Map Objects

We can copy an existing Map object to a new Map in one of two ways - via a shallow copy, or a deep copy.

A shallow copy will copy all the key-value pairs as expected but will not create new memory addresses in the process. This means that altering the original may alter the copy. A deep copy will avoid altering the original, as it creates new memory addresses altogether.

To shallow copy (assume the people Map object above exists):

let copy = new Map(people);

To deep copy (again assume people Map object exists):

let copy = new Map(JSON.parse(JSON.stringify(Array.from(people))));

This deep copy works by first converting the Map object to an array, then we stringify the array, parsing the JSON string, and finally converting that back into a Map object.

Deep copy when you want to create a quick copy of an existing Map object but with different keys or values, creating 2 separate and distinct maps.

Maps vs Plain Objects in JS

It's very important to note the differences between a plain object and a Map. Bear in mind the "plain objects" I am speaking of are simply those delimited by { and } braces, for example let object = {property: value};.

While plain objects can do most if not all of what a Map can do, Maps contrast with plain objects in JS in 4 main ways:

Map keys can be of any data type. The keys in plain objects however must be either strings or symbols (any numbers in the keys are converted to strings).
Insertion order is preserved in Maps. It is not in plain objects.
Maps are generally more performant than plain objects for insertion and deletion.
Objects have direct support in JSON, but Maps do not.

Conclusion

And that's the TL;DR of JavaScript's Map object as succinctly and to the point as possible! Note that there are finer details I'm leaving out, however, that's done in the name of time. If you remember these aspects, you'll have a good working understanding of JS's Maps.

FullStaxDev