Open In App

JavaScript Super Keyword

Last Updated : 02 Jun, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

Super keyword in JavaScript can be used to access and call on an object’s parent, it can be used in two ways.

  • As a function
  • As an object

Syntax:

super(arguments);
super.parentMethod(arguments);

Arguments: This keyword can accepts all the arguments that has been used to create a constructor.

Below example illustrates the uses of the super keyword in JavaScript.

Example:  In the constructor of the FashionDesigner class, super has been used as a function. Whereas, in the doTasks() function of the FashionDesigner class, super has been used as an object. In the constructor of the fashion designer class, the super keyword has been used as a function to call the parent class’s constructor by passing the parameters to the fashion designer. This step is important to be carried out to ensure that FashionDesigner is an instance of Person. In the doTasks() function, super is used as an object that refers to the parent class Person’s instance. Here, the super keyword is used to explicitly call the methods of the parent class Person.

Javascript




class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    atWork() {
        return this.name + " is at work, ";
    }
    atHome() {
        return this.name + " is at home";
    }
    sleeping() {
        return this.name + " is sleeping";
    }
}
class FashionDesigner extends Person {
    constructor(name, age) {
        super(name, age);
    }
    profession() {
        return this.name +
            " is a Fashion Designer";
    }
    doTasks() {
        return super.atWork() + this.profession();
    }
}
function display(content) {
    console.log(content);
}
const character =
    new FashionDesigner("Sayan", 30);
display(character.profession());
display(character.atHome());
display(character.doTasks());


Output:

Sayan is a Fashion Designer
Sayan is at home
Sayan is at work, Sayan is a Fashion Designer


Similar Reads

What's the difference between super() and super(props) in React ?
Before going deep into the main difference, let us understand what is Super() and Props as shown below: Super(): It is used to call the constructor of its parent class. This is required when we need to access some variables of its parent class.Props: It is a special keyword that is used in react stands for properties. Used for passing data from one
3 min read
React Constructor and Super Keyword
In this article, we will learn about the React Constructor and Super keyword. In React JS constructor is used for class components not for the functional component. In React JS super call other constructor methods that is instantiated. Table of Content ConstructorSuperConstructor:In React JS constructor is used for class components not for the func
3 min read
What is the use of super(props) ?
Mostly developers just write super(props) as it makes no harm in code but no one is eager to know the reason how the thing is actually working and how it is useful. Let's dive more into the class components and find out the use of super(props) in the constructor. Here's a question arises, Why do we need super(props)? So, the simple answer to this q
3 min read
Blaze UI Headings Super
Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and e
2 min read
What is the purpose of using super constructor with props argument in ReactJS ?
React, an open-source JavaScript library for UI design utilizes JSX to render components. Data is passed from parent to child components through props, which can only be updated by the parent. The `super()` function invokes the constructor of the parent class. Prerequisites:NodeJS or NPMReact JSReact PropsSteps to Create the React Application:Step
1 min read
Use of super() method inside constructor of the component
The super() is used inside the constructor for the purpose of getting access to this keyword inside our constructor. Super is a keyword in JavaScript and is used to call super or parent class in the hierarchy. React class extends React Component with ES6 syntax. If we would like to set a property or access this inside the constructor we need to cal
2 min read
What's the yield keyword in JavaScript?
yield keyword is used to resume or pause a generator function asynchronously. A generator function is just like a normal function but the difference is that whenever the function is returning any value, it does it with the help of 'yield' keyword instead of return it. Yield can't be called from nested functions or from callbacks. The yield expressi
2 min read
What is the new keyword in JavaScript ?
In this article, we will understand exactly what the new keyword is, and why we use the new keyword, and how we can use the new keyword. The new keyword in JavaScript: The new keyword is used to create an instance of a user-defined object type and a constructor function. It is used to construct and returns an object of the constructor function. Syn
2 min read
What is the use of debugger keyword in JavaScript ?
Debugging is a very important aspect of programming to determine why a system or application is misbehaving. It is a process of testing and finding errors to reduce bugs from computer programs. In this article, we will learn about the debugger keyword in JavaScript. To know more about debugging check Software Engineering | Debugging. Debugger keywo
2 min read
JavaScript new Keyword
JavaScript new keyword is used to create an instance of an object that has a constructor function. On calling the constructor function with the 'new' operator, the following actions are taken: A new empty object is created.The new object’s internal 'Prototype' property (__proto__) is set the same as the prototype of the constructing function.The 't
3 min read