JavaScript extends and super

JavaScript ES6 introduced the extends and super keywords to make class inheritance easier to implement. Inheritance allows one class to reuse and extend the properties and methods of another class.

The extends keyword creates a relationship between a child class and a parent class. The super keyword allows a child class to call the parent class’s constructor or access its methods.

These features are important in object-oriented programming because they help developers reuse code and organize related classes.

In this tutorial, you will learn how extends and super work, how to call parent constructors and methods, and how to avoid common inheritance mistakes.

What Is Inheritance in JavaScript?

Inheritance is a programming concept that allows one class to acquire or reuse behavior defined by another class.

For example, a general Animal class might define a method called eat(). Classes such as Dog and Cat can inherit that method instead of implementing the same behavior separately.

JavaScript uses prototype-based inheritance behind its class syntax.

Example of Inheritance

class Animal {
    eat() {
        console.log("This animal is eating.");
    }
}

class Dog extends Animal {
    bark() {
        console.log("The dog is barking.");
    }
}

const dog = new Dog();

dog.eat();
dog.bark();

Output:

This animal is eating.
The dog is barking.

In this example:

• Animal is the parent class.
• Dog is the child class.
• extends establishes the inheritance relationship.
• The Dog instance can call both the inherited eat() method and its own bark() method.

To understand the foundation of this feature, explore JavaScript Classes.

What Is the extends Keyword in JavaScript?

The extends keyword allows one class to inherit from another class.

The class being inherited from is called the parent class or base class. The class that inherits from it is called the child class or derived class.

Syntax of extends

class Parent {
    // Parent properties and methods
}

class Child extends Parent {
    // Additional properties and methods
}

The child class can use accessible methods from the parent class and define additional methods of its own.

Example of extends

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

    introduce() {
        console.log(`My name is ${this.name}.`);
    }
}

class Student extends Person {
    study() {
        console.log(`${this.name} is studying.`);
    }
}

const student = new Student("Rahul");

student.introduce();
student.study();

Output:

My name is Rahul.
Rahul is studying.

The Student class inherits the constructor behavior and introduce() method from Person. It also defines its own study() method.

Because the child class does not define a constructor, JavaScript provides a default derived constructor that forwards the supplied arguments to the parent constructor.

Using extends with a Constructor

A child class can define its own constructor to initialize additional properties.

When a derived class has an explicit constructor, it must call super() before accessing this.

Example

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

class Developer extends Employee {
    constructor(name, language) {
        super(name);
        this.language = language;
    }

    displayDetails() {
        console.log(`Name: ${this.name}`);
        console.log(`Language: ${this.language}`);
    }
}

const developer = new Developer("Priya", "JavaScript");

developer.displayDetails();

Output:

Name: Priya
Language: JavaScript

Here, Developer inherits from Employee.

The child constructor calls super(name) to initialize the inherited name property. It then initializes the additional language property.

This allows the child class to reuse existing initialization logic while adding its own data.

What Is the super Keyword in JavaScript?

The super keyword is used in a derived class to call the parent class’s constructor or access methods on the parent class’s prototype.

It is commonly used in two ways:

• super() calls the parent constructor.
• super.methodName() calls a parent method.

The two forms serve different purposes.

Using super() to Call the Parent Constructor

When a child class defines its own constructor, it must call super() before accessing this. This initializes the parent part of the new object.

Example of super()

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

class Dog extends Animal {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }

    displayDetails() {
        console.log(`Name: ${this.name}`);
        console.log(`Breed: ${this.breed}`);
    }
}

const dog = new Dog("Buddy", "Labrador");

dog.displayDetails();

Output:

Name: Buddy
Breed: Labrador

In this example:

• Dog extends Animal establishes inheritance.
• super(name) calls the Animal constructor.
• this.breed = breed adds a property specific to Dog.
• displayDetails() accesses properties initialized by both constructors.

Important: In a derived class constructor, you cannot access this before successfully calling super(). Otherwise, JavaScript throws a ReferenceError.

Using super to Call a Parent Method

The super keyword can also call a method defined in the parent class.

This is useful when a child class wants to reuse the parent’s behavior and add more functionality.

Example of super.method()

class Animal {
    speak() {
        console.log("The animal makes a sound.");
    }
}

class Dog extends Animal {
    speak() {
        super.speak();
        console.log("The dog barks.");
    }
}

const dog = new Dog();

dog.speak();

Output:

The animal makes a sound.
The dog barks.

The Dog class overrides the parent’s speak() method. Inside the child method, super.speak() calls the parent implementation before the child adds its own message.

This technique is useful when you want to extend existing behavior instead of completely replacing it.

Method Overriding with extends and super

Method overriding occurs when a child class defines a method with the same name as a method in its parent class.

When you call the method on a child instance, the child’s version is normally used. The child can still call the parent version with super.

Example

class Employee {
    getRole() {
        return "Employee";
    }
}

class Manager extends Employee {
    getRole() {
        return super.getRole() + " and Manager";
    }
}

const manager = new Manager();

console.log(manager.getRole());

Output:

Employee and Manager

The Manager class overrides getRole() but uses super.getRole() to reuse the original return value.

The result combines the parent’s behavior with the child class’s additional information.

Practical Example of extends and super

Consider a system that manages different types of employees. Every employee has a name and salary, but developers also have a programming language.

Instead of repeating the employee properties in every class, you can create a parent class and extend it.

class Employee {
    constructor(name, salary) {
        this.name = name;
        this.salary = salary;
    }

    displayDetails() {
        console.log(`Name: ${this.name}`);
        console.log(`Salary: ₹${this.salary}`);
    }
}

class Developer extends Employee {
    constructor(name, salary, language) {
        super(name, salary);
        this.language = language;
    }

    displayDeveloperDetails() {
        super.displayDetails();
        console.log(`Language: ${this.language}`);
    }
}

const developer = new Developer("Rahul", 40000, "JavaScript");

developer.displayDeveloperDetails();

Output:

Name: Rahul
Salary: ₹40000
Language: JavaScript

This example demonstrates both uses of super:

• super(name, salary) initializes the inherited employee properties.
• super.displayDetails() reuses the parent class’s method.

The Developer class adds the language property without duplicating the parent’s initialization and display logic.

extends vs super in JavaScript

Although these keywords are used together, they have different responsibilities.

Feature	extends	super
Purpose	Establishes class inheritance	Accesses parent constructor or methods
Where it is used	In a class declaration	Inside a derived class
Example	class Dog extends Animal	super(name)
Can call parent methods?	No, not by itself	Yes, using super.methodName()
Can initialize parent properties?	Establishes inheritance, but does not explicitly call the parent constructor in a custom child constructor	Yes, using super()

Remember that extends defines the inheritance relationship, while super allows the child class to interact with the parent implementation.

Common Mistakes with extends and super

Forgetting to Call super()

When a derived class defines its own constructor, it must call super() before using this.

Incorrect:

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

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

// new Dog("Buddy"); // ReferenceError

Correct:

class Dog extends Animal {
    constructor(name) {
        super(name);
    }
}

const dog = new Dog("Buddy");

console.log(dog.name);

Output:

Buddy

Using super() Outside a Derived Class

The super() constructor call is used in derived class constructors. It cannot be used in a regular function or an unrelated class constructor.

Assuming super Calls the Child Method

When you write super.methodName(), JavaScript looks up the method on the parent class’s prototype rather than simply calling the child’s overridden method again.

This helps prevent accidental recursion when overriding methods.

Confusing Inheritance with Object Creation

The extends keyword does not create an instance. You still need the new keyword to create an object from the child class.

class Animal {
    eat() {
        console.log("Eating...");
    }
}

class Dog extends Animal {}

const dog = new Dog();

dog.eat();

Output:

Eating...

Frequently Asked Questions

What does extends do in JavaScript?

The extends keyword allows a class to inherit from another class, making the parent’s accessible methods available through the child class’s prototype chain.

What does super do in JavaScript?

The super keyword calls the parent constructor with super() or accesses a parent method with super.methodName().

Is super() required in every child class?

No. If a derived class does not define its own constructor, JavaScript supplies a default derived constructor that forwards its arguments to the parent constructor. If you define a constructor yourself, you must call super() before accessing this.

Can a child class override a parent method?

Yes. A child class can define a method with the same name as a parent method. It can use super.methodName() to call the parent’s implementation.

Can JavaScript classes extend more than one class?

No. A JavaScript class can directly extend only one class. However, JavaScript supports other composition patterns, including mixins, for combining behavior from multiple sources.

Does JavaScript support inheritance?

Yes. JavaScript supports prototype-based inheritance, and ES6 class syntax provides a convenient way to define inheritance relationships.

Conclusion

The extends and super keywords make inheritance easier to implement in JavaScript. The extends keyword creates a relationship between a parent class and a child class, while super() calls the parent constructor and super.methodName() accesses a parent method.

By combining these features, you can reuse existing code, add specialized behavior, and build a more organized application without unnecessarily duplicating properties and methods.