ReferenceError: super() called twice in derived class constructor

Title: ReferenceError: super() called twice in derived class constructor - JavaScript

Why This Matters

In JavaScript, when creating a derived class (a subclass), it's essential to initialize both the derived and base classes correctly to avoid runtime errors. The super() keyword helps with this by calling the constructor of the parent class. However, if you call super() more than once in the derived class constructor, you will encounter a "ReferenceError: super() called twice" error. This lesson will help you understand why this happens and provide solutions to fix it.

Prerequisites

Before diving into the details of the error, make sure you have a good understanding of the following concepts:

• Classes and objects in JavaScript
• Prototypes and inheritance
• The super keyword
• Error handling in JavaScript
• Understanding the concept of constructor chaining and how it works in JavaScript.

Introduction to Constructor Chaining

Constructor chaining is a technique that allows a derived class to initialize its parent class by calling the parent's constructor using the super() keyword. This ensures proper initialization of both the derived and base classes during object creation.

Core Concept

When creating a derived class constructor, it's common to call super() as the first statement to initialize the parent class. However, if you have multiple constructors within your derived class or if you call super() more than once in the same constructor, you will encounter the "ReferenceError: super() called twice" error.

This happens because each time super() is called, it initializes the parent class constructor again, leading to unnecessary duplication and potential issues with the object's state. To avoid this issue, ensure that you call super() only once in your derived class constructor.

Proper Use of super()

In a derived class constructor, the first statement should be a call to super(arguments), where arguments are any required parameters for the parent class constructor. This initializes the parent class and allows you to access its properties and methods. After calling super(arguments), you can then define and initialize any additional properties or methods specific to your derived class.

Worked Example

Let's create an example to illustrate the error and its solution:

class Base {
constructor(name, age) {
this.name = name;
this.age = age;
console.log(`Base constructor called with ${this.name}, age: ${this.age}`);
}
}

class Derived extends Base {
constructor(name, age, job) {
super(name, age); // Call super() first to avoid the error
this.job = job;
console.log(`Derived constructor called with name: ${this.name}, age: ${this.age}, job: ${this.job}`);
}
}

const derivedInstance = new Derived("John", 25, "Developer");

In the above example, we have a Base class and a Derived class that extends Base. In the Derived constructor, we call super(name, age), which initializes the Base constructor with the provided name and age. After that, we define and initialize our custom property job specific to the derived class.

Now, when you create an instance of Derived, it will correctly initialize both the Base and Derived constructors without throwing any errors:

Base constructor called with John, age: 25
Derived constructor called with name: John, age: 25, job: Developer

Common Mistakes

1. Calling super() more than once in the same constructor

• Solution: Move multiple calls to a separate method and call it only once in the constructor.

1. Using super() without providing arguments when the parent class constructor requires them

• Solution: Provide the required arguments when calling super().

1. Calling super() before defining any properties or methods in the derived class

• Solution: Define any necessary properties or methods before calling super().

1. Not understanding that super() can only be called within a constructor and not outside of it.
2. Forgetting to call super() in a derived class constructor, which leads to undefined behavior or runtime errors.

Practice Questions

1. Given the following code, what error will be thrown and why?

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

class Derived extends Base {
constructor(name, age) {
super(); // Error: ReferenceError: super() called without arguments
this.age = age;
}
}

1. Correct the following code to avoid the "ReferenceError: super() called twice" error:

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

class Derived extends Base {
constructor(name, age) {
super(); // Error: ReferenceError: super() called without arguments
super(name); // Error: ReferenceError: super() called twice
this.age = age;
}
}

1. Write a derived class Employee that extends the Person class and adds an additional property salary. The Person class has a constructor that accepts name, age, and gender as parameters.

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

class Employee extends Person {
// Your code here
}

FAQ

Can I call super() multiple times in a derived class constructor if the parent class has multiple constructors?

• No, you should still only call super() once to avoid unnecessary initialization of the parent class constructor. You can use conditional statements or separate methods to handle different scenarios.

What happens if I forget to call super() in a derived class constructor?

• If you don't call super(), the properties and methods from the parent class will not be initialized, leading to undefined behavior or runtime errors.

Can I use super() outside of a constructor in a derived class?

• No, super() can only be called within a constructor to initialize the parent class.

What is the purpose of constructor chaining and how does it work in JavaScript?

• Constructor chaining allows a derived class to inherit properties and methods from its base class by calling the base class constructor through super(arguments). This ensures proper initialization of both the derived and base classes during object creation.