4.3 — Growing & shrinking
Real collections never sit still. A café's order list grows as people order and shrinks as drinks go out. A browser's history grows with every page. Yesterday's array-by-index tricks can't do this — assigning to orders[2] replaces an element, but it can't make room or close a gap.
Arrays carry four built-in methods for exactly this, two per end: push and pop work at the end; unshift and shift work at the front.
Same four verbs power everything from undo stacks to print queues — and one of them is secretly more expensive than the others. You'll see which.
const orders = ["latte", "mocha"];
orders.push("chai");
console.log(orders);
const next = orders.shift();
console.log(next);
orders.unshift("espresso");
console.log(orders);
orders.pop();
console.log(orders.length);The café opens with two orders. Watch the cells and their indexes below — the whole lesson is about what happens to EXISTING elements when the array grows or shrinks.
The deeper story, with the real names for things — this part is what turns “I saw it” into “I can explain it.”
All four methods mutate the array — they change the one you already have rather than making a new one. The variable still points at the same array; only its contents and .length changed. (Keep the phrase “the same array” in your pocket — lesson 4.6 turns it into the most important idea of this phase.)
Each also returns a value, and mixing them up is a classic bug. pop and shift return the removed element. push and unshift return the new length. So const t = list.push("x") puts a number in t, not the text — a mistake you'll now spot at a glance.
The cost difference is real, not folklore. In lesson 4.2’s labels: end work is O(1), front work is O(n). Elements sit in order in memory — so removing the front re-indexes every survivor, while the end just grows or shrinks in place. It's the supermarket queue versus the plate stack. When the first person leaves a queue, the whole line shuffles forward. The top plate lifts off a stack, and no other plate moves.
⌨️ a day in a to-do list
Your to-do list changes all day: urgent things cut the line, finished things leave, new things join at the back. Mutate ONE array through the whole day — never rebuild it by hand.
requirements:
- Start with an array named
todosholding"email boss"and"water plants", in that order. - An urgent task arrives:
"call plumber"must enter at the front of the array. - You do the front task immediately — remove it from the front.
- Add
"gym"at the end, then print the array, then print how many tasks it holds.
when you press RUN, the console must show exactly:
✏️ Quick check 1
Type exactly what this prints:
const q = ["ana", "ben", "cara"]; const x = q.shift(); console.log(x);
✏️ Quick check 2
Careful — type exactly what this prints:
const s = [5, 6]; console.log(s.push(7));
✏️ Quick check 3
Type exactly what this prints:
const t = ["x", "y", "z"]; t.shift(); console.log(t[0]);
🗣️ Now teach it back
Explain to a friend why removing the first element of a huge array is slower than removing the last one — and what pop and push each hand back when called.
Write it as if your friend is sitting next to you. Saved to your journal — future-you will use these notes to teach others.