In this section, we will learn what the super keyword is and how to use it in JavaScript.

Note: we’re assuming you’re already familiar with inheritance in JavaScript.

What is super Keyword in JavaScript?

When a class inherits from another class, it happens that the child class might create a member (property or methods) that has the exact same name as the one in the parent class.

In a situation like this, if we create an object from the child class, we can’t call the member of the parent class (the one with the same name as in the child class) anymore. This is because the execution engine always starts from the body of the closest object and searches its way through the chain of inheritance. So just by looking at the body of the child object, the engine will see the target member and will take the value back to the caller.

That’s why the same member (with the same name) in the parent class will not be invoked.

This is called member shadowing.

This is where the `super` keyword can help.

Via the `super` keyword, we can call any accessible member of the immediate ancestor class that has the member that we’re looking for.

JavaScript super keyword syntax:

This is how we use the keyword:

super.memberName;

Example: JavaScript and super keyword

The best way to show this is through an example. So let’s see this keyword in practice:

class Employee {
  jobDescription()  {
      console.log("Hi, I'm an employee :)");
  }
}
class Manager extends Employee{
  jobDescription() {
      console.log("Hi, I'm the manager of the company.");
  }
}
const mng = new Manager();
mng.jobDescription();

Output:

Hi, I'm the manager of the company.

Here the `Employee` and the `Manager` class both have one method in common and that is the `jobDescription()`. So when we’ve created an object from the `Manager` class and called this method via the object, we can see the method of the `Manager` gets called instead of the one in the `Employee` class. Again, this is because the execution engine starts from the bottom of the chain of inheritance and then moves towards the top of the chain until it finds the target member.

Now if we want to call the `jobDescription()` method of the parent class `Employee` as well, we can use the `super` keyword.

Example: using super keyword to call parent methods in JavaScript

class Employee {
  jobDescription()  {
      console.log("Hi, I'm an employee :)");
  }
}
class Manager extends Employee{
  jobDescription() {
    super.jobDescription();
    console.log("Hi, I'm the manager of the company.");
  }
}
const mng = new Manager();
mng.jobDescription();

Output:

Hi, I'm an employee 🙂

Hi, I'm the manager of the company.

JavaScript super Keyword in Constructor

Other than using the `super` keyword in the body of a method, we can use this keyword inside the `constructor` method as well.

Using the `super` in the constructor is especially important when it comes to inheritance!

For example, let’s say we have a parent class with a constructor that has multiple parameters!

Now the question is how we can initialize the parameters of the parent class if we create an object from the child class?

This is where the `super` statement can be used.

Basically, inside the body of the child class’s constructor we can call the `super` keyword as if it is a method like `super()` and inside the parentheses, put the arguments for the parent class’s constructor.

This way, when the object from the child class gets initialized, a call to the parent class will occur as well (using the `super()` method) and hence the properties of the parent class will be initialized as well.

Note: by default, the parameters in the parent constructor have their default values (undefined) if we don’t explicitly initialize them.

Example: using super keyword in constructor

class Parent{
  constructor(firstName, lastName){
    this.firstName = firstName; 
    this.lastName = lastName;
  }
}
class Child extends Parent{
  constructor(firstName, lastName){
    super(firstName,lastName);
  }
}
const person = new Child("John","Doe");
console.log(person.firstName);
console.log(person.lastName);

Output:

John

Doe