Inheritance With Super

Introduction: Building On What Already Exists

In our last lesson, we learned how to build a secure Account class using private fields and accessors . This is a great foundation, but in the real world, software often requires many different types of accounts. You might need a SavingsAccount that earns interest, a CheckingAccount with transaction fees, or a BusinessAccount with higher limits. If we were to write a completely new class for each of these, we would end up repeating the same code for the owner's name and the balance logic over and over again. In this lesson, we will explore inheritance . Inheritance allows us to create a new class based on an existing one. We can take all the features of our original Account class and "specialize" them for a SavingsAccount . This helps us avoid duplication and makes our code much easier to maintain. By the end of this lesson, you will know how to link classes together so that they share behavior while still maintaining their own unique features.

Creating A Child Class With Extends

To create a specialized version of a class, we use the extends keyword. This tells JavaScript that one class should inherit everything from another. The original class is often called the parent class or superclass, while the new class is called the child class or subclass . When a child class extends a parent, it automatically receives all the non-private methods and properties defined in the parent. This establishes an "is-a" relationship. For example, a SavingsAccount is a type of Account . Using the extends keyword is the standard way to build these relationships in modern JavaScript. JavaScript class Account {#balance; constructor(owner, balance = 0) {this.owner = owner; this.#balance = balance;} get balance() { return this.#balance; } deposit(n) { this.#balance += n; return this; } toString() { return `Account<${this.owner}:${this.balance}>`; }} class SavingsAccount extends Account {// This class now has everything Account has} In the code above, SavingsAccount is empty, but because it extends Account, any object created from it will already have an owner, a balance getter, and a toString method. This simple syntax links the two blueprints together.

Initializing The Parent With Super()

When you create a child class and give it its own constructor, there is a very important rule you must follow: you must call super() before you can use the this keyword. The super function tells JavaScript to run the constructor of the parent class first. This ensures that the parent has a chance to set up its own properties, like the owner and the #balance, before the child class tries to add its own specific data. If you try to use this before calling super(), your code will crash with a reference error . Once super() is called, you can then proceed to set up any properties that are unique to the child class, such as an interest rate. JavaScript class SavingsAccount extends Account {#interestRate; constructor(owner, balance = 0, interestRate = 0.05) {super(owner, balance); // We must call the parent constructor first this.#interestRate = interestRate;}} class SavingsAccount extends Account {#interestRate; constructor(owner, balance = 0, interestRate = 0.05) {super(owner, balance); // We must call the parent constructor first this.#interestRate = interestRate;}} In this example, the SavingsAccount constructor takes three arguments. It passes the owner and balance up to the Account constructor by calling super(owner, balance) . After that is finished, it sets the private #interestRate property that only exists for savings accounts. This sequence ensures the entire object is built correctly from the ground up.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

JavaScript

class Account {
  #balance;
  constructor(owner, balance = 0) {
    this.owner = owner;
    this.#balance = balance;
  }
  get balance() { return this.#balance; }
  deposit(n)    { this.#balance += n; return this; }
  toString()    { return `Account<${this.owner}:${this.balance}>`; }
}

class SavingsAccount extends Account {
  // This class now has everything Account has
}

JavaScript

class SavingsAccount extends Account {
  #interestRate;

  constructor(owner, balance = 0, interestRate = 0.05) {
    super(owner, balance); // We must call the parent constructor first
    this.#interestRate = interestRate;
  }
}

JavaScript

class SavingsAccount extends Account {
  #interestRate;

  constructor(owner, balance = 0, interestRate = 0.05) {
    super(owner, balance);
    this.#interestRate = interestRate;
  }

  applyInterest() {
    const interest = this.balance * this.#interestRate;
    this.deposit(interest); // This method is inherited from Account
    return interest;
  }
}

class SavingsAccount extends Account {
  #interestRate;

  constructor(owner, balance = 0, interestRate = 0.05) {
    super(owner, balance);
    this.#interestRate = interestRate;
  }

  applyInterest() {
    const interest = this.balance * this.#interestRate;
    this.deposit(interest); // This method is inherited from Account
    return interest;
  }
}

JavaScript

class SavingsAccount extends Account {
  // ... (previous code)

  toString() {
    // We call the parent's toString() and then add our interest rate info
    return `Savings(${super.toString()} @ ${this.#interestRate * 100}%)`;
  }
}

const s = new SavingsAccount("Ada", 1000, 0.1);
console.log(s.toString());

text

Savings(Account<Ada:1000> @ 10%)

JavaScript

const s = new SavingsAccount("Ada", 1000, 0.1);

console.log("instanceof SavingsAccount:", s instanceof SavingsAccount);
console.log("instanceof Account:", s instanceof Account);

const s = new SavingsAccount("Ada", 1000, 0.1);

console.log("instanceof SavingsAccount:", s instanceof SavingsAccount);
console.log("instanceof Account:", s instanceof Account);

text

instanceof SavingsAccount: true
instanceof Account: true

instanceof SavingsAccount: true
instanceof Account: true

JavaScript

class SavingsAccount extends Account {
  #interestRate;

  constructor(owner, balance = 0, interestRate = 0.05) {
    super(owner, balance);
    this.#interestRate = interestRate;
  }

  applyInterest() {
    const interest = this.balance * this.#interestRate;
    this.deposit(interest); // This method is inherited from Account
    return interest;
  }
}

JavaScript

class SavingsAccount extends Account {
  // ... (previous code)

  toString() {
    // We call the parent's toString() and then add our interest rate info
    return `Savings(${super.toString()} @ ${this.#interestRate * 100}%)`;
  }
}

const s = new SavingsAccount("Ada", 1000, 0.1);
console.log(s.toString());

text

Savings(Account<Ada:1000> @ 10%)

JavaScript

const s = new SavingsAccount("Ada", 1000, 0.1);

console.log("instanceof SavingsAccount:", s instanceof SavingsAccount);
console.log("instanceof Account:", s instanceof Account);

text

instanceof SavingsAccount: true
instanceof Account: true

Introduction: Building On What Already Exists

Creating A Child Class With Extends

Initializing The Parent With Super()

Join the 1M+ learners on CodeSignal

Inheriting Methods And Properties

Overriding Methods And Extending Behavior

Checking The Inheritance Chain With Instanceof

Summary And Practice Preview