Copying objects with spread and Object.assign

Understanding Copying objects with spread and Object.assign

Spread in an object literal and Object.assign do the same core job: they walk a source's own enumerable keys, string and symbol alike, read each value once, and put that value on another object. The useful mental model is that you are copying a list of key/value pairs, not the things those values point at. A number or string value is genuinely duplicated; an object or array value is a reference, and copying a reference gives you a second arrow to the same object. Sources are processed left to right, so both { ...defaults, ...overrides } and Object.assign({}, defaults, overrides) let the rightmost source win on any shared key.

The two differ in how they write. Spread creates a brand-new plain object and defines own data properties directly on it, so it never consults a setter and never fails on an existing property. Object.assign takes its first argument as the target it mutates and returns, and it writes with ordinary assignment, which means a setter on the target runs, an inherited setter can intercept the write, and a non-writable property throws a TypeError in strict mode. Reach for spread when you want a fresh object and for Object.assign when the target already exists and its own write behaviour should apply.

What both forms drop is worth memorising, because the loss is silent. Reading a source getter calls it, so the copy stores whatever it returned at that instant as an ordinary value, frozen from then on. Non-enumerable properties are skipped and the prototype is not carried over, so spreading a class instance yields a plain object with the fields but none of the methods. And because copying stops after one level, a nested object is still shared, which is why editing copy.limits.rows shows up in the original.

const defaults = { theme: "light", limits: { rows: 10 } };
const overrides = { theme: "dark" };

const merged = { ...defaults, ...overrides };
console.log(merged);

const target = { id: 1 };
const returned = Object.assign(target, defaults, overrides);
console.log(returned === target, target.theme);

merged.limits.rows = 50;
console.log(defaults.limits.rows, target.limits.rows);
console.log(merged.limits === defaults.limits, merged.limits === target.limits);

Worked examples

const cart = {
  items: [2, 3],
  get total() {
    return this.items.reduce((sum, n) => sum + n, 0);
  }
};

const copy = { ...cart };
console.log(copy.total);

copy.items.push(10);
console.log(cart.total, copy.total);

const d = Object.getOwnPropertyDescriptor(copy, "total");
console.log(d.get, d.value);

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return `(${this.x}, ${this.y})`;
  }
}

const p = new Point(1, 2);
Object.defineProperty(p, "id", { value: 7, enumerable: false });

const shallow = { ...p };
console.log(shallow);
console.log("id" in shallow, p.id);
console.log(String(p), String(shallow));
console.log(shallow instanceof Point);

const target = {
  _name: "unset",
  set name(v) {
    console.log("setter ran with", JSON.stringify(v));
    this._name = v.trim();
  },
  get name() {
    return this._name;
  }
};

Object.assign(target, { name: "  Ada  " });
console.log(target.name);

const spreadCopy = { ...target, name: "  Ada  " };
console.log(JSON.stringify(spreadCopy.name));
console.log(Object.getOwnPropertyDescriptor(spreadCopy, "name").writable);

Important notes

Common mistakes

Try it yourself