Super keyword in JavaScript?

Javascript Web Development Front End Technology

In this article, we are going to discuss about the super keyword in JavaScript with suitable examples.

The Super keyword is basically used in Object Oriented Programming. The Super keyword is used to call parameters and functions of an object’s parent.

There are times a parent class and sub class can have same method names and parameter names. In those case, to avoid confusion between the parent class and sub class method names or parameter names, super keyword is used. In order to use a Super keyword, the child method must extend the parent class method.

Syntax

The syntax to represent the Super keyword is −

Super(arguments); // To call Super class arguments
Super.Parent_Method(arguments) // To call super class methods.

Where,

arguments are the parameters of parent class or parent class method.
Parent_Method is the Super class method.

Example 1

This is an example program to define the usage of Super keyword by calling super class arguments.

<!DOCTYPE html>
<html>
<head>
   <meta charset ="UTF-8">
   <meta http-equiv ="X-UA-Compatible" content ="IE=edge">
   <meta name ="viewport" content ="width=device-width, initial-scale =1.0">
   <title>Super keyword in Javascript</title>
</head>
<body>
   <p id="super" style="text-align : center"></p>
   <script>
      class Person{
         constructor(person_name) {
            this.name = person_name;
         }
         getPersonName() {
            return this.name;
         }
      }
      class Aadhar extends Person {
         constructor(person_name,AadharID){
            super(person_name);
            this.AadharID = AadharID;
         }
         showAadharId() {
            return 'The Aadhar ID for the person '+ this.getPersonName() +' is : '+this.AadharID;
         }
      }
      var person_id = new Aadhar('Rajesh','5000 0000 0000 0000');
      document.write(person_id.showAadharId());
   </script>
</body>
</html>

On executing the above code, the following output is generated.

Example 2

This is an example program to define the usage of Super keyword by calling super class methods.

<!DOCTYPE html>
<html>
<head>
   <meta charset ="UTF-8">
   <meta http-equiv ="X-UA-Compatible" content ="IE=edge">
   <meta name ="viewport" content ="width=device-width, initial-scale =1.0">
   <title>Super keyword in Javascript</title>
</head>
<body>
   <p id="super" style="text-align : center"></p>
   <script>
      class Person{
         constructor(person_name) {
            this.name = person_name;
         }
         getPersonName() {
            return 'The person name is : '+this.name;
         }
      }
      class Aadhar extends Person {
         constructor(person_name,PANID){
            super(person_name);
            this.PANID = PANID;
         }
         show_PAN_CARD_ID() {
            return super.getPersonName() +' and the PAN Card ID is : '+this.PANID;
         }
      }
      var person_id = new Aadhar('Ravi','DD JJN 7854 A');
      document.getElementById('super').innerHTML = person_id.show_PAN_CARD_ID();
   </script>
</body>
</html>

On executing the above code, the following output is generated.