Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use Static Variables in JavaScript?
The keyword "static" is used for defining static methods or properties of a class in JavaScript. Static members belong to the class itself rather than to instances of the class, meaning you can access them without creating an object.
Static variables maintain a single value that is shared across all instances of the class. Unlike instance variables, static variables are initialized when the class is first loaded and retain their value throughout the program's execution.
Note ? Static variables can be reassigned and modified, unlike const variables which are immutable after initialization.
Syntax
class ClassName {
static staticVariable = 'initial value';
static staticMethod() {
return 'static method result';
}
}
// Access without creating instance
console.log(ClassName.staticVariable);
console.log(ClassName.staticMethod());
Example 1: Basic Static Variables and Methods
This example demonstrates how to define and access static variables and methods in a class.
<!DOCTYPE html>
<html>
<head>
<title>Static Variables</title>
</head>
<body>
<h1 style="color: red;">
Welcome To Tutorials Point
</h1>
<script type="text/javascript">
class Example {
static staticVariable = 'Welcome To Tutorials Point';
// Defining the Static Variables
static staticMethod() {
return 'I am a static method.';
}
}
// Calling the Static Variables
console.log(Example.staticVariable);
console.log(Example.staticMethod());
</script>
</body>
</html>
Welcome To Tutorials Point I am a static method.
Example 2: Accessing Static Variables from Static Methods
This example shows how to access static variables from within static methods using the this keyword.
<!DOCTYPE html>
<html>
<head>
<title>Static Variables</title>
</head>
<body>
<h1 style="color: red;">
Welcome To Tutorials Point
</h1>
<script type="text/javascript">
class Example {
static staticVariable = 'Welcome To Tutorials Point';
// Defining the Variable under a Static Method
static staticMethod() {
return 'staticVariable : ' + this.staticVariable;
}
}
// Calling the above static method
console.log(Example.staticMethod());
</script>
</body>
</html>
staticVariable : Welcome To Tutorials Point
Example 3: Modifying Static Variables
Static variables can be modified after initialization, and the changes persist across all references to the class.
<!DOCTYPE html>
<html>
<head>
<title>Static Variables</title>
</head>
<body>
<script type="text/javascript">
class Counter {
static count = 0;
static increment() {
this.count++;
return this.count;
}
static reset() {
this.count = 0;
}
}
console.log('Initial count:', Counter.count);
console.log('After increment:', Counter.increment());
console.log('After increment:', Counter.increment());
Counter.reset();
console.log('After reset:', Counter.count);
</script>
</body>
</html>
Initial count: 0 After increment: 1 After increment: 2 After reset: 0
Key Points
- Static members are accessed using the class name, not instance objects
- Static variables are shared across all instances of the class
- Use
thiswithin static methods to refer to other static members - Static variables can be modified unlike
constvariables
Conclusion
Static variables in JavaScript provide a way to create class-level properties that are shared across all instances. They are useful for maintaining global state, counters, or configuration values that belong to the class rather than individual objects.
3K+ Views
