Gotcha: JavaScript Set equality and object references

JavaScript Set uses reference equality for objects, so identical-looking objects are treated as different entries.

Set object equality pitfalls and workarounds:

// Sets use === for primitives, reference for objects
const s = new Set();
s.add({ id: 1 });
s.add({ id: 1 });
s.size; // 2! Different object references

// Same with arrays
const s2 = new Set();
s2.add([1, 2]);
s2.add([1, 2]);
s2.size; // 2!

// Workaround 1: Use primitives
const ids = new Set([1, 2, 3, 1]);
ids.size; // 3

// Workaround 2: Serialize to string
const seen = new Set();
const points = [{x:1,y:2}, {x:3,y:4}, {x:1,y:2}];
const unique = points.filter(p => {
  const key = `${p.x},${p.y}`;
  if (seen.has(key)) return false;
  seen.add(key);
  return true;
});
// [{x:1,y:2}, {x:3,y:4}]

// Workaround 3: Custom Map for dedup
function uniqueBy(arr, keyFn) {
  const map = new Map();
  for (const item of arr) {
    const key = keyFn(item);
    if (!map.has(key)) map.set(key, item);
  }
  return [...map.values()];
}

uniqueBy(users, u => u.email);

JavaScript has no value equality for objects. Set/Map use SameValueZero algorithm which is reference-based for objects.

Working with JavaScript Set and Map