JavaScript Classes

Classes provide a cleaner, more familiar syntax for creating objects and setting up inheritance in JavaScript, introduced in ECMAScript 2015 (ES6). A class defines a blueprint: a constructor for initializing new instances, and methods those instances can call.

It is important to understand that JavaScript classes are primarily "syntactic sugar" over the language's existing prototype-based inheritance model — under the hood, class methods still live on a prototype object, exactly as they did before classes existed. Classes simply make that mechanism easier to read and write.

Why it matters

Classes are the standard way to define objects that share behaviour, and you will meet them in libraries, in back-end frameworks such as NestJS, and in older React code. They are a cleaner syntax over JavaScript's prototype system, and understanding that connection is a frequent interview topic.

Class Syntax, Constructor, and Methods

A class is declared with the class keyword. The special constructor method runs automatically when a new instance is created with new, and is typically used to set initial property values. Any other method defined in the class body becomes available on every instance, without needing to be redefined for each one.

Inheritance with extends and super

A class can inherit from another using extends, gaining access to the parent class's methods and properties. Inside a subclass's constructor, super(...) must be called before using this, because it runs the parent class's constructor to properly initialize the inherited part of the object. super.methodName() can also be used inside a method to call the parent class's version of that method.

Classes as Syntactic Sugar Over Prototypes

Every JavaScript object has an internal link to another object called its prototype, and method lookups walk up this "prototype chain" when a property is not found directly on the object. When you write a class method, JavaScript places it on ClassName.prototype, exactly where a method manually attached with the older Constructor.prototype.method = ... pattern would go. extends similarly wires up the prototype chain between the parent and child classes. This means typeof MyClass is actually "function", confirming that a class is still a function under the hood.

Examples

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

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

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // must run before using "this"
    this.breed = breed;
  }

  speak() {
    const base = super.speak();
    return `${base} Specifically, ${this.name} barks.`;
  }
}

const genericAnimal = new Animal("Creature");
const dog = new Dog("Rex", "Labrador");

console.log(genericAnimal.speak());
console.log(dog.speak());
console.log(dog instanceof Animal);

Creature makes a sound.
Rex makes a sound. Specifically, Rex barks.
true

class Counter {
  constructor() {
    this.count = 0;
  }
  increment() {
    this.count += 1;
    return this.count;
  }
}

const c1 = new Counter();
const c2 = new Counter();

console.log(c1.increment());
console.log(c1.increment());
console.log(c2.increment()); // independent instance state

console.log(Object.getPrototypeOf(c1) === Counter.prototype);
console.log(c1.increment === c2.increment); // same shared function on the prototype

1
2
1
true
true

Exercise

Write a class Animal whose constructor stores a name, with a method speak. Write a class Dog that extends it and overrides speak to return the name followed by barks.

Expected output: Rex barks then true

// TODO: class Animal with a constructor(name) and speak()

// TODO: class Dog extends Animal, overriding speak()

const dog = new Dog("Rex");
console.log(dog.speak());
console.log(dog instanceof Animal);

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

  speak() {
    return this.name + " makes a sound";
  }
}

class Dog extends Animal {
  speak() {
    return this.name + " barks";
  }
}

const dog = new Dog("Rex");
console.log(dog.speak());
console.log(dog instanceof Animal);

Quick quiz

Interview questions