JavaScript · Lesson 19 / 32 · English

JavaScript Classes

Understand the idea. Change the code. Build confidence with one focused experiment.

Detailed notesRunnable JavaScriptPractice + answer

01 / Understand

Start with the idea

A class defines how related objects are created and what methods they share. The constructor initializes each instance; this refers to that instance when its method is called normally.

Learning goal: Explain what the example does, predict its result, and change it to solve the practice task.

02 / Explore

Step-by-step lesson notes

Classes in JavaScript

Classes (introduced in ES6) are syntactic sugar over JavaScript's prototype-based inheritance. They provide a cleaner syntax for creating objects and handling inheritance.

Defining a Class

JavaScript reference fragmentCODE

class Animal {
  // Private field (ES2022)
  #name;
  #sound;

  constructor(name, sound) {
    this.#name = name;
    this.#sound = sound;
  }

  // Getter
  get name() { return this.#name; }

  // Instance method
  speak() {
    return `${this.#name} says ${this.#sound}!`;
  }

  // Static method — called on the class, not instances
  static create(name, sound) {
    return new Animal(name, sound);
  }
}

const dog = new Animal("Rex", "woof");
console.log(dog.speak());        // "Rex says woof!"
console.log(dog.name);           // "Rex"
// console.log(dog.#name);       // ❌ SyntaxError — private!

const cat = Animal.create("Whiskers", "meow");

Inheritance

JavaScript reference fragmentCODE

class Dog extends Animal {
  #tricks = [];

  constructor(name) {
    super(name, "woof"); // must call super first
  }

  learn(trick) {
    this.#tricks.push(trick);
    return this;
  }

  showTricks() {
    if (this.#tricks.length === 0) return `${this.name} knows no tricks.`;
    return `${this.name} knows: ${this.#tricks.join(", ")}`;
  }

  // Override parent method
  speak() {
    return super.speak() + " (Good dog!)";
  }
}

const buddy = new Dog("Buddy");
buddy.learn("sit").learn("shake").learn("roll over");
console.log(buddy.showTricks()); // "Buddy knows: sit, shake, roll over"
console.log(buddy.speak());      // "Buddy says woof! (Good dog!)"
console.log(buddy instanceof Dog);    // true
console.log(buddy instanceof Animal); // true

03 / Read & predict

A complete example

Run this complete index.js program in the JavaScript console editor below. The earlier reference fragments may need a browser page or other surrounding setup.

index.js · complete exampleCODE

class Course {
  constructor(title) { this.title = title; }
  describe() { return "Learn " + this.title; }
}
const course = new Course("JavaScript");
console.log(course.describe());

Predict first. Reveal the expected result.

Learn JavaScript

04 / Experiment

Make one change. See what happens.

Load the example, change a value, predict the output, and run it again. Use the console output to check your reasoning.

Open editor ↗

Wait for the editor to load, then load this example and press Run.

Powered by the free OneCompiler editor. Code you run is sent to that external service. Keep personal data and secret keys out of your examples.

05 / Your turn

Put the idea to work

Practice challenge

Create a second Course instance for TypeScript.

Reveal the answer and reasoning

new Course("TypeScript").describe() returns "Learn TypeScript". Each instance has its own title.

One mistake to avoid: Call a class constructor with new. A class is not a plain function you can invoke without it.

Your learning checkpoint

Explain the example in your own words.
Complete the challenge before revealing its answer.
Describe the common mistake and how to avoid it.