An article for Mid level JavaScript Developers.
This is part of a series “JavaScript — Object Oriented Programming”
Static variables are attached to class instead of instance and its value will be shared between the different instances. To use a static variable or static function, we use the static keyword.
* A static variable is a class property that is used in a class and not on the instance of the class.
* The variable is stored on the data segment area of the memory, and the same value is shared among every instance created in a class.
* In order to access the static keyword for non-static methods, one needs to invoke them using the class name.
* For calling a static method within another static method, we can make use of this keyword.
An example using functions before ES6:
Click here for video explanation
function MyClass() {
this.publicVariable = 'foo'; // Public variable
this.privilegedMethod = function() {
console.log('Inside Method');
console.log('Instance var - ' + this.publicVariable);
console.log('Static var - ' + MyClass.staticProperty);
};
}// Static variable shared by all instances
MyClass.staticProperty = 'bar';var myInstance = new MyClass();
console.log('Outside Method');
console.log('Instance var - ' + myInstance.publicVariable);
console.log('Static var - ' + MyClass.staticProperty);
myInstance.privilegedMethod();
Es6 class and static keyword:
class MyClass {
constructor() {
this.publicVariable = "public value"; // Public property
this.privilegedMethod = function () {
console.log("Inside Instance Method");
console.log("Instance var - " + this.publicVariable);
console.log("Static var - " + MyClass.staticProperty);
};
} // Static properties shared by all instances
static staticProperty = "static value";
static staticMethod = () => {
console.log("Inside Static Method");
console.log("Cannot access Instance var - " + this.publicVariable);
console.log("Static var - " + MyClass.staticProperty);
};
}var myInstance = new MyClass();
console.log("Outside Method");
console.log("Instance var - " + myInstance.publicVariable);
console.log("Static var - " + MyClass.staticProperty);MyClass.staticMethod(); // "static value"myInstance.privilegedMethod();
Example Demonstrating Static properties shared by all instances:
Before Es6 — Without class and static keyword
function MyClass() {
this.instanceProperty = 1; // Public variable
this.addOne = () => {
this.instanceProperty++;
MyClass.staticProperty++;
}
}// Static variable shared by all instances
MyClass.staticProperty = 1;var myInstance1 = new MyClass();
myInstance1.addOne();
console.log(myInstance1.instanceProperty); // 2
console.log(MyClass.staticProperty); // 2var myInstance2 = new MyClass();
myInstance2.addOne();
console.log(myInstance2.instanceProperty); // 2
console.log(MyClass.staticProperty); // 3var myInstance3 = new MyClass();
myInstance3.addOne();
console.log(myInstance3.instanceProperty); // 2
console.log(MyClass.staticProperty); // 4
With class and static keyword
class MyClass {
constructor() {
this.instanceProperty = 1; // Public variable
this.addOne = () => {
this.instanceProperty++;
MyClass.staticProperty++;
};
}
static staticProperty = 1;
static staticMethod = () => {
MyClass.staticProperty++;
console.log(MyClass.staticProperty);
};
}var myInstance1 = new MyClass();
myInstance1.addOne();
console.log(myInstance1.instanceProperty); // 2
console.log(MyClass.staticProperty); // 2var myInstance2 = new MyClass();
myInstance2.addOne();
console.log(myInstance2.instanceProperty); // 2
console.log(MyClass.staticProperty); // 3var myInstance3 = new MyClass();
myInstance3.addOne();
console.log(myInstance3.instanceProperty); // 2
console.log(MyClass.staticProperty); // 4MyClass.staticMethod(); // 5
Other Topics in this Series
Instances / Constructor Functions / Es6 Class
Prototype Property / Prototype Object / Prototype Chaining
Prototypal Inheritance / Class Inheritance
Encapsulation / Abstraction
Public and Private Members
