JavaScript Maps - How and Why

The Map object is an often underutilized feature that can improve the handling of key-value pairs in your JS applications.

This article will give you the basics of JavaScript Maps, including their advantages and scenarios where they might be best.

What is a Map in JavaScript?

The Map object is a collection of key-value pairs where any value can be used as either a key or a value.

You might think it's similar to an object, but there are a lot of reasons it's not:

• Any-value Keys: Unlike objects, which only accept strings and symbols as keys, maps allow for keys of any type, including objects and primitives.
• Order Preservation: Maps store elements in insertion order, particularly when the order of elements matters for your application.
• Size Property: Easily retrieve the number of key/value pairs in a map with its size property, a straightforward advantage over objects.
• Iterable: A Map is iterable, meaning you can iterate it directly.
• Performance: Maps are optimized for scenarios involving frequent additions and removals of key-value pairs.

Now that you know why they are different, let's look at how you use them:

Creating and Manipulating Maps

Here’s how you can create and work with maps:

Creating a Map

let myMap = new Map();

// You can also initialize a map with key-value pairs
let initializedMap = new Map([['key1', 'value1'], ['key2', 'value2']]);

Adding and Accessing Elements

// Adding elements
myMap.set('aKey', 'aValue');
myMap.set('anotherKey', 12345);

// Accessing elements
console.log(myMap.get('aKey')); // Outputs: aValue
console.log(myMap.get('anotherKey')); // Outputs: 12345

Checking for Keys and Removing Elements

// Check if a key exists
console.log(myMap.has('aKey')); // true

// Remove a key-value pair
myMap.delete('aKey');

// Check again
console.log(myMap.has('aKey')); // false

Iterating Over a Map

Maps are directly iterable, making it easy to loop over their contents:

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

// Using forEach
myMap.forEach((value, key) => {
    console.log(key, value);
});

When to Use Maps Over Objects

While objects have been the default choice for key-value storage in JavaScript, maps offer major advantages that make them better suited for certain scenarios:

• Complex Keys: If you need to use objects or functions as keys, maps are the best choice.
• Order Matters: When the order of entries is important, maps ensure that your data stays in the order you added them.
• Performance: For large data sets or scenarios where you frequently add and remove key-value pairs, maps offer performance benefits over objects.
• Clarity and Intent: Using maps clarifies that the collection is intended for simple key-value storage without the additional prototype baggage that comes with objects.

Common Pitfalls

Here's why they might not be why you want:

• Serialization: Maps do not directly convert to JSON. Use Array.from(map) for serialization.
• Memory Management: Be mindful of memory usage, especially when using large objects as keys.

Some Weirdness / Notes

Can you use functions as map keys?

Yes, functions can be keys in maps, offering "unique" possibilities for associating behaviors with objects.

You can nuke all the entries from a Map?

Just use the map.clear() method to empty a map.