When to Use Map and Set in Frontend JavaScript

Match the collection to the question

Arrays describe ordered sequences, objects describe named properties, Maps associate keys with values, and Sets track unique values. Start by writing the question your code asks most often. A screen that repeatedly checks whether an identifier is selected has different needs from one that simply renders ten items in order. Choosing the data shape well often removes unnecessary loops.

Use a Map for explicit lookup ownership

Imagine a table whose row details arrive separately from its visible order. A Map keyed by row identifier can associate each identifier with its latest record, while an array controls display order. Looking up row-17 then communicates intent directly. Keep replacement and deletion behavior explicit, especially when the visible order still contains an identifier whose data has been removed.

Use a Set for membership

A selectedIds Set makes membership checks readable and prevents the same identifier from being selected twice. For a filter menu, deduplicate primitive category strings with a Set, then create an array for rendering. Decide whether capitalization and surrounding whitespace should be normalized first; uniqueness follows the actual stored values, not the human meaning of a label.

Understand object identity

Two separately created objects containing the same fields are still different object references. Adding both to a Set does not deduplicate them by their field values. For imported records, use a meaningful primitive key, such as a normalized external identifier, when that matches the business rule. Do not invent a JSON-stringification equality rule without considering property ordering and unsupported values.

Preserve state update expectations

Map.set, Set.add and their deletion methods mutate the collection. When storing one in React state, create a new collection before changing it so the reference represents a new state value. Also remember that JSON does not automatically serialize these structures into a useful record list. Choose an explicit transport format instead of assuming a browser collection is already an API contract.

Check boundaries with examples

Test repeated strings, differently cased labels, numeric versus string identifiers, and two equivalent-looking objects. Verify that removing a row also reconciles selection and displayed counts. For serialization, round-trip the chosen array or object representation. The best collection is the one that makes these boundary rules visible to the next person maintaining the feature.

Further reading

• MDN: Map