JavaScript Static Method

Introduction to JavaScript Static Method

JavaScript static methods are generally used to create utility functions. They are introduced in ES6 for the class-specific method for object-oriented programming in JavaScript.

To declare a static method we can simply use static keyword with the method signature. The static method are not called on the instance of class they are made to call directly on the class.

So we can say that JavaScript provides us a static method that belongs to the class but not with the instance of the class. So like java we do not require an instance of the class to call the static method in JavaScript also. Hence static method in JavaScript belongs to the class itself.

Syntax: 

static methodName(){}

In JavaScript also we use the static keyword to define any method as a static method. We just need to use the static keyword along with the method name. Method names can be anything. There are many points related with this static keyword let’s check them one by one:

• A class can contain any number of static methods. In other words, a class can have more than one static method.
• The static method can be of any name like any other method or function.
• To call a static method from another static method we can use this keyword.
• The static method can be used to create utility functions.
• If we want to call a static method from the non-static method in such cases we cannot use this keyword. We need to call the static method by the class name or as the property of the constructor.
• We can declare more than one static method with the same name but if we do so JavaScript always calls the last one.

A simple example to demonstrate the syntax of the static method.

Code:

<script>
class Syntax
{
static displayMessage()
{
return "static method called"
}
}
document.writeln(Syntax.displayMessage());
</script>

In the above example, we are calling the static method with the class name not creating the instance of the class. Using class name as an instance only.

How Static Methods Work in JavaScript?

Let us discuss the working of static methods in Javascript.

• Static method are methods that require an object of a class to get created before when they actually called. To call them we need to create the object of the class in which it is defined. The static method gets a call in two ways one using this keyword another from the constructor.
• Static methods cannot directly call the nonstatic method. On-static methods use instance variable state to affect their behavior. The static method also cannot see the instance variable state so if we try to call the nonstatic method from the static method compiler will complain.
• Also, the static method cannot use the nonstatic instance variable. The static method can’t refer to any instance variables of the class. The static method doesn’t know which instance’s variable value to use.
• Whereas in the case of non-static methods they do have any static keyword along with the method name and if we want to work with non-static methods then we need to create the object of that class because it belongs to the class only in which it is declared. Nonstatic methods can easily access any static and any static variable without the instance of class.

In order to call a static method from another static method, we can use ‘this’ keyword.

Code:

class StaticMethodCallDemo {
static staticMethodOne() {
return 'Static method one is called from ';
}
static sttaicMethodTwo() {
return this.staticMethod() + ' static method two';
}
}
StaticMethodCallDemo.staticMethodOne();
StaticMethodCallDemo.sttaicMethodTwo();

But what if we want to call a static method from the non-static method. For this, we can go with either of the two approach

1) classname.static_method_name();  : By using the class name
2) this.constructor.static_method_name(); : Or by using the constructor property.

Code:

class StaticMethodCallDemo2 {
constructor() {
console.log(StaticMethodCallDemo2.staticMethodOne());
// 'static method called using class name.'
console.log(this.constructor.staticMethodOne());
// 'static methed called using constructor property.'
}
static staticMethodOne() {
return 'static method has been called.';
}
}

JavaScript also has the introduction of classes in ES6 so now we can utilize the static method, constructors, super calls to parent and inheritance which will make the interoperability much easier for the developer. So we can have subclass to a parent class and any method which we declare in the parent class which will available in the subclass as well. Getter and setter accessors are also introduced in ES5 and this can be used with the static keyword. Below is the example to show how to use this with the static keyword.

Code:

class Demo{
constructor(name){
this.name = name
}
static get Leader(){
return new Demo(abc)
}
}

Examples of JavaScript Static Method

Here are some of the examples of javascript static method given below:

Example #1

To show the static method with the same name.

Code:

<html>
<body>
<head>
<script>
class SameNameDemo
{
static displayMsg()
{
return "static method with same name one"
}
static displayMsg()
{
return "static method with same name two"
}
}
document.writeln(SameNameDemo.displayMsg());
</script>
</head>
</body>
</html>

Output:

Example #2

Example to call more than one static method.

Code:

<html>
<head>
<script>
class NoSameName
{
static displayMsg1()
{
return "static method one is called"
}
static displayMsg2()
{
return "static method two is called"
}
}
document.writeln(NoSameName.displayMsg1()+"<br>");
document.writeln(NoSameName.displayMsg2());
</script>
</head>
<body> </body>
</html>

Output:

Example #3

To display a message.

Code:

<html>
<head>
<script>
class Demo
{
static displayMsg()
{
return "static method is called"
}
}
document.writeln(Demo.displayMsg());
</script>
</head>
<body> </body>
</html>

Output:

Example #4

Calling a static method from a non-static method.

Code:

<html>
<head>
<script>
class Demo {
static displayMsg() {
return "calling static method from non static method"
}
showMsg() {
document.writeln(Demo.displayMsg()+"<br>");
}
}
var demo =new Demo();
demo.showMsg();
</script>
</head>
<body> </body>
</html>

Output:

Example #5

Calling a static method from the constructor.

Code:

<html>
<head>
<script>
class Demo {
constructor() {
document.writeln (Demo.displayMag()+"<br>");
document.writeln (this.constructor.displayMag());
}
static displayMag() {
return "calling static method from constructor."
}
}
var demo = new Demo();
</script>
</head>
<body> </body>
</html>

Output :

Conclusion

So basically static method does not require the instance to access them we can directly access them by the class name within they belong. For example ClassName.Static-method-name-to-be=called();