JavaScript super Keyword

In this chapter, we will learn about the super keyword in JavaScript. The super keyword is used to call the constructor of a parent class and to access its properties and methods. We will cover:

• What is super?
• Using super in Constructors
• Using super to Call Parent Methods
• Simple Programs using super

What is super?

The super keyword is used to refer to the parent class. It can be used in two contexts:

• In a constructor: To call the parent class’s constructor.
• In a method: To call a method from the parent class.

Using super in Constructors

When extending a class, you must call super() in the constructor before using this. This ensures that the parent class is correctly initialized.

Example

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

class Student extends Person {
  constructor(firstName, lastName, course) {
    super(firstName, lastName); // Call the parent class constructor
    this.course = course;
  }

  getCourse() {
    return this.course;
  }
}

let student = new Student("Neha", "Sharma", "Engineering");
console.log(student.getFullName());
console.log(student.getCourse());

Output:

Neha Sharma
Engineering

Using super to Call Parent Methods

The super keyword can also be used to call methods from the parent class.

Example

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

class Employee extends Person {
  constructor(firstName, lastName, jobTitle) {
    super(firstName, lastName);
    this.jobTitle = jobTitle;
  }

  getFullName() {
    return `${super.getFullName()}, ${this.jobTitle}`; // Call the parent class method
  }
}

let employee = new Employee("Ramesh", "Fadatare", "Manager");
console.log(employee.getFullName());

Output:

Ramesh Fadatare, Manager

Simple Programs using super

Program 1: Library Management with super

class Book {
  constructor(title, author, isbn) {
    this.title = title;
    this.author = author;
    this.isbn = isbn;
  }

  getDetails() {
    return `${this.title} by ${this.author}, ISBN: ${this.isbn}`;
  }
}

class EBook extends Book {
  constructor(title, author, isbn, fileSize) {
    super(title, author, isbn); // Call the parent class constructor
    this.fileSize = fileSize;
  }

  getDetails() {
    return `${super.getDetails()}, File Size: ${this.fileSize} MB`; // Call the parent class method
  }
}

let ebook = new EBook("The Alchemist", "Paulo Coelho", "123456", 2);
console.log(ebook.getDetails());

Output:

The Alchemist by Paulo Coelho, ISBN: 123456, File Size: 2 MB

Program 2: Vehicle Management with super

class Vehicle {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  getDetails() {
    return `${this.make} ${this.model}`;
  }
}

class Car extends Vehicle {
  constructor(make, model, year) {
    super(make, model); // Call the parent class constructor
    this.year = year;
  }

  getDetails() {
    return `${super.getDetails()} (${this.year})`; // Call the parent class method
  }
}

let car = new Car("Toyota", "Camry", 2021);
console.log(car.getDetails());

Output:

Toyota Camry (2021)

Program 3: Employee Management with super

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

  getDetails() {
    return `${this.name}, ${this.position}`;
  }
}

class Manager extends Employee {
  constructor(name, position, department) {
    super(name, position); // Call the parent class constructor
    this.department = department;
  }

  getDetails() {
    return `${super.getDetails()}, Department: ${this.department}`; // Call the parent class method
  }
}

let manager = new Manager("Ravi", "Manager", "IT");
console.log(manager.getDetails());

Output:

Ravi, Manager, Department: IT

Program 4: Animal Hierarchy with super

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

  makeSound() {
    return "Some generic sound";
  }
}

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

  makeSound() {
    return `${super.makeSound()} - Bark`; // Call the parent class method
  }
}

let dog = new Dog("Tommy", "Labrador");
console.log(dog.name);
console.log(dog.makeSound());

Output:

Tommy
Some generic sound - Bark

Program 5: Shape Management with super

class Shape {
  constructor(color) {
    this.color = color;
  }

  getColor() {
    return this.color;
  }
}

class Circle extends Shape {
  constructor(color, radius) {
    super(color); // Call the parent class constructor
    this.radius = radius;
  }

  getDetails() {
    return `Color: ${super.getColor()}, Radius: ${this.radius}`; // Call the parent class method
  }
}

let circle = new Circle("Red", 5);
console.log(circle.getDetails());

Output:

Color: Red, Radius: 5

Conclusion

In this chapter, you learned about the super keyword in JavaScript, including its usage in constructors and methods. We also provided various use cases with simple programs to demonstrate the usage of super. The super keyword is essential for correctly working with inheritance and accessing parent class properties and methods.