JavaScript Static Properties and Methods

JavaScript Static Properties and Methods

JavaScript Static Properties and Methods

In JavaScript, static properties and methods belong to the class itself, not the instances of the class. This is useful when you need shared functionality that doesn’t depend on a specific object.

šŸ”¹ Defining Static Methods (static keyword)

Static methods are defined using the static keyword and can only be called on the class itself, not on instances.

Example: Static Method

class MathUtils { static add(a, b) { return a + b; } } console.log(MathUtils.add(5, 3)); // ✅ Output: 8 const mathObj = new MathUtils(); // mathObj.add(5, 3); ❌ Error: add is not a function

add() is a static method and must be called using the class name MathUtils.add().
✔ Calling it on an instance (mathObj.add()) results in an error.

šŸ”¹ Defining Static Properties

Static properties are also defined with static, and they belong to the class rather than instances.

Example: Static Property

class Car { static brand = "Toyota"; static getBrand() { return this.brand; } } console.log(Car.brand); // ✅ Output: Toyota console.log(Car.getBrand()); // ✅ Output: Toyota const myCar = new Car(); // console.log(myCar.brand); ❌ Error: Cannot access static property from instance

brand is a static property, accessible only via Car.brand.
✔ Instances cannot access static properties.

šŸ”¹ Using this in Static Methods

In static methods, this refers to the class itself, not an instance.

Example: this in Static Methods

class Counter { static count = 0; static increment() { this.count++; console.log(`Count: ${this.count}`); } } Counter.increment(); // ✅ Output: Count: 1 Counter.increment(); // ✅ Output: Count: 2

this.count refers to Counter.count, not an instance property.

šŸ”¹ Static Methods in Class Inheritance

Static methods are inherited by child classes.

Example: Static Method Inheritance

class Parent { static hello() { console.log("Hello from Parent!"); } } class Child extends Parent {} Child.hello(); // ✅ Output: Hello from Parent!

Child inherits the hello() method from Parent.

Example: Overriding Static Methods

class Parent { static hello() { console.log("Hello from Parent!"); } } class Child extends Parent { static hello() { console.log("Hello from Child!"); } } Child.hello(); // ✅ Output: Hello from Child! Parent.hello(); // ✅ Output: Hello from Parent!

✔ The Child class overrides the static method from Parent.

šŸ”¹ When to Use Static Methods & Properties?

✔ Utility functions that don’t rely on instance properties (e.g., Math.sqrt()).
✔ Counters, configurations, or shared state (static count).
✔ Factory methods to create new instances in a controlled way.

šŸŽÆ Summary

static methods & properties belong to the class, not instances.
✔ Call them using the class name (ClassName.method()).
✔ Static methods can be inherited and overridden.
this inside static methods refers to the class itself.

šŸš€ Got any questions? Let me know! 😊

Soeng Souy

Soeng Souy

Website that learns and reads, PHP, Framework Laravel, How to and download Admin template sample source code free.

Post a Comment

CAN FEEDBACK
close