JavaScript Static Properties
Summary: in this tutorial, you’ll learn about the JavaScript static properties of a class and how to access the static properties in a static method, class constructor, and other instance methods.
Introduction to the JavaScript static properties
Like a static method, a static property is shared by all instances of a class. To define static property, you use the static keyword followed by the property name like this:
class Item {
static count = 0;
}
Code language: JavaScript (javascript)
To access a static property, you use the class name followed by the . operator and the static property name. For example:
console.log(Item.count); // 0Code language: JavaScript (javascript)
To access the static property in a static method, you use the class name followed by the . operator and the static property name. For example:
class Item {
static count = 0;
static getCount() {
return Item.count;
}
}Code language: JavaScript (javascript)
To access a static property in a class constructor or instance methods, you use the following syntax:
className.staticPropertyName;Code language: CSS (css)
Or
this.constructor.staticPropertyName;Code language: CSS (css)
The following example increases the count static property in the class constructor:
class Item {
constructor(name, quantity) {
this.name = name;
this.quantity = quantity;
this.constructor.count++;
}
static count = 0;
static getCount() {
return Item.count++;
}
}Code language: JavaScript (javascript)
When you create a new instance of the Item class, the following statement increases the count static property by one:
this.constructor.count++;Code language: CSS (css)
For example:
// Item class ...
let pen = new Item(“Pen”, 5);
let notebook = new Item(“notebook”, 10);
console.log(Item.getCount()); // 2
Code language: JavaScript (javascript)
This example creates two instances of the Item class, which calls the class constructor. Since the class constructor increases the count property by one each time it’s called, the value of the count is two.
Put it all together.
class Item {
constructor(name, quantity) {
this.name = name;
this.quantity = quantity;
this.constructor.count++;
}
static count = 0;
static getCount() {
return Item.count++;
}
}let notebook = new Item(“notebook”, 10);
Code language: JavaScript (javascript)
Summary
- A static property of a class is shared by all instances of that class.
- Use the
statickeyword to define a static property. - Use the
className.staticPropertyNameto access the static property in a static method. - Use the
this.constructor.staticPropertyNameorclassName.staticPropertyNameto access the static property in a constructor.