Unit 1: Hello, JavaScript

Same ideas, new spelling.

Unit 1 of 10 in JavaScript for kids. Its 5 lessons are console.log, let & const, Curly Braces, And, Or, Not and Loop 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 is free for ever, because the first two units of every track are. Try it in the app.

💬 console.log

Printing, the JavaScript way

JavaScript says console.log instead of print. Lines usually end with a semicolon ;. Everything else feels familiar.

JavaScript

console.log("Hello!");

It prints

Hello!

Try it yourself

Which line prints in JavaScript?

print("hi")
console.log("hi")
echo "hi"
say("hi")

What does this print?

JavaScript

console.log(3 + 4);

Answer them in the app

📦 let & const

Two kinds of box

JavaScript wants you to say what kind of box you are making. let can be changed later. const is locked forever. Use const unless you know it needs to change.

JavaScript

let score = 0;
const name = "Ada";
score = 10;
console.log(score);

It prints

Gluing text

Backticks let you drop a variable straight into text with ${...}. Much tidier than gluing with +.

JavaScript

const name = "Sam";
console.log(`Hi ${name}`);

It prints

Hi Sam

Try it yourself

Which one can you change later?

const
let
both
neither

What goes wrong here?

JavaScript

const lives = 3;
lives = 2;

Nothing, it works
You cannot change a const
lives is spelled wrong
It needs quotes

Answer them in the app

🔀 Curly Braces

Braces instead of spaces

Python used indenting to show what is inside an if. JavaScript uses curly braces { }, and the question goes in round brackets.

JavaScript

const age = 7;
if (age > 10) {
  console.log("Big kid");
} else {
  console.log("Little kid");
}

It prints

Little kid

Try it yourself

What does this print?

JavaScript

const coins = 12;
if (coins > 10) {
  console.log("Rich!");
} else {
  console.log("Saving");
}

Rich!
Saving
both
nothing

JavaScript has both == and ===. Which should you use?

== , it is shorter
=== , it checks the value AND the type
They are identical
Neither, use =

Answer them in the app

🔗 And, Or, Not

Symbols instead of words

Python spelled these out. JavaScript uses symbols: && for and, || for or, ! for not. The meaning is identical.

JavaScript

console.log(true && false);
console.log(true || false);
console.log(!true);

It prints

false
true
false

Try it yourself

Which one means "and"?

What does this print?

JavaScript

const age = 12;
console.log(age > 10 && age < 15);

Answer them in the app

🏆 Loop Master

Looping in JavaScript

The classic for loop packs three things into the brackets: where to start, when to stop, and how to step.

JavaScript

for (let i = 0; i < 3; i++) {
  console.log(i);
}

It prints

0
1
2

Try it yourself

How many times does this loop run?

JavaScript

for (let i = 0; i < 5; i++) {
  console.log("hi");
}

4
5
6
forever

What is the last number printed?

JavaScript

for (let i = 1; i <= 4; i++) {
  console.log(i);
}

Answer them in the app