Growing and shrinking arrays

push, pop, and friends

A running program's data rarely stands still: a chat gains messages, a cart gains and loses items, a print queue drains. These methods are how an array changes while the program runs.

Python's append is JavaScript's push. The core moves:

pop and shift return the removed item, so you can catch it in a variable. indexOf answers -1 when the item is missing, rather than raising an error the way Python's index does.

One thing looks contradictory at first: these arrays are declared with const, yet push still works. const only stops the variable from being reassigned to a different array. Changing the contents of the same array is entirely allowed, and the last block of this lesson comes back to why.

Using an array as a stack

Four operations in one program: two pushes, one pop, and two lookups. The array here is used as a stack, meaning items are added and removed at the same end.

const stack = [];
stack.push("a");
stack.push("b");
console.log(stack);

const removed = stack.pop();
console.log(removed);

console.log(stack.includes("a"));
console.log(stack.indexOf("z"));

Output

[ 'a', 'b' ]
b
true
-1

Printing the array itself shows the brackets and quotes, which is a handy way to see the exact contents while learning. The pop() call does two things at once, removing "b" and handing it back, which is why const removed = stack.pop(); captures a value rather than nothing. After that removal includes("a") is still true, since only the last item left. The final line shows how a missing item is reported: indexOf answers -1 rather than raising an error, so any code using it has to check for -1 explicitly.

Three changes in a row on a shopping list

The order of operations is the whole point here. A list starting with one item gains two more, then loses whichever item ended up last.

const list = ["milk"];

list.push("bread");
list.push("eggs");
list.pop();

console.log(list);
console.log(list.length);

Output

[ 'milk', 'bread' ]
2

"eggs" was pushed last, so pop() is the call that removes it, leaving "milk" and "bread". The .length reports 2 immediately, because these methods change the array itself rather than producing a new one. That is worth noticing: nothing was reassigned to list, yet its contents are different than they were three lines earlier.

Using an array as a queue

A help desk serves people in arrival order, which makes it a queue: newcomers join the end with push, and service takes from the front with shift.

const queue = ["Ada", "Alan", "Grace"];
queue.push("Linus");
const first = queue.shift();
console.log(`Now serving: ${first}`);
console.log(queue.length);

Output

Now serving: Ada
3

shift() removes the front item and returns it, so const first = queue.shift(); is how the name gets into the message, built with a template literal from lesson 1-3. The length lands back at 3 because the queue gained one person and lost one person, and Ada was at the front the whole time even though Linus was the most recent arrival.

Why push works on a const array

Given const xs = [1, 2];, the call xs.push(3); runs perfectly well and leaves xs holding [1, 2, 3].

const locks the variable, not the contents. It promises that xs will keep pointing at the same array for as long as it exists, and it says nothing at all about what is inside that array. Growing it, shrinking it, and replacing individual items are all permitted. The only line that would throw TypeError: Assignment to constant variable. is a reassignment such as xs = [4, 5], which tries to aim the name at a different array altogether.

This is the first hint of a bigger idea. A variable holding an array does not contain the array, it holds a reference to it. Lesson 5-4 unpacks that fully, and it explains a whole family of surprises that otherwise look like magic.