Immutable Updates and Copying

Object Spread Copies

Object spread creates a new object while keeping the original value unchanged.

object spread The `{ ...value, changed: next }` pattern copies existing properties, then replaces the fields listed after the spread.

Object Spread Copies

nextStatus
spread.ts
Replay: real traced execution (multi-file project)
type Task = {
    title: string;
    status: string;
    points: number;
};

const nextStatus: string = "done";
const original: Task = { title: "trace lesson", status: "todo", points: 3 };
const updated: Task = { ...original, status: nextStatus };

console.log(`original=${original.status}`);
console.log(`updated=${updated.status}`);

type Task = {
    title: string;
    status: string;
    points: number;
};

const nextStatus: string = "review";
const original: Task = { title: "trace lesson", status: "todo", points: 3 };
const updated: Task = { ...original, status: nextStatus };

console.log(`original=${original.status}`);
console.log(`updated=${updated.status}`);

type Task = {
    title: string;
    status: string;
    points: number;
};

const nextStatus: string = "blocked";
const original: Task = { title: "trace lesson", status: "todo", points: 3 };
const updated: Task = { ...original, status: nextStatus };

console.log(`original=${original.status}`);
console.log(`updated=${updated.status}`);

  1. nextStatus ← done, original ← [object Object], updated ← [object Object]

    4    points: number;5};67const nextStatus→ done: string = "done";  //@nextStatus="review", "blocked"8const original→ [object Object]: Task = { title: "trace lesson", status: "todo", points: 3 };9const updated→ [object Object]: Task = { ...original[object Object], status: nextStatusdone };1011console.log(`original=${original.statustodo}`);12console.log(`updated=${updated.statusdone}`);
    outputoriginal=todo
updated=done

  1. nextStatus ← review, original ← [object Object], updated ← [object Object]

    4    points: number;5};67const nextStatus→ review: string = "review";8const original→ [object Object]: Task = { title: "trace lesson", status: "todo", points: 3 };9const updated→ [object Object]: Task = { ...original[object Object], status: nextStatusreview };1011console.log(`original=${original.statustodo}`);12console.log(`updated=${updated.statusreview}`);
    outputoriginal=todo
updated=review

  1. nextStatus ← blocked, original ← [object Object], updated ← [object Object]

    4    points: number;5};67const nextStatus→ blocked: string = "blocked";8const original→ [object Object]: Task = { title: "trace lesson", status: "todo", points: 3 };9const updated→ [object Object]: Task = { ...original[object Object], status: nextStatusblocked };1011console.log(`original=${original.statustodo}`);12console.log(`updated=${updated.statusblocked}`);
    outputoriginal=todo
updated=blocked