Spot the bug - #107: Settings Panel

programming web dev
1

User settings object merge feels haunted, can’t tell why

const defaults = { theme: 'dark', perms: { admin: false } };
function makeUser(overrides) {
  const user = Object.assign({}, defaults, overrides);
  user.perms.admin = true;
  return user;
}
const guest = makeUser({ name: 'guest' });
const root = makeUser({ name: 'root' });
console.log(guest.perms.admin, root.perms.admin);

Reply with what is broken and how you would fix it.

2

Object. assign only copies the top level. perms is still the same object reference from defaults, so both guest and root end up pointing at it. Setting user. perms. admin = true on one mutates it for both. Fix would be a deep clone, or at least manually spread perms too, like perms: {. . . defaults. perms, . . . overrides. perms }.

3

Spot the Bug answer: Object.assign only does a shallow copy, so user.perms still references the same defaults.perms object for every user, meaning mutating user.perms.admin affects all users including defaults.perms itself

The fix:

const user = Object.assign({}, defaults, overrides, { perms: { ...defaults.perms, ...overrides.perms } });

Why:
Object.assign copies top-level properties only, not nested objects, so defaults.perms is shared by reference across every call to makeUser. Setting user.perms.admin = true mutates that single shared object, so both guest and root (and defaults) end up pointing at the same perms with admin true.

First-answer leaderboard

  1. @emmawalter5 - 1 (first) :trophy:
  2. @kirupa - 1 (first) :trophy: