Unit 3: Arrays

Lists that do tricks.

Unit 3 of 10 in JavaScript for kids. Its 5 lessons are Lists, JavaScript Style, Growing Arrays, Walking Through, Array Superpowers and Array Master — below is everything each one explains, and a question or two from it to try.

Every sample on this page was run before it shipped, the same way the app runs it, and prints exactly what it says it prints.

This unit opens with a fortnight’s trial of everything — no card needed — or with a family plan, bought in the iPhone app. The first two units of every track are free for ever. Try it in the app.

📋 Lists, JavaScript Style

Almost exactly like a Python list

An array holds many values in order, in square brackets. Counting starts at 0. The only real difference from Python is .length instead of len().

JavaScript

const pets = ["cat", "dog", "fish"];
console.log(pets[0]);
console.log(pets.length);

It prints

cat
3

Asking for something that is not there

Python raises an error if you go past the end. JavaScript quietly hands back undefined — no crash, no warning, which makes it easy to miss.

JavaScript

const nums = [4, 8, 15];
console.log(nums[9]);

It prints

undefined

Try it yourself

How do you count how many items an array holds?

len(pets)
pets.len
pets.length
pets.count()

What does this print?

JavaScript

const nums = [4, 8, 15];
console.log(nums[2]);

Answer them in the app

📈 Growing Arrays

Adding and removing

push adds to the end, pop takes the last one off and hands it back. Same idea as Python append and pop.

JavaScript

const pets = ["cat"];
pets.push("dog");
console.log(pets);
const last = pets.pop();
console.log(last);

It prints

[ 'cat', 'dog' ]
dog

const arrays can still change

This surprises everyone. const stops you pointing the name at a *different* array — it does not freeze what is inside. Pushing is fine; reassigning is not.

JavaScript

const nums = [1, 2];
nums.push(3);
console.log(nums);

It prints

[ 1, 2, 3 ]

Try it yourself

What does this print?

JavaScript

const nums = [1, 2];
nums.push(3);
console.log(nums.length);

Which line would actually fail with a const array?

nums.push(4)
nums[0] = 9
nums = [7, 8]
nums.pop()

Answer them in the app

🚶 Walking Through

The tidy loop

for...of walks straight through the values — the closest thing to Python's for pet in pets.

JavaScript

const pets = ["cat", "dog"];
for (const pet of pets) {
  console.log(pet);
}

It prints

cat
dog

Doing something to each one

forEach runs a function once for every item. Your first time handing a function to another function.

JavaScript

const pets = ["cat", "dog"];
pets.forEach((pet) => {
  console.log(`I have a ${pet}`);
});

It prints

I have a cat
I have a dog

Try it yourself

What does this print?

JavaScript

const nums = [1, 2, 3];
let total = 0;
for (const n of nums) {
  total = total + n;
}
console.log(total);

What is the difference between for...of and for...in?

They are the same
of gives you the values; in gives you the positions
in is faster
of only works on strings

Answer them in the app

⚡ Array Superpowers

Making a new array from an old one

map runs your function on every item and builds a new array from the answers. The original is untouched.

JavaScript

const nums = [1, 2, 3];
const doubled = nums.map((n) => n * 2);
console.log(doubled);
console.log(nums);

It prints

[ 2, 4, 6 ]
[ 1, 2, 3 ]

Keeping only some

filter keeps the items your function says true for.

JavaScript

const nums = [4, 7, 10, 3];
const big = nums.filter((n) => n > 5);
console.log(big);

It prints

[ 7, 10 ]

Two more worth knowing

includes asks whether something is in there. join glues an array into one string.

JavaScript

const pets = ["cat", "dog"];
console.log(pets.includes("dog"));
console.log(pets.join(" and "));

It prints

true
cat and dog

Try it yourself

What does this print?

JavaScript

const nums = [1, 2, 3];
console.log(nums.map((n) => n * 10));

What does this print?

JavaScript

const nums = [1, 2, 3, 4, 5, 6];
console.log(nums.filter((n) => n % 2 === 0));

Answer them in the app

🏆 Array Master

Try it yourself

What does this print?

JavaScript

const words = ["a", "bb", "ccc"];
console.log(words.map((w) => w.length));

What does this print?

JavaScript

const nums = [5, 2, 9];
let best = 0;
for (const n of nums) {
  if (n > best) {
    best = n;
  }
}
console.log(best);

Answer them in the app