Immutable Updates and Copying

Array Updates

Immutable array updates use map or spread to build a replacement array.

array map update `map` can return a changed copy for one item and the original item for everything else.

Array Updates

targetId
updates.ts
Replay: real traced execution (multi-file project)
type Item = {
    id: number;
    done: boolean;
};

const targetId: number = 2;
const items: Item[] = [
    { id: 1, done: false },
    { id: 2, done: false },
    { id: 3, done: false },
];

const nextItems: Item[] = items.map((item) =>
    item.id === targetId ? { ...item, done: true } : item
);

console.log(items.map((item) => item.done).join(","));
console.log(nextItems.map((item) => item.done).join(","));

type Item = {
    id: number;
    done: boolean;
};

const targetId: number = 1;
const items: Item[] = [
    { id: 1, done: false },
    { id: 2, done: false },
    { id: 3, done: false },
];

const nextItems: Item[] = items.map((item) =>
    item.id === targetId ? { ...item, done: true } : item
);

console.log(items.map((item) => item.done).join(","));
console.log(nextItems.map((item) => item.done).join(","));

type Item = {
    id: number;
    done: boolean;
};

const targetId: number = 3;
const items: Item[] = [
    { id: 1, done: false },
    { id: 2, done: false },
    { id: 3, done: false },
];

const nextItems: Item[] = items.map((item) =>
    item.id === targetId ? { ...item, done: true } : item
);

console.log(items.map((item) => item.done).join(","));
console.log(nextItems.map((item) => item.done).join(","));

  1. targetId ← 2, items ← [object Object],[object Object],[object Object]

    3    done: boolean;4};56const targetId→ 2: number = 2;  //@targetId=1, 37const items→ [object Object],[object Object],[object Object]: Item[] = [8    { id: 1, done: false },9    { id: 2, done: false },10    { id: 3, done: false },11];1213const nextItems→ [object Object],[object Object],[object Object]: Item[] = items[object Object],[object Object],[object Object].map((item) =>14    item.id === targetId ? { ...item, done: true } : item15);1617console.log(items[object Object],[object Object],[object Object].map((item) => item.done).join(","));18console.log(nextItems[object Object],[object Object],[object Object].map((item) => item.done).join(","));
    outputfalse,false,false
false,true,false

  1. targetId ← 1, items ← [object Object],[object Object],[object Object]

    3    done: boolean;4};56const targetId→ 1: number = 1;7const items→ [object Object],[object Object],[object Object]: Item[] = [8    { id: 1, done: false },9    { id: 2, done: false },10    { id: 3, done: false },11];1213const nextItems→ [object Object],[object Object],[object Object]: Item[] = items[object Object],[object Object],[object Object].map((item) =>14    item.id === targetId ? { ...item, done: true } : item15);1617console.log(items[object Object],[object Object],[object Object].map((item) => item.done).join(","));18console.log(nextItems[object Object],[object Object],[object Object].map((item) => item.done).join(","));
    outputfalse,false,false
true,false,false

  1. targetId ← 3, items ← [object Object],[object Object],[object Object]

    3    done: boolean;4};56const targetId→ 3: number = 3;7const items→ [object Object],[object Object],[object Object]: Item[] = [8    { id: 1, done: false },9    { id: 2, done: false },10    { id: 3, done: false },11];1213const nextItems→ [object Object],[object Object],[object Object]: Item[] = items[object Object],[object Object],[object Object].map((item) =>14    item.id === targetId ? { ...item, done: true } : item15);1617console.log(items[object Object],[object Object],[object Object].map((item) => item.done).join(","));18console.log(nextItems[object Object],[object Object],[object Object].map((item) => item.done).join(","));
    outputfalse,false,false
false,false,true