Skip to main content

Command Palette

Search for a command to run...

Map and Set in JavaScript

Updated
3 min read
Map and Set in JavaScript
M

Full-stack developer with a good foundation in frontend, now specializing in backend development. Passionate about building efficient, scalable systems and continuously sharpening my problem-solving skills. Always learning, always evolving.

JavaScript objects and arrays cover most cases, but they break down when you need flexible keys or guaranteed uniqueness. Map and Set exist to solve those gaps with clearer semantics and better performance characteristics.


What Map is

Map is a key value store where keys can be any type and insertion order is preserved.

const map = new Map();

map.set("name", "Ali");
map.set(42, "number key");
map.set({ id: 1 }, "object key");

console.log(map.get(42)); // "number key"
console.log(map.size); // 3

Why this matters:

  • Object keys are limited to strings and symbols

  • Map allows objects, numbers, functions as keys

  • Iteration order is guaranteed

for (const [key, value] of map) {
  console.log(key, value);
}

What Set is

Set is a collection of unique values. Duplicate entries are ignored.

const set = new Set();

set.add(1);
set.add(1);
set.add(2);

console.log(set); // Set {1, 2}

Uniqueness is enforced automatically:

const ids = [1, 2, 2, 3];
const uniqueIds = new Set(ids);

console.log([...uniqueIds]); // [1, 2, 3]

Difference between Map and Object

Key types

const obj = {};
obj[{}] = "value";

console.log(obj); // { "[object Object]": "value" }

Object coerces keys to strings. This causes collisions.

const map = new Map();
const key = {};

map.set(key, "value");
console.log(map.get(key)); // "value"

No coercion in Map. Keys stay distinct.


Iteration

Objects are not directly iterable:

Object.keys(obj).forEach(k => console.log(k));

Map is iterable by default:

for (const [k, v] of map) {
  console.log(k, v);
}

Order

Objects have complex ordering rules. Map strictly preserves insertion order.


Use case

  • Use Object for simple JSON-like data

  • Use Map when keys are dynamic, non-string, or frequently added/removed


Difference between Set and Array

Uniqueness

const arr = [1, 1, 2];
console.log(arr); // [1, 1, 2]

const set = new Set(arr);
console.log([...set]); // [1, 2]

Array allows duplicates. Set does not.


Lookup

arr.includes(2); // O(n)
set.has(2);      // O(1) average

Set provides faster membership checks.


Use case

  • Use Array for ordered collections with duplicates

  • Use Set when uniqueness and fast lookup matter


When to use Map and Set

Map example: caching or lookup table

const userCache = new Map();

function getUser(id) {
  if (userCache.has(id)) {
    return userCache.get(id);
  }

  const user = fetchUserFromDB(id);
  userCache.set(id, user);
  return user;
}

Using Object here risks accidental key collisions and lacks clear intent.


Set example: deduplication and membership

const visited = new Set();

function visit(node) {
  if (visited.has(node)) return;

  visited.add(node);
  // process node
}

This pattern shows up in graph traversal, caching, and avoiding repeated work.


Diagrams

Map Key Value Storage

Image Image Image Image Image Image

Set Uniqueness Representation

Image Image Image Image Image Image

Conclusion

Map and Set are not replacements for objects and arrays. They solve specific problems:

  • Map removes key restrictions and gives predictable iteration

  • Set enforces uniqueness with efficient lookup

Use them when those guarantees matter. Otherwise, stick with simpler structures to keep code straightforward.