> For the complete documentation index, see [llms.txt](https://eleven-fifty-academy.gitbook.io/javascript-301-reactfundamentals/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://eleven-fifty-academy.gitbook.io/javascript-301-reactfundamentals/part-2-javascript-concepts/2.4-super.md).

# 2.4: super

The purpose of the super() function in a constructor is important to know, especially for React developers. To start out, it's best to go to the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super) and take a look. Take a quick scan and come back.

Let's use that same `User` class that we've been working with.

```javascript
//ES6 JS Classes
class User {
    constructor(username, password) {
        this.name = username;
        this.password = password;
        this.type = "Trial User"
    }
    //Method 1
    greet() {
        console.log('Welcome back,' + this.name);
    }
    //Method 2
    status() {
        console.log('Current status: ' + this.type);
    }
}

//Instance of the class/new object
var anonDude = new User("Anonymous");
anonDude.greet();
anonDude.status();
```

This is the exact same thing that we've done in the last few modules, so it shouldn't require much explanation. Let's add a different class, a BronzeLevelUser class. This is someone who pays for the lowest level subscription on our site. So with this, we'll just say we'll take in their cc information(which you shouldn't do btw, let Stripe do that).

Let's look at some code though:

```javascript
//super
class BronzeLevelUser extends User {
    //We add the ccinfo property to the user here.
    constructor(username, password, ccinfo) {

        this.type = "Bronze User";
        this.ccinfo = ccinfo; 
    }

    getInfo(){
        console.log(this.username, this.password, this.type, this.ccinfo);
    }
}

var bronzeGuy = new BronzeLevelUser("Bronze Dude", "bronze7589", "4242424242424242");
bronzeGuy.greet();
bronzeGuy.status();
console.log(bronzeGuy);
```

So, when you try to run this, you should receive an error. It should say something like this:

![super](/files/-LAU8uGOhsHi7R17l1oY)

The problem here is that JavaScript requires us to call the super() function inside of our constructor inside of derived classes. Otherwise, we can't use the `this` keyword. Here's the fix:

```javascript
//super
class BronzeLevelUser extends User {
    constructor(username, password, ccinfo) {
        //If you are going to use 'this' in your constructor, you 
        //must have super that points to the parent constructor.   
        super(username, password);
        //The 'this' keyword wouldn't work without super.
        this.type = "Bronze User";
        this.ccinfo = ccinfo; 
    }
}

var bronzeGuy = new BronzeLevelUser("Bronze Dude", "bronze7589", "4242424242424242");
bronzeGuy.greet();
bronzeGuy.status();
console.log(bronzeGuy);
```

This should yield a better result. We'll see prominent use of the `this` keyword in React Class Components, so it's important to have this knowledge now. This will give you a good enough baseline to get started though.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://eleven-fifty-academy.gitbook.io/javascript-301-reactfundamentals/part-2-javascript-concepts/2.4-super.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.