JavaScript Maps

A Map stores pairs: a key and the value that goes with it. Look up the key, get the value back. That sounds like a plain object, and often an object is fine. But Maps are built specifically for this job, and they handle several situations that objects handle badly.

// Creating a Map

// Empty, then fill it
const prices = new Map();
prices.set("apple", 0.5);
prices.set("bread", 3.25);

// Or start with an array of [key, value] pairs
const capitals = new Map([
  ["France", "Paris"],
  ["Japan", "Tokyo"],
  ["Kenya", "Nairobi"]
]);

console.log(capitals.get("Japan"));
console.log(capitals.size);

// The Basic Operations

const stock = new Map();

stock.set("pens", 40);          // add
stock.set("pens", 35);          // same key: replaces the value
stock.get("pens");              // 35
stock.get("tape");              // undefined  (no such key)
stock.has("pens");              // true
stock.delete("pens");           // true
stock.size;                      // 0

// Maps Are Objects

Many languages call this kind of collection a dictionary. In JavaScript, a Map is a kind of object, and as with Sets, instanceof identifies it:

console.log(typeof capitals);
console.log(capitals instanceof Map);

// Map vs Object: Why Maps Exist

1. Keys can be anything. Object keys are always turned into strings. Map keys keep their type, and can even be objects:

const obj = {};
obj[1] = "number one";
obj["1"] = "string one";        // overwrote it! 1 became "1"
console.log(Object.keys(obj));    // ["1"]

const map = new Map();
map.set(1, "number one");
map.set("1", "string one");
console.log(map.size);            // 2  (two separate keys)

// Objects as keys: attach data to an object without changing it
const ava = { name: "Ava" };
const ben = { name: "Ben" };

const scores = new Map();
scores.set(ava, 92);
scores.set(ben, 85);

console.log(scores.get(ben));   // 85

2. No hidden keys. Objects come with built-in properties inherited from Object. A key like "toString" or "constructor" can collide with them. A new Map starts truly empty.

const words = {};
console.log("constructor" in words);   // true  (inherited, surprise!)

const wordMap = new Map();
console.log(wordMap.has("constructor")); // false

3. Size and order are built in. A Map has size and always loops in the order keys were added.

4. Maps loop directly. for...of works on a Map as it is. A plain object needs Object.keys, Object.entries, or for...in first.

5. Built for change. Maps are optimized for adding and removing entries often, such as a live list of who is online.

// Which to Use?

// Looping Through a Map

Each loop step gives a [key, value] pair, which you can unpack right in the loop with destructuring (from JS Object Display):

for (const [country, city] of capitals) {
  console.log(`${city} is the capital of ${country}`);
}

// Real Example: Counting Things

const words = "the cat and the hat and the bat".split(" ");
const counts = new Map();

for (const w of words) {
  counts.set(w, (counts.get(w) ?? 0) + 1);
}

console.log(counts);

// Quick Check

const m = new Map();
m.set(1, "number");
m.set("1", "string");
console.log(m.size);

const m = new Map();
m["x"] = 5;
console.log(m.get("x"), m.size);

// Try It

▶ Open Playground

1. Click Open Playground. Add two more friends' birthdays to the Map and look one up
2. Set the same key twice and check the size
3. Use two different objects as keys and store a score for each
4. Count how many times each letter appears in a word using a Map