Object-oriented JavaScript, from the beginning.

Where this is going

You are not expected to understand the code below yet. Run it anyway. By lesson 15 every line will be something you could have written, and you can come back here to check.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49// A class describes how to build something.
class Bus {
  #seatsLeft;                   // private: nothing outside can touch it
  static built = 0;             // belongs to the class, not to one object

  constructor(plate, seatsLeft) {
    this.plate = plate;         // public data, on this instance
    this.#seatsLeft = seatsLeft;
    Bus.built++;
  }

  get seatsLeft() { return this.#seatsLeft; }   // readable, not writable

  book(n) {                     // behaviour, shared by every bus
    if (n > this.#seatsLeft) throw new RangeError(`${this.plate}: only ${this.#seatsLeft} left`);
    this.#seatsLeft -= n;
    return this;                // returning this lets calls chain
  }

  describe() { return `${this.plate} has ${this.#seatsLeft} seats left`; }
}

// Inheritance: a more specific description, built on the general one.
class LuxuryBus extends Bus {
  constructor(plate, seatsLeft, extra) {
    super(plate, seatsLeft);    // build the Bus part first
    this.extra = extra;
  }

  describe() {                  // same name, different answer: polymorphism
    return super.describe() + `, with ${this.extra}`;
  }
}

const fleet = [
  new Bus('ABJ-772-KM', 6),
  new LuxuryBus('LAG-441-XA', 9, 'air conditioning'),
];

// One loop, two types, each answering in its own way.
for (const member of fleet) console.log(member.describe());

console.log('built so far:', Bus.built);
console.log('a LuxuryBus is also a Bus:', fleet[1] instanceof Bus);

fleet[1].book(3);
console.log(fleet[1].describe());

try { fleet[0].book(99); } catch (err) { console.log('refused:', err.message); }

What object-oriented actually means

Four ideas carry the whole subject. JavaScript's answers to them are unusual enough that learning OOP from a Java or Python tutorial will actively mislead you.

How to work through it

The order matters more here than in most courses, because lessons 04 to 07 are one continuous argument: factories, then constructors, then prototypes, then class. Read them in sequence and class arrives as an obvious shortcut. Skip to class first and it stays magic, which is where most working JavaScript developers are stuck.

1. Read with this page in one window and your editor in the other.
2. Run every example. When the output surprises you, change a line and run it again. That is the whole study method.
3. Do the task at the foot of each lesson before moving on. It is short on purpose.
4. After lesson 07 and again after 15, work through the drills, then build the project.

What this is, honestly

A course written to be read offline. It has no account, no backend, no analytics and no network calls of any kind; the fonts are inlined into the stylesheet and the syntax highlighter is a few hundred lines in assets/js/highlight.js. Your progress and anything you type into an editable panel are kept in this browser's localStorage and nowhere else, so clearing site data clears them.

Code you type into a panel runs in your own browser, in a function scope with a shadowed console, always with "use strict" applied. That is what makes the examples honest. It also means an editable panel will run whatever you paste into it, so treat it the way you would treat your own devtools console.