Unit 4: Words, Objects & Maths

Model real things.

Unit 4 of 10 in JavaScript for kids. Its 5 lessons are Text Tools, Objects, Objects in Arrays, Numbers & Maths and Data Wrangler — 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.

🔤 Text Tools

Reaching into a word

Strings behave much like arrays: square brackets for a letter, .length for the size. Note it is .length, not len().

JavaScript

const word = "code";
console.log(word[0]);
console.log(word.length);

It prints

c
4

Cutting and changing

slice takes a piece, stopping before the second number. toUpperCase and replace hand back a new string — the original never changes.

JavaScript

const word = "dragon";
console.log(word.slice(0, 3));
console.log(word.toUpperCase());
console.log(word);

It prints

dra
DRAGON
dragon

Breaking a sentence up

split chops a string into an array, cutting wherever it finds the thing you name.

JavaScript

const words = "red green blue".split(" ");
console.log(words);
console.log(words.length);

It prints

[ 'red', 'green', 'blue' ]
3

Try it yourself

What does this print?

JavaScript

const word = "dragon";
console.log(word[word.length - 1]);

What does this print?

JavaScript

console.log("birthday".slice(0, 5));

Answer them in the app

📦 Objects

Labels instead of positions

An object stores values under names you choose, exactly like a Python dictionary. Curly braces, and you reach in with a dot.

JavaScript

const pet = { name: "Rex", legs: 4 };
console.log(pet.name);
console.log(pet.legs);

It prints

Rex
4

Adding and changing

Assign to a name that does not exist and it gets added. Ask for one that does not exist and you get undefined — no crash, unlike Python.

JavaScript

const pet = { name: "Rex" };
pet.legs = 4;
console.log(pet);
console.log(pet.colour);

It prints

{ name: 'Rex', legs: 4 }
undefined

Try it yourself

How is an object different from an array?

Objects can only hold text
You reach in by a name you chose, not by a position number
Objects cannot change
There is no difference

What does this print?

JavaScript

const kid = { name: "Kim", age: 11 };
console.log(kid.age);

Answer them in the app

🗂️ Objects in Arrays

The shape almost all real data takes

Put objects inside an array and you can describe a whole class, a shop, a scoreboard. This is what most real programs are moving around.

JavaScript

const pets = [
  { name: "Rex", legs: 4 },
  { name: "Tweety", legs: 2 },
];

for (const pet of pets) {
  console.log(`${pet.name} has ${pet.legs} legs`);
}

It prints

Rex has 4 legs
Tweety has 2 legs

map and filter still work

Everything you learned about arrays applies — the items just happen to be objects now.

JavaScript

const pets = [
  { name: "Rex", legs: 4 },
  { name: "Tweety", legs: 2 },
];

console.log(pets.map((p) => p.name));
console.log(pets.filter((p) => p.legs === 4).length);

It prints

[ 'Rex', 'Tweety' ]
1

Try it yourself

What does this print?

JavaScript

const kids = [{ name: "Al" }, { name: "Bo" }];
console.log(kids[1].name);

What does this print?

JavaScript

const scores = [
  { who: "Al", score: 3 },
  { who: "Bo", score: 5 },
];
let total = 0;
for (const s of scores) {
  total = total + s.score;
}
console.log(total);

Answer them in the app

🎲 Numbers & Maths

Leftovers and whole numbers

% gives the remainder, exactly as in Python. But / always keeps the decimals — there is no //, so you round with Math.floor.

JavaScript

console.log(7 % 2);
console.log(7 / 2);
console.log(Math.floor(7 / 2));

It prints

1
3.5
3

The Math toolbox

Math holds the number helpers. Math.round, Math.max, Math.min, Math.abs — all with a capital M.

JavaScript

console.log(Math.round(3.7));
console.log(Math.max(4, 9));
console.log(Math.abs(-7));

It prints

4
9
7

Rolling a dice

Math.random() gives a decimal from 0 up to (but never reaching) 1. Multiply, floor it, and add 1 to turn that into a dice roll.

JavaScript

const roll = Math.floor(Math.random() * 6) + 1;
console.log(roll);

It prints

A different number from 1 to 6 every time

Try it yourself

What does this print? (Careful — this is different from Python!)

JavaScript

console.log(9 / 4);

Why the + 1 in Math.floor(Math.random() * 6) + 1?

To make it more random
Without it you would get 0 to 5, and dice start at 1
To round it up
It is not needed

Answer them in the app

🏆 Data Wrangler

Try it yourself

What does this print?

JavaScript

console.log("5" + 3);
console.log(Number("5") + 3);

What does this print?

JavaScript

const kids = [
  { name: "Al", score: 8 },
  { name: "Bo", score: 3 },
];
console.log(kids.filter((k) => k.score > 5).map((k) => k.name));

Answer them in the app