Suggest an edit

Improve this article

Refine the answer for “What does the super() keyword do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 1. `super()` in the Constructor: Calling the Parent

When one class inherits from another:

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

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // calls Animal.constructor(name)
    this.breed = breed;
  }
}
```

### What Happens Under the Hood:

1. Before `super()` is called, the `this` object **does not exist yet**.
2. Calling `super(name)` calls the parent's constructor (`Animal`)
and creates `this`, which can now be used.
3. After that, you can assign fields on `this`.

```javascript
const dog = new Dog("Rex", "Shepherd");
console.log(dog.name);  // "Rex"
console.log(dog.breed); // "Shepherd"
```

---

## Important: `super()` **Must Be Called Before** `this`

If you try to use `this` before calling `super()`,
JS throws an error:

```javascript
class Dog extends Animal {
  constructor(name) {
    this.name = name; // ReferenceError
    super(name);
  }
}
```

Error:

> `ReferenceError: Must call super constructor before accessing 'this'`

Why?
Because `super()` creates the instance context (initializes `this`).
Without it, `this` simply **does not exist yet**.

---

## 2. `super` Outside the Constructor: Accessing the Parent's Methods

`super` can be used not only in the constructor,
but also in any class method to call the parent's method.

```javascript
class Animal {
  speak() {
    console.log("The animal makes a sound");
  }
}

class Dog extends Animal {
  speak() {
    super.speak(); // calls the parent's method
    console.log("The dog barks");
  }
}

new Dog().speak();
// "The animal makes a sound"
// "The dog barks"
```

> `super.speak()` is literally a call to `Animal.prototype.speak.call(this)`.

---

## 3. `super` in Static Methods

If a class has **static methods**,
`super` can be used there too, to access the **parent's static members**:

```javascript
class Parent {
  static sayHi() {
    console.log("Hi from the parent");
  }
}

class Child extends Parent {
  static sayHi() {
    super.sayHi(); // calls Parent.sayHi()
    console.log("Hi from the child");
  }
}

Child.sayHi();
// Hi from the parent
// Hi from the child
```

---

## 4. What `super` Actually Does Under the Hood

Under the hood, `super` is a **reference to the parent's prototype**:

- In regular methods → `super` points to `Parent.prototype`
- In static methods → `super` points to `Parent` itself

So the call:

```javascript
super.method()
```

is equivalent to:

```javascript
Parent.prototype.method.call(this)
```

---

## 5. Example: Using `super` in an Inheritance Chain

```javascript
class Animal {
  constructor(name) {
    this.name = name;
  }
  info() {
    return `Name: ${this.name}`;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // calls Animal.constructor()
    this.breed = breed;
  }
  info() {
    return `${super.info()}, Breed: ${this.breed}`;
  }
}

const dog = new Dog("Rex", "Beagle");
console.log(dog.info()); // Name: Rex, Breed: Beagle
```

---

## 6. `super` and Arrow Functions

Arrow functions **have no `super` of their own**.
They take it from the surrounding context:

```javascript
class A {
  hello() {
    console.log("Hi from A");
  }
}

class B extends A {
  hello = () => {
    super.hello(); // works, because it takes super from the class
  };
}

new B().hello(); // "Hi from A"
```

> But it's important to remember that arrow methods **are created on the instance**,
> not on the prototype (see the earlier explanation).

---

## 7. Errors From Incorrect Use

Calling `super()` in a class without `extends`:

```javascript
class A {
  constructor() {
    super(); // SyntaxError
  }
}
```

> `super()` can only be used **inside a class that inherits from another one**.

---

## Summary

| Where It's Used | What It Does |
| --- | --- |
| In the constructor | Calls the parent's constructor and creates `this` |
| In a method | Lets you call the parent's method (`super.method()`) |
| In a static method | Accesses the parent's static methods |
| Without `extends` | Error |
| Before `super()` is called | `this` is not accessible (error) |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts632 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.