JavaScript OOPs: Javascript Static Method

A Javascript Static Method is specified using the static keyword in a class. Such a method differs somewhat from a standard JavaScript method. The static function differs in that it is not accessible by any of the class's instantiated objects. Rather, the static function can only be accessible by using the class name because it is directly related to the class.

It is necessary to understand the syntax of a static method before learning how to invoke it.

Syntax

To define a JavaScript Static Method, place the static keyword before the method definition.

Assume we have a JavaScript function sendMessage defined within the class Chat:

class Chat {
    sendMessage() {
        return "We are one!";
    }
}

Now we want to make the aforementioned sendMessage method a static method. The class is then rewritten as follows:

class Chat {
    static sendMessage() {
      return "We are one!"; 
    }
}

Invoking One Static Method

The code for invoking one static method is as follows. The JavaScript code is stored in the script section of the code.

<!DOCTYPE html>
<html>

<body>

	<script>
		class HubToLearn {
			
			// static keyword is employed
			// even before the function name
			static example1() {
				
				// return the string -->
				// static method 1
				return "static method 1"
			}
		}

		// Calls static function
		// using className.functionName
		document.writeln(
			HubToLearn.example1());
	</script>
</body>

</html>

Invoking More Than One (1) Static Method

The code below shows how to call more than one (1) static method.

<!DOCTYPE html>
<html>

<body>
	<script>
		class HubToLearn {

			// static keyword is employed
			// even before the function name
			static example1() {

				// return the string -->
				// static method 1
				return "static method 1"
			}

			// Another static method
			// with a different name
			static example2() {

				// return the string -->
				// static method 2
				return "static method 2"
			}

		}

		// Calls the static function using
		// className.functionName
		document.writeln(HubToLearn.example1() + "<br>");
		document.writeln(HubToLearn.example2());
	</script>
</body>

</html>

Invoking Many Static Methods with The Same Names

This illustration invokes many static methods with identical names.

<!DOCTYPE html>
<html>

<body>
	<script>
		class HubToLearn {

			// static keyword is employed
			// even before the function name
			static example1() {

				// returns static method 1
				return "static method 1"
			}

			// Different static method
			// with same name
			static example1() {
				
				// returns static method 2
				return "static method 2"
			}

		}

		// Calls the static function using
		// className.functionName
		document.writeln(HubToLearn.example1());
		// Invokes the last static method in case
		// if the static function has identical names
	</script>
</body>

</html>

Invoking a Static Method From Within a Non-Static Method

The following example shows how to invoke a static method from within a non-static method.

<!DOCTYPE html>
<html>

<body>

	<script>
		class HubToLearn {
			
			// Static keyword is employed
			// even before the function name
			static example1() {
				
				// return the string -->
				// static method 1
				return "static method 1"
			}

			// Non static method having
			// different name
			example2() {
				
				// return the string -->
				// static method 1
				// Calls the static function
				// using className.functionName
				document.writeln(HubToLearn.example1());
			}
		}
		var gfg = new HubToLearn();
		gfg.example2();
	</script>
</body>

</html>

Static Method and Object - Their Relationship

There is no direct link between an object and a static method. Objects cannot access a static method. Technically, this occurs because when a static method is declared in a class, that static method is literally put within the constructor of the class.

Because a static method is not placed inside the class's prototype, it is unavailable to objects. Objects in JavaScript can only access the members of a class that are stored within the class's prototype.

Javascript Static Method: Static Method and Object - Their Relationship — Photo Credit: Scaler Topics

JavaScript Static Method - Memory Allocation

Because the static method pertains to a class and isn't accessible via objects, memory for the JavaScript static method is allocated just once and isn't dependent on the amount of instantiated objects produced. This also indicates that the static method also isn't shared between instantiated objects because it can't be invoked via any of them.

Static Method And Non-Static Method - Differences

Static Method	Non-Static Method
1. Belongs directly to the class	Doesn't directly belong to the class
2. Can't be invoked via instantiated objects	Can be invoked via instantiated objects
3. When the "this" keyword is used in the method, it refers to a class	When the "this" keyword is used in the method, it refers to an object

Overview of Javascript Static Method

In JavaScript, a static method is one that has the static keyword appended to it. These methods can't be accessible via instantiated objects, but the class name may access them.

This happens because static methods are directly associated with the class. Inheritance extends to static methods as well. These methods can also be called by non-static methods as well as constructors. Static methods are applied to build utility functions as well as objects with default information.

For More javascript methods, click here