Unit 7: Classes

Blueprints for things.

Unit 7 of 10 in JavaScript for kids. Its 6 lessons are Your First Class, Methods & this, Getters, Setters & Static, Inheritance, Many Shapes and Class 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.

🏗️ Your First Class

A blueprint, not a thing

A class describes what every one of something looks like. new builds one. The constructor runs at that moment and fills it in — the same job as Python's __init__.

JavaScript

class Dog {
  constructor(name) {
    this.name = name;
  }
}

const rex = new Dog("Rex");
console.log(rex.name);

It prints

Rex

One blueprint, many things

Build as many as you like. Each one keeps its own values — changing one never touches another.

JavaScript

class Dog {
  constructor(name, legs) {
    this.name = name;
    this.legs = legs;
  }
}

const rex = new Dog("Rex", 4);
const bo = new Dog("Bo", 3);
console.log(rex.name, bo.legs);

It prints

Rex 3

Try it yourself

What does new do?

Nothing, it is optional
Makes a brand new empty object and runs the constructor on it
Copies the class
Deletes the old one

What does this print?

JavaScript

class Box {
  constructor(size) {
    this.size = size;
  }
}

const b = new Box(7);
console.log(b.size);

Answer them in the app

🛠️ Methods & this

Things a class can do

A method is a function that lives in the class. Inside it, this means the exact object it was called on. Note there is no function keyword and no self parameter.

JavaScript

class Dog {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} says woof`);
  }
}

new Dog("Rex").speak();

It prints

Rex says woof

Methods can change the object

Because this really is the object, a method can update it and the change sticks.

JavaScript

class Counter {
  constructor() {
    this.count = 0;
  }

  add() {
    this.count = this.count + 1;
  }
}

const c = new Counter();
c.add();
c.add();
console.log(c.count);

It prints

Try it yourself

What does this mean inside a method?

The class itself
The particular object the method was called on
The last object made
The whole program

What does this print?

JavaScript

class Bank {
  constructor() {
    this.coins = 10;
  }

  spend(n) {
    this.coins = this.coins - n;
    return this.coins;
  }
}

const b = new Bank();
b.spend(3);
console.log(b.spend(2));

Answer them in the app

🔐 Getters, Setters & Static

A value that is really a sum

A get method is read like a plain property — no brackets — but it runs code each time. Python spells this @property.

JavaScript

class Rect {
  constructor(w, h) {
    this.w = w;
    this.h = h;
  }

  get area() {
    return this.w * this.h;
  }
}

const r = new Rect(3, 4);
console.log(r.area);

It prints

Guarding what goes in

A set method runs when someone assigns, so the class can refuse silly values instead of trusting whoever is using it.

JavaScript

class Player {
  constructor() {
    this._lives = 3;
  }

  get lives() {
    return this._lives;
  }

  set lives(n) {
    this._lives = n < 0 ? 0 : n;
  }
}

const p = new Player();
p.lives = -5;
console.log(p.lives);

It prints

Methods that need no object

A static method belongs to the class itself. You call it on the class name, without new — Math.max works exactly this way.

JavaScript

class Helper {
  static double(n) {
    return n * 2;
  }
}

console.log(Helper.double(6));

It prints

Try it yourself

Why is there no () after r.area?

It is a mistake
A getter is written like a method but read like a property
Brackets are optional everywhere
area is stored in the constructor

What is true about a static method?

It cannot take arguments
You call it on the class, not on an object you made
It runs automatically
It can only return numbers

Answer them in the app

🧬 Inheritance

Building on something that exists

extends says "start from that class, then change what is different". The child gets every method of the parent for free, and may replace any of them.

JavaScript

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} says woof`);
  }
}

new Animal("Generic").speak();
new Dog("Rex").speak();

It prints

Generic makes a sound
Rex says woof

Adding to the parent's setup

When the child needs its own constructor, super(...) runs the parent's first. Only after that is this ready to use.

JavaScript

class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Animal {
  constructor(name, trick) {
    super(name);
    this.trick = trick;
  }
}

const rex = new Dog("Rex", "roll");
console.log(rex.name, rex.trick);

It prints

Rex roll

Try it yourself

Dog has no constructor of its own. Where did this.name come from?

Dog made it up
Dog borrowed the constructor from Animal
It is empty
From the console

What happens if a child constructor forgets super()?

Nothing, it is optional
It stops with an error — you cannot touch this before super has run
The parent is deleted
The child becomes empty but works

Answer them in the app

🎭 Many Shapes

One loop, different answers

When several classes share a method name, code that uses them does not need to know which is which. That is polymorphism — one word, many shapes.

JavaScript

class Animal {
  speak() {
    return "...";
  }
}

class Dog extends Animal {
  speak() {
    return "woof";
  }
}

class Cat extends Animal {
  speak() {
    return "meow";
  }
}

for (const a of [new Dog(), new Cat()]) {
  console.log(a.speak());
}

It prints

woof
meow

Adding to the parent instead of replacing it

super.speak() calls the parent's version, so the child can build on it rather than throw it away.

JavaScript

class Animal {
  speak() {
    return "sound";
  }
}

class Dog extends Animal {
  speak() {
    return super.speak() + " woof";
  }
}

console.log(new Dog().speak());

It prints

sound woof

Try it yourself

Why is the loop allowed to stay so simple?

Because every animal is really a dog
Because each object knows its own version of speak
Because the loop checks the type first
Because they are all in one array

What does this print?

JavaScript

class Card {
  describe() {
    return "a card";
  }
}

class Hero extends Card {
  describe() {
    return "a hero: " + super.describe();
  }
}

console.log(new Hero().describe());

Answer them in the app

🏆 Class Champion

Try it yourself

What does this print?

JavaScript

class Robot {
  constructor(name) {
    this.name = name;
    this.charge = 100;
  }

  work(n) {
    this.charge = this.charge - n;
    return this;
  }

  get status() {
    return `${this.name}: ${this.charge}%`;
  }
}

console.log(new Robot("Bit").work(30).work(20).status);

What does this print?

JavaScript

class Base {
  hello() {
    return "base";
  }
}

class Mid extends Base {
  hello() {
    return super.hello() + "-mid";
  }
}

class Top extends Mid {
  hello() {
    return super.hello() + "-top";
  }
}

console.log(new Top().hello());

Answer them in the app