JS Maps

JavaScript Map Data Structure

Before ES6 (ECMAScript 2015), JavaScript developers relied almost entirely on standard Objects to map keys to values. While Objects are incredibly useful, they come with certain limitations (like keys being restricted to strings or symbols).

To solve these limitations, JavaScript introduced the Map data structure. A Map holds key-value pairs where the keys can be of any data type—including numbers, booleans, functions, and even other objects!

1. What is a Map in JavaScript?

A Map is a collection of keyed data items, similar to an Object. But unlike an Object, a Map remembers the exact original insertion order of the keys.

Key Features of a Map:

• Any Key Type: You can use functions, objects, and any primitive type as keys.
• Insertion Order: It iterates its elements in the exact order they were inserted.
• Built-in Size: The number of items in a Map is easily retrieved using the size property.
• Iterable: Maps are directly iterable, making them work perfectly with for...of loops.

2. Creating a JavaScript Map

You can create a Map by passing an array of arrays (where each inner array contains a key-value pair) to the new Map() constructor.

// Passing an array of key-value pairs
const myMap = new Map([
  ["apple", 500],
  ["banana", 300],
  ["orange", 200]
]);

console.log(myMap);

Alternatively, you can create an empty Map using new Map() and add elements to it later using the set() method (which we will explore in detail in the next chapter).

3. Objects vs. Maps: Which Should You Use?

Because both Objects and Maps store key-value pairs, beginners often wonder: "When should I use a Map instead of an Object?"

Here is a detailed comparison table to help you decide:

Example: Objects as Keys!

The most powerful feature of a Map is the ability to use complex objects as keys. This is impossible with a standard Object.

// 1. Create standard object variables
const john = { name: "John" };
const jane = { name: "Jane" };

// 2. Create a new empty Map
const userVisits = new Map();
// 3. Use the objects themselves as the keys!
userVisits.set(john, 120);
userVisits.set(jane, 55);
console.log(userVisits.get(john)); // Outputs: 120

If you tried to do this with a standard object (e.g., myObj[john] = 120;), JavaScript would convert the object john into the string "[object Object]", making it impossible to differentiate between john and jane!

Best Practices Summary

• Use an Object when you have a simple, fixed structure with string keys, or when you need to define methods (functions) that act on the data (like representing a real-world entity such as a Car or User).
• Use a Map when you are constantly adding, removing, or updating key-value pairs, when you need keys that are not strings, or when maintaining the order of the keys is critical.