Changing a list: adding, removing, copying

Arrays come with a lot of built-in methods, and learning them one at a time as a list of names is miserable. There is a much better organising idea: every one of them either changes the array you called it on, or leaves it completely alone and hands you a new array.

MDN groups them under exactly those two headings — copying methods and mutating methods. Once you know which group a method is in, its behaviour stops being something to memorise. `push` is mutating, so it changes your array. `slice` is copying, so it cannot.

This matters more than it sounds. Most bugs in code that handles lists come from a mutating method being called on an array that belonged to somebody else, and this lesson is really about learning to notice which one you are holding.

Four methods work on the ends of an array. `push(value)` adds to the end and `pop()` removes from the end. `unshift(value)` adds to the start and `shift()` removes from the start. All four change the array in place — after `list.push(4)`, `list` itself is longer.

The two that remove hand you back the element they removed, which is often the whole point: `const next = queue.shift();` both takes the first person out of the queue and tells you who it was. On an empty array both `pop()` and `shift()` return `undefined` rather than throwing.

The two that add hand back the array's new length. That is a much less useful answer, and it is the source of the mistake in the next section.

`const bigger = list.push('c');` does not put an array in `bigger`. It puts a number there — the new length. The array that changed is `list`, which you already had.

This trips people up because `push` reads like it should produce the longer list. It does not, and the resulting bug is quiet: `bigger` is a number, so the next line that treats it as an array fails somewhere else entirely.

The rule to carry: if a method's job is to change the array, do not expect the array as its answer. Call it as a statement on its own line, and keep using the original name.

`slice(start, end)` returns a new array containing the elements from `start` up to but not including `end`. `[10, 20, 30, 40].slice(1, 3)` gives `[20, 30]` — index 1 and index 2, stopping before index 3. The original is untouched.

The end being excluded feels arbitrary until you notice it makes the arithmetic pleasant: the number of elements you get is simply `end - start`, and `slice(0, 2)` reads as the first two.

Two shorthands are worth having. `slice()` with no arguments copies the whole array — the standard way to get an array you are allowed to damage. And a negative number counts back from the end, so `slice(0, -1)` means everything except the last element.

`splice` is spelled one letter away from `slice` and does close to the opposite thing. `list.splice(start, count)` removes `count` elements starting at `start`, changes `list` in place, and returns an array of the elements it removed.

So `slice(1, 3)` gives you a copy of two elements and leaves the array alone, while `splice(1, 3)` rips three elements out of the array and gives you those. Reading code quickly and seeing the wrong one is a genuinely common mistake, and the symptom — the caller's data quietly shrinking — is hard to trace back.

`splice` is not a bad method. It is the clearest way to remove an element from the middle, and if the array is one you built yourself a moment ago, mutating it is fine. The danger is only ever about whose array it is.

When a function is handed an array and returns a changed version, the caller almost never expects their own array to have moved. `concat` is the copying way to add: `base.concat('c')` returns a new array with `'c'` on the end and leaves `base` exactly as it was.

The habit that follows is worth adopting now, because the rest of this module builds on it: copy first, then change the copy, then return the copy. It costs a little memory and buys you functions that are safe to call from anywhere.

Lesson 5 introduces a second, shorter way to write the same thing using `...`, and Lesson 6 explains precisely what a copy does and does not protect. For now, `slice` and `concat` are enough.

push, pop, shift, unshift and splice change the array you call them on. slice and concat build a new one. The removers give you the removed element, the adders give you the new length, and slice's end index is excluded. When the array came from somewhere else, copy before you change it.