Unit 6: Scope & Shortcuts

Where names live.

Unit 6 of 10 in JavaScript for kids. Its 6 lessons are Where Names Live, Default & Extra Arguments, Spreading Out, Unpacking, Functions That Remember and Shortcut Champion — 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.

🏠 Where Names Live

A function gets its own room

A name made inside a function belongs to that function. Even with the same spelling, it is a different box from the one outside.

JavaScript

let score = 10;

function bonus() {
  let score = 99;
  console.log(score);
}

bonus();
console.log(score);

It prints

99
10

Curly braces make rooms too

A let or const inside { } only exists inside those braces. Outside, the name is simply not there — which typeof reports as undefined instead of crashing.

JavaScript

if (true) {
  let secret = "inside";
  console.log(secret);
}

console.log(typeof secret);

It prints

inside
undefined

Try it yourself

Why is the second line still 10?

The function did not run
The score inside the function is a different box that only exists in there
console.log remembers old values
let cannot be changed

What happens if you write console.log(secret) outside the braces?

It prints undefined
It stops with a ReferenceError — that name does not exist out there
It prints an empty line
It prints "inside"

Answer them in the app

🎛️ Default & Extra Arguments

A value for when nobody says

Give a parameter an = value and it becomes optional — exactly like a Python default argument.

JavaScript

function greet(name = "friend") {
  console.log(`Hi ${name}`);
}

greet("Sam");
greet();

It prints

Hi Sam
Hi friend

As many as you like

...nums scoops up every extra argument into an array, so the function can take two numbers or twenty.

JavaScript

function total(...nums) {
  let sum = 0;
  for (const n of nums) {
    sum = sum + n;
  }
  return sum;
}

console.log(total(1, 2));
console.log(total(1, 2, 3, 4));

It prints

3
10

Try it yourself

What does this print?

JavaScript

function power(base, times = 2) {
  let out = 1;
  for (let i = 0; i < times; i++) {
    out = out * base;
  }
  return out;
}

console.log(power(3));

What is nums inside function total(...nums)?

A single number
An array holding every argument that was passed
A string
Always empty

Answer them in the app

✳️ Spreading Out

Tipping an array into another one

The same ... works the other way round: in front of an array it tips all the items out where you write it.

JavaScript

const small = [1, 2];
const big = [0, ...small, 3];
console.log(big);

It prints

[ 0, 1, 2, 3 ]

Copying instead of sharing

Two names can point at the *same* array, so changing one changes both. [...a] makes a real copy, which does not.

JavaScript

const a = [1, 2];
const b = a;
const c = [...a];

b.push(3);
console.log(a);
console.log(c);

It prints

[ 1, 2, 3 ]
[ 1, 2 ]

It works on objects too

Spreading an object copies its names across, and anything you write afterwards is added on top.

JavaScript

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

It prints

{ name: 'Rex', age: 4 }

Try it yourself

Why did pushing onto b change a as well?

push always changes every array
b and a are two names for one single array
a was a const
It is a bug in JavaScript

What does this print?

JavaScript

console.log(Math.max(...[4, 9, 2]));

Answer them in the app

📥 Unpacking

Taking an array apart

Put names in square brackets on the left and each one grabs the item in that position. Python did this too, without the brackets.

JavaScript

const [first, second] = ["red", "green"];
console.log(first);
console.log(second);

It prints

red
green

Taking an object apart

With curly braces you unpack by name instead of by position, so the order you write them in does not matter.

JavaScript

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

It prints

Rex 4

Unpacking as it arrives

You can unpack right in the brackets of a function, so the body never has to say pet. at all.

JavaScript

function describe({ name, legs }) {
  console.log(`${name} has ${legs} legs`);
}

describe({ name: "Rex", legs: 4 });

It prints

Rex has 4 legs

Try it yourself

What does this print?

JavaScript

const [a, b] = [1, 2];
const [x, y] = [b, a];
console.log(x, y);

Answer it in the app

🧠 Functions That Remember

A function that builds a function

A function can hand back another function. The new one still remembers the values that were around when it was made — that memory is called a closure.

JavaScript

function makeAdder(n) {
  return (x) => x + n;
}

const add5 = makeAdder(5);
console.log(add5(3));

It prints

A private counter

Because nothing outside can reach count, this is the tidiest way to keep a value safe and still let it change.

JavaScript

function makeCounter() {
  let count = 0;
  return () => {
    count = count + 1;
    return count;
  };
}

const click = makeCounter();
console.log(click());
console.log(click());

It prints

1
2

Functions are values

You already handed functions to map and filter. Any function of yours can take one too — it is just another value.

JavaScript

function twice(fn, value) {
  return fn(fn(value));
}

console.log(twice((n) => n + 3, 10));

It prints

Try it yourself

makeAdder finished ages ago. How does add5 still know about 5?

It looks it up again each time
The inner function kept the room it was born in, with n still inside
JavaScript guesses
5 is stored globally

What does this print?

JavaScript

function makeMultiplier(by) {
  return (n) => n * by;
}

const triple = makeMultiplier(3);
console.log(triple(4));

Answer them in the app

🏆 Shortcut Champion

Try it yourself

What does this print?

JavaScript

const [head, ...rest] = [1, 2, 3, 4];
console.log(head);
console.log(rest);

What does this print?

JavaScript

function makeBank(start = 0) {
  let coins = start;
  return {
    add: (n) => (coins = coins + n),
    total: () => coins,
  };
}

const bank = makeBank(10);
bank.add(5);
console.log(bank.total());

Answer them in the app