JavaScript classes: Using the “super” keyword

In JavaScript, the super keyword is often used in a subclass to access a method or property defined in its parent class. Let’s dig deeper into the keyword super through specific examples and use cases in this article. Without further ado, let’s get our hands dirty with code.

Calling a parent constructor

When a subclass is created, it can call the constructor method of its parent class by using the super keyword. This is useful when you want to reuse some of the parent class’s initialization logic.

Example:

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

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
}

const child = new Child('Tom', 3);
console.log(child); 

Output:

Child { name: 'Tom', age: 3 }

Calling a parent method

A subclass can call a method from its parent class with the super keyword. This is useful when you want to add functionality to the existing method.

Example:

// parent class
class Parent {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

// subclass
class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }

  sayHello() {
    // call parent method
    super.sayHello();
    console.log(`I am ${this.age} years old.`);
  }
}

const child = new Child('Tom', 3);
child.sayHello();

Output:

Hello, my name is Tom.
I am 3 years old.

Using “super” in a static method

A subclass can call a static method from its parent class using the super keyword in a static method. This is useful when you want to reuse some of the parent class’s static methods.

Example:

// parent class
class Parent {
  // static method
  static sayHello() {
    console.log('Hello from parent!');
  }
}

// child class
class Child extends Parent {
  static sayMore() {
    // call the parent static method
    super.sayHello();

    // add more functionality
    console.log('Hello from child class!');
    console.log('Goodbye!');
  }
}

Child.sayMore()

Output:

Hello from parent!
Hello from child class!
Goodbye!

Using “super” with getter and setter methods

The example below demonstrates how to use the super keyword with getter and setter methods. It allows the subclass to override the getter and setter methods of its parent class while still retaining access to the parent’s logic.

// parent class
class Parent {
  constructor(name) {
    this._name = name;
  }

  // getter
  get name() {
    return this._name.toUpperCase();
  }

  // setter
  set name(newName) {
    this._name = newName;
  }
}

// child class
class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }

  // getter
  get name() {
    // call parent's getter
    return super.name;
  }

  // setter
  set name(newName) {
    // call parent's setter
    super.name = newName;
    console.log(`Child's name has been set to ${newName}`);
  }
}

const child = new Child('Tom', 3);
console.log(child.name); 
// Output: TOM

child.name = 'Alice'; 
// Output: Child's name has been set to Alice

console.log(child.name); 
// Output: ALICE

Epilogue

You’ve learned about the super keyword and walked through a few examples of using it in practice. If you’re working on a large-scale project with complex class hierarchies, super can be a mighty tool for reducing code duplication and increasing code flexibility.