YouTipJsref Class Static
## JavaScript Class `static` Keyword
The `static` keyword in JavaScript is used to define static methods and properties for a class.
Static members are not called on instances (objects created from) the class. Instead, they are called directly on the class itself. They are commonly used to create utility functions, cache configurations, or perform other operations that do not require data from a specific object instance.
---
## Syntax
```javascript
class ClassName {
// Static method
static staticMethodName() {
// Method body
}
// Static property (ES2022+)
static staticPropertyName = value;
}
```
### Calling Syntax
```javascript
// Correct way to call a static method
ClassName.staticMethodName();
// Correct way to access a static property
ClassName.staticPropertyName;
```
---
## Code Examples
### Example 1: Basic Static Method
The following example defines a class named `User` with a static method `greet()`.
```javascript
class User {
constructor(name) {
this.name = name;
}
// Static method
static greet() {
return "Hello from the User class!";
}
}
// 1. Call the static method directly on the class
console.log(User.greet()); // Output: "Hello from the User class!"
// 2. Instantiate the class
let userInstance = new User("Alice");
// 3. Attempting to call the static method on an instance will throw an error
try {
console.log(userInstance.greet());
} catch (error) {
console.error("Error:", error.message);
// Output: Error: userInstance.greet is not a function
}
```
### Example 2: Utility Functions using Static Methods
Static methods are ideal for utility classes where you want to group related helper functions together without needing to maintain state across instances.
```javascript
class Calculator {
static add(a, b) {
return a + b;
}
static subtract(a, b) {
return a - b;
}
}
// Using the utility methods directly
console.log(Calculator.add(5, 3)); // Output: 8
console.log(Calculator.subtract(10, 4)); // Output: 6
```
### Example 3: Accessing Static Members from Instance Methods
If you need to access a static method or property from inside an instance method (like the constructor or a regular method), you must reference it using the class name or `this.constructor`.
```javascript
class Device {
static brand = "TechCorp";
constructor(model) {
this.model = model;
}
getDetails() {
// Accessing the static property using the class name
return `Device: ${Device.brand} ${this.model}`;
}
getDetailsAlternative() {
// Accessing the static property using this.constructor
return `Device: ${this.constructor.brand} ${this.model}`;
}
}
const myPhone = new Device("X100");
console.log(myPhone.getDetails()); // Output: Device: TechCorp X100
```
---
## Key Considerations
1. **No Instance Access**: Static methods cannot access instance properties or instance methods using the `this` keyword because `this` inside a static method refers to the class constructor itself, not an instance.
2. **Inheritance**: Static methods and properties are inherited by subclasses. A subclass can call parent static methods using `super.staticMethodName()`.
3. **Memory Efficiency**: Since static methods exist on the class itself rather than on every instantiated object, they can help save memory when you only need utility behaviors.
---
## Technical Details
| Feature | Specification |
| :--- | :--- |
| **JavaScript Version** | ECMAScript 2015 (ES6) for static methods; ECMAScript 2022 (ES13) for static fields/properties. |
## Browser Support
The `static` keyword is an ES6 (ECMAScript 2015) feature and is fully supported by all modern web browsers.
| Chrome | Edge | Firefox | Safari | Opera |
| :---: | :---: | :---: | :---: | :---: |
| Yes | Yes | Yes | Yes | Yes |
*Note: Internet Explorer 11 and older versions do not support the `static` keyword.*