The super() Method

Part of the Object Oriented Programming section of Coddy's JavaScript journey — lesson 27 of 56.

The super() method creates and initializes the object using the parent class's constructor. It must be called before you can add any properties to the child class.

Think of it this way: the parent class builds the foundation of the object, and super() says "build that foundation first" before the child class adds its own features.

Let's have a look at the example. Create a parent class:

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

Now create a child class that extends the parent:

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

What's happening here:

constructor(name, department) - Manager needs both name and department
super(name) - Passes name to Employee's constructor

this.department - Sets Manager's unique property

This creates a Manager that has both inherited properties (name) and its own properties (department)!

Create an instance of the child class:

const myManager = new Manager("Sarah", "Engineering");
console.log(myManager.name);      // "Sarah"
console.log(myManager.department); // "Engineering"

The super() method must be called before using this in the constructor of a derived class. If you don't call super(), JavaScript will throw a reference error.

Challenge

Given a Salad class that extends Meal. The Salad should have both a name and ingredients.

Your task is to complete the Salad class constructor by:

Calling super() with the name property
Setting the ingredients property

Cheat sheet

The super() method creates and initializes the object using the parent class's constructor. It must be called before you can add any properties to the child class.

Example of using super() in a child class:

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

class Manager extends Employee {
  constructor(name, department) {
    super(name); // Call parent constructor first
    this.department = department; // Then add child properties
  }
}

const myManager = new Manager("Sarah", "Engineering");
console.log(myManager.name);      // "Sarah"
console.log(myManager.department); // "Engineering"

Key points:

super() must be called before using this in the child constructor
Pass the necessary arguments from the child to the parent constructor
JavaScript will throw a reference error if super() is not called

Try it yourself

import { Meal } from './classes.js';
import { Salad } from './classes.js';

// Test code - don't modify
const salad = new Salad("Caesar", ["lettuce", "croutons", "cheese"]);
console.log(salad.name);       // Should output "Caesar"
console.log(salad.ingredients); // Should output ["lettuce", "croutons", "cheese"]