Open In App

How to fix ReferenceError – Super constructor may only be called once in JavaScript?

Last Updated : 13 Aug, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

In JavaScript "ReferenceError: Super constructor may only be called once" error occurs when you call super more than once in a derived class constructor, the super keyword calls the parent class constructor and must be called only once, we can see this error, reasons behind it as well as how to correct it with examples.

Understanding an error

"Super constructor may only be called once" is a message that shows when the super keyword is used more than once in one constructor of a child class, to use “this” keyword, the superclass constructor needs to be specified immediately after calling super.

Case 1: Error Cause: Calling super Multiple Times in Constructor

Example: You will see this error when you are calling the super keyword more than once in a class constructor.

class ParentClass {
constructor() {
console.log('Parent class constructor');
}
}

class ChildClass extends ParentClass {
constructor() {
super();
super(); // Second call to super() causes error
console.log('Child class constructor');
}
}

const childInstance = new ChildClass();

Output:

ReferenceError: Super constructor may only be called once

Resolution of error

To avoid such kind of error you should ensure that super is called only once in the constructor of the derived class.

JavaScript
class ParentClass {
    constructor() {
        console.log('Parent class constructor');
    }
}

class ChildClass extends ParentClass {
    constructor() {
        super();
        console.log('Child class constructor');
    }
}

const childInstance = new ChildClass();

Output
Parent class constructor
Child class constructor

Case 2: Error Cause: Conditional Super Calls

Example: When you are using conditional logic which results multiple calls of super can cause this error.

class ParentClass {
constructor() {
console.log('Parent class constructor');
}
}

class ChildClass extends ParentClass {
constructor(condition) {
if (condition) {
super(); // First call to super()
}
super();
// Second call to super(), causes ReferenceError
console.log('Child class constructor');
}
}

const childInstance = new ChildClass(true);

Output:

ReferenceError: Super constructor may only be called once

Resolution of error

To avoid such kind of error you should ensure that you are using super only once regardless of the conditional logic.

JavaScript
class ParentClass {
    constructor() {
        console.log('Parent class constructor');
    }
}

class ChildClass extends ParentClass {
    constructor(condition) {
        super(); // Call super() once
        if (condition) {
            console.log('Condition is true');
        } else {
            console.log('Condition is false');
        }
        console.log('Child class constructor');
    }
}

const childInstance = new ChildClass(true);

Output
Parent class constructor
Condition is true
Child class constructor

Conclusion

In conclusion to avoid Super constructor may only be called once errors in JavaScript, make sure you call the super keyword exactly once within a derived class’s constructor, this strictly adheres to JavaScript’s way of inheriting classes thereby ensuring proper initialization of the parent class and how this should function within the derived one.


Next Article
Article Tags :

Similar Reads