Static methods in JavaScript classes?

Javascript Web Development Front End Technology

This article discusses about the static methods in JavaScript classes with suitable exmaplein JavaScript.

The “static” is a keyword that is used for a class, method, or a property. Static method is a method that is directly a member of a class rather than a part of instance of class.

Using a static method, we can invoke a method directly from a class, instead of creating an instance of a class. A class can have any number of static methods and static variables.

Let’s understand this concept better with the help of suitable examples further in this aricle.

Syntax

The syntax for static method is −

Static methodName(){};

Example 1

This is an example program to illustrate the invoking of static and non-static 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>Static methods in JavaScript classes</title>
</head>
<body style="text-align: center;">
   <p>Static methods in JavaScript classes</p>
   <p id="static"></p>
   <script>
      class Sample {
         static show1() {
            return "static method is invoked";
         }
         show2() {
            return "non-static method is invoked";
         }
      }
      var obj = new Sample();
      document.getElementById('static').innerHTML = Sample.show1()+"<br/>"+obj.show2();
   </script>
</body>
</html>

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

Example 2

This is an example program to show how more than one static method works with same name and same parameters.

<!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>Static methods in JavaScript classes</title>
</head>
<body style="text-align: center;">
   <p>Static methods in JavaScript classes</p>
   <p id="static"></p>
   <script>
      class Sample {
         static show1(a,b) {
            return 'Addition is performed : '+(a+b);
         }
         static show1(a,b){
            return "Multiplication is performed : "+(a*b);
         }
      }
      document.getElementById('static').innerHTML = Sample.show1(10,20);
   </script>
</body>
</html>

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

Example 3

This is an example program to invoke a static method inside a non-static method.

<!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>Static methods in JavaScript classes</title>
</head>
<body style="text-align: center;">
   <p>Static methods in JavaScript classes</p>
   <p id="static"></p>
   <script>
      class Sample {
         static example1() {
            return "Referring to a static method.";
         }
         example2() {
            return Sample.example1();
         }
      }
      var sample1 = new Sample();
      document.getElementById('static').innerHTML = sample1.example2();
   </script>
</body>
</html>

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

Example 4

This is an example program on how more than one static method can be invoked and how a static method can be called within another static method.

<!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>Static methods in JavaScript classes</title>
</head>
<body style="text-align: center;">
   <p>Static methods in JavaScript classes</p>
   <p>Illustration of how more than one static methods can be invoked and how a static method can be called within another static method.</p>
   <p id="static"></p>
   <script>
      //A static method or property can be called within another method using "this" property
      class Sample {
         static display1() {
            return "static method 1 is invoked";
         }
         static display2() {
            return "static method 2 is invoked";
         }
         static display3() {
            return this.display2()+" is a function from another static function";
         }
      }
      document.getElementById('static').innerHTML = Sample.display1()+"<br/>"+Sample.display2()+"<br/>"+Sample.display3();
   </script>
</body>
</html>

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