How do you add and remove array items?

The first question to answer is whether you want to change the array in place or produce a new one. Mixing the two up is the usual source of bugs.

Mutating methods

arr.push(4);            // add to the end
arr.pop();              // remove from the end
arr.unshift(0);         // add to the start
arr.shift();            // remove from the start
arr.splice(2, 1);       // remove 1 item at index 2
arr.splice(2, 0, "x");  // insert without removing
arr[1] = "new";         // update by index

splice is the general-purpose one: start index, how many to delete, then any items to insert.

Non-mutating equivalents

const added = [...arr, 4];
const prepended = [0, ...arr];
const removed = arr.filter((x) => x !== target);
const removedAt = arr.toSpliced(2, 1);
const updated = arr.map((x) => (x.id === id ? { ...x, done: true } : x));

Newer methods toSorted, toReversed, toSpliced and with are the copying versions of sort, reverse, splice and index assignment.

Why it matters

React and similar libraries compare references to decide whether to re-render. arr.push(x) leaves the reference unchanged, so the update is missed — this is the most common cause of "my list will not update". State always needs the copying form.

Mutation is also visible to everyone holding the array, so a function that sorts its argument quietly reorders the caller's data.

Two gotchas

delete arr[1] leaves a hole rather than shortening the array — length is unchanged and the slot becomes undefined. Use splice or filter.

And check return values: push returns the new length, splice returns the removed items, map/filter return the new array. Writing arr = arr.push(x) assigns a number.