Unit 5: Types & Choices

What kind of thing is this?

Unit 5 of 10 in JavaScript for kids. Its 5 lessons are What Type Is It?, Changing Types, Truthy & Falsy, switch and Type Detective — 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.

🔍 What Type Is It?

Asking what something is

typeof tells you what kind of value you are holding. It hands back a word.

JavaScript

console.log(typeof "hi");
console.log(typeof 7);
console.log(typeof true);

It prints

string
number
boolean

Empty, and empty on purpose

undefined means "nobody put anything here yet". null means "I deliberately put nothing here". typeof null says object — a famous 30-year-old mistake in JavaScript that can never be fixed without breaking the web.

JavaScript

let prize;
console.log(prize);
const empty = null;
console.log(empty);
console.log(typeof null);

It prints

undefined
null
object

Try it yourself

What does typeof "7" give?

number
string
text
undefined

What does this print?

JavaScript

const a = 5;
const b = "5";
console.log(typeof a, typeof b);

Answer them in the app

🔄 Changing Types

Turning one into the other

Number(...) turns text into a number. String(...) turns a number into text. Same as Python's int() and str(), different spelling.

JavaScript

console.log(Number("12") + 1);
console.log(String(12) + 1);

It prints

13
121

JavaScript converts behind your back

With +, if either side is text JavaScript glues instead of adding. With - there is no gluing to do, so it turns the text into a number instead. Two different answers from the same pair of values.

JavaScript

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

It prints

53
2

When it cannot be a number

parseInt reads the number off the front and stops. If there is no number at all you get NaN — Not a Number. NaN never equals anything, even itself, so you ask Number.isNaN(...).

JavaScript

console.log(parseInt("12px"));
console.log(Number("abc"));
console.log(Number.isNaN(Number("abc")));

It prints

12
NaN
true

Try it yourself

What does this print?

JavaScript

console.log("10" * 2);

What is NaN?

Zero
What you get when a sum makes no sense, like Number("abc")
An error that stops your program
An empty string

Answer them in the app

⚖️ Truthy & Falsy

Things that count as "no"

An if will accept anything, not just true and false. Six values count as "no": false, 0, "", null, undefined and NaN. Everything else counts as "yes".

JavaScript

if ("") {
  console.log("yes");
} else {
  console.log("no");
}

It prints

no

Filling in a missing value

|| hands back the first "yes" it finds. ?? is fussier: it only steps in for null or undefined. That difference matters the moment a real value is 0.

JavaScript

const score = 0;
console.log(score || 10);
console.log(score ?? 10);

It prints

10
0

An if that fits on one line

The ? picks between two values: question ? this-if-yes : this-if-no. Handy when you only want to choose a value, not run a block.

JavaScript

const age = 12;
const label = age > 10 ? "big" : "small";
console.log(label);

It prints

big

Try it yourself

Which one of these counts as "no"?

"0"
0
"no"
[]

What does this print?

JavaScript

const lives = 0;
console.log(lives ?? 3);

Answer them in the app

🚦 switch

Many answers to one question

When one value has lots of possible matches, switch reads better than a pile of else if. default is the "none of these" case.

JavaScript

const pet = "dog";

switch (pet) {
  case "cat":
    console.log("Meow");
    break;
  case "dog":
    console.log("Woof");
    break;
  default:
    console.log("Hello?");
}

It prints

Woof

Try it yourself

What does break do in a switch?

Stops the whole program
Stops it running the cases underneath as well
Nothing, it is decoration
Repeats the case

What does this print? (There is a missing break!)

JavaScript

const n = 1;

switch (n) {
  case 1:
    console.log("one");
  case 2:
    console.log("two");
    break;
  case 3:
    console.log("three");
}

Answer them in the app

🏆 Type Detective

Try it yourself

What does this print?

JavaScript

console.log(typeof (1 + "1"));

What does this print?

JavaScript

console.log(Boolean(""));
console.log(Boolean("0"));

Answer them in the app