Unit 2: Functions & Loops
Teach the computer new words.
Unit 2 of 10 in JavaScript for kids. Its 5 lessons are Making Functions, Sending Answers Back, Arrow Functions, Keep Going Until and Function Factory — 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.
🧰 Making Functions
Your own commands
Python used def. JavaScript uses function, and wraps the body in curly braces. Nothing runs until you *call* it by name.
JavaScript
function cheer() {
console.log("Woohoo!");
}
cheer();
cheer();It prints
Woohoo! Woohoo!
Handing things in
Names inside the brackets are parameters — the values you pass in each time you call.
JavaScript
function greet(name) {
console.log(`Hi ${name}`);
}
greet("Zoe");
greet("Max");It prints
Hi Zoe Hi Max
Try it yourself
What does this print?
JavaScript
function hello() {
console.log("hi");
}- hi
- hello
- nothing — it was never called
- an error
What does this print?
JavaScript
function shout(word) {
console.log(word + "!");
}
shout("go");Answer them in the app
↩️ Sending Answers Back
Printing is not answering
A function that returns hands its answer back, so the rest of your code can use it. Printing only puts it on the screen and throws it away.
JavaScript
function double(n) {
return n * 2;
}
const answer = double(5);
console.log(answer + 1);It prints
11
A function with no return
Leave return out and JavaScript quietly hands back undefined — the usual reason a mysterious undefined turns up in your output.
JavaScript
function shout(word) {
console.log(word + "!");
}
const result = shout("hi");
console.log(result);It prints
hi! undefined
Try it yourself
What does this print?
JavaScript
function add(a, b) {
return a + b;
}
console.log(add(2, 3) + add(1, 1));Python gives back None when nothing is returned. What does JavaScript give?
- None
- null
- undefined
- 0
Answer them in the app
🏹 Arrow Functions
A shorter way to write one
JavaScript lets you store a function in a variable and write it with an arrow. It does exactly the same job — you will see this style everywhere in real code.
JavaScript
const double = (n) => {
return n * 2;
};
console.log(double(5));It prints
10
Even shorter
If the function is a single expression, drop the braces and the return — the answer is handed back automatically.
JavaScript
const double = (n) => n * 2;
const add = (a, b) => a + b;
console.log(double(7));
console.log(add(2, 3));It prints
14 5
Try it yourself
What does this print?
JavaScript
const square = (n) => n * n;
console.log(square(6));Why does const half = (n) => { n / 2 }; give undefined?
- Arrows cannot divide
- With braces you must write return yourself — the short form only works without them
- n is not a number
- It needs two arrows
Answer them in the app
♾️ Keep Going Until
When you do not know how many times
A for loop needs the count up front. A while loop keeps going as long as its test stays true.
JavaScript
let lives = 3;
while (lives > 0) {
console.log(lives);
lives = lives - 1;
}It prints
3 2 1
Jumping out early
break leaves the loop at once, whatever the test says.
JavaScript
for (const n of [3, 7, 2, 9]) {
if (n > 5) {
console.log(`found ${n}`);
break;
}
}It prints
found 7
Try it yourself
What is the LAST number this prints?
JavaScript
let n = 1;
while (n < 20) {
console.log(n);
n = n * 2;
}Why must this loop use let and not const?
JavaScript
let n = 5;
while (n > 0) {
n = n - 1;
}- while only works with let
- n has to change every turn, and const cannot be changed
- const is slower
- It could use const
Answer them in the app
🏆 Function Factory
Try it yourself
What does this print?
JavaScript
const shout = (word) => word.toUpperCase() + "!";
console.log(shout("hello"));What does this print?
JavaScript
function countdown(from) {
let out = "";
while (from > 0) {
out = out + from;
from = from - 1;
}
return out;
}
console.log(countdown(4));Answer them in the app