liveBook · Manning

Map

As explained in Get Programming with JavaScript Next: New features of ECMAScript 2015, 2016, and beyond

A map is an associative data structure that stores key-value pairs and supports retrieving values by key.

What if you need to retrieve data using a DOM node rather than a property name? A JavaScript `Map` stores key–value pairs and accepts keys of any datatype. Unlike a plain object, it is directly iterable. This is the `Map` data structure, not the array method `Array.prototype.map`. section 25.0

Create and use a Map

`const values = new Map([["width", 400], [3, "three"]]);` `values.set("height", 90);` `values.get("height"); // 90` `values.get("missing"); // undefined` Create an empty Map with `new Map()`, or pass an array of `[key, value]` pairs. Passing a plain object in place of those pairs does not work. Here, the string and number keys remain distinct; `set` adds a pair, and `get` retrieves its value. section 25.1 section 25.2

A Map’s entries are not its object properties: `Object.keys(values)` does not reveal its stored keys. Use `values.keys()` or `values.values()` to obtain iterators, and spread an iterator into an array when needed. Maps also offer `has`, `delete`, `clear`, `entries`, `forEach`, and `size`. section 25.2

Choose the container to match the job:

  • Use a plain object for straightforward named options such as `width` and `height`; its properties support object-style destructuring. section 25.3
  • Use a Map when you need non-string keys or want to iterate key–value pairs in a guaranteed order. Map destructuring is array-style and follows position, not key name. section 25.3
  • Keep a reference to an object key when looking it up. Two separately created arrays with the same contents do not serve as the same key. section 25.3

Render search facets

Store facets as pairs, then visit each name and value directly: `for (const [name, value] of facets) {` ` // render name and value` `}` With a plain object, the loop instead obtains property names through `Object.keys(facets)` and looks up each value separately. section 25.3

Listing 26.4. src/cards.js
export const isCardFlipped = new Map(); export function flipCardUp(card) { isCardFlipped.set(card, true); } export function flipCardDown(card) { isCardFlipped.set(card, false); }

A card object serves as the key, while a boolean records whether that particular card is flipped. The flip functions update the value through `set`. section 26.1

For object-keyed data that should not keep its keys from being garbage-collected, consider `WeakMap` instead. Unlike `Map`, it is not iterable. For practice, write functions that copy a Map with its entries sorted by key or value, then invert its keys and values; assume unique values for the inversion. section 25.5

How Get Programming with JavaScript Next: New features of ECMAScript 2015, 2016, and beyond covers it

How deep it goes
Works through construction, methods, iteration, destructuring, selection tradeoffs, and exercises; does not detail the internal storage mechanism.
Examples
Uses search-facet rendering, object-keyed card state, and sorting and inversion exercises.
What it assumes
Assumes familiarity with objects and arrays while teaching Map construction and access from examples.
What you can do after
Apply it via JavaScript Map to iterate keyed data, retrieve values, and track state by object reference.
How it connects
Contrasts Maps with plain objects, arrays, Sets, WeakMaps, iterators, and destructuring.

Also explained in

Compare how 42 books explain Map →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Get Programming with JavaScript Next: New features of ECMAScript 2015, 2016, and beyond. The section links point to the parts of the book it draws on.