Arrays & Array Methods

The idea

A numbered row of boxes, indexed starting from 0 - push adds a brand new box onto the end of the row.

What it actually is

An array is a numbered list of values, stored in one variable. The numbering starts at 0, not 1 - so the first item is at position 0, the second at position 1, and so on. push() adds a new item to the end, and .length tells you how many items are in the list right now.

How you write it

let items = [value1, value2];
items.push(newValue);
items[index]
items.length

A worked example

let pets = ["Rex", "Milo"];
pets.push("Whiskers");
console.log(pets[2]);
console.log(pets.length);

pets starts with 2 items. push("Whiskers") adds a third item to the end. Since indices start at 0, pets[0] is Rex, pets[1] is Milo, and pets[2] is the new Whiskers. .length is now 3.

let scores = [10, 20, 30];
scores.push(40);
console.log(scores[0]);
console.log(scores.length);

scores[0] is always the FIRST item (10 here) - a common trip-up is expecting index 1 to be the first item, but counting starts at 0.

Mistakes children actually make

Mistake 1: assuming arr[1] is the first item - it's actually the SECOND, since indices start at 0. arr[0] is always the first. Mistake 2: writing arr.length() with parentheses - .length is a property (a number JavaScript already knows), not a function you call, so no ( ) after it. Mistake 3: expecting an out-of-range index like pets[10] to crash - it doesn't; JavaScript just gives back undefined silently when there's no item at that position, so a typo'd index can go unnoticed.

Then they try it

In the app this lesson continues with the animated explanation, spoken aloud, and then the practice: Add "Max" to the team array using push, then print team[2] and team.length. The editor runs your child’s real code and checks the result, with their coding buddy reacting to what they wrote.