Article Categories

Selected Reading

Static Properties in JavaScript

Javascript Web Development Object Oriented Programming

Static properties in JavaScript belong to the class itself rather than its instances. They can be accessed directly on the class without creating objects, making them useful for storing class-level data like constants or shared values.

Syntax

// Function constructor approach
function ClassName(params) {
    // instance properties
}
ClassName.staticProperty = value;

// ES6 class approach
class ClassName {
    static staticProperty = value;
}

Example: Static Properties with Function Constructor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Static Properties Example</title>
</head>
<body>
    
    
    <script>
        function Student(name, age) {
            this.name = name;
            this.age = age;
        }
        
        // Static property assigned to the constructor function
        Student.school = "St Marks Public School";
        Student.totalStudents = 0;
        
        // Access static properties directly
        console.log("School:", Student.school);
        console.log("Total Students:", Student.totalStudents);
        
        // Create instances
        let student1 = new Student("John", 16);
        let student2 = new Student("Sarah", 17);
        
        // Static properties are not available on instances
        console.log("student1.school:", student1.school); // undefined
        console.log("Student.school:", Student.school);   // accessible
        
        document.getElementById("result").innerHTML = 
            "School: " + Student.school + "<br>" +
            "Instance school property: " + student1.school;
    </script>
</body>
</html>

Example: Static Properties with ES6 Classes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6 Static Properties</title>
</head>
<body>
    
    
    <script>
        class Vehicle {
            static wheels = 4;
            static type = "Motor Vehicle";
            
            constructor(brand, model) {
                this.brand = brand;
                this.model = model;
            }
            
            static getInfo() {
                return `Default vehicle has ${this.wheels} wheels`;
            }
        }
        
        // Access static properties
        console.log("Vehicle type:", Vehicle.type);
        console.log("Default wheels:", Vehicle.wheels);
        console.log(Vehicle.getInfo());
        
        // Create instance
        let car = new Vehicle("Toyota", "Camry");
        console.log("Car brand:", car.brand);
        console.log("Car wheels:", car.wheels); // undefined
        
        document.getElementById("output").innerHTML = 
            "Static type: " + Vehicle.type + "<br>" +
            "Instance wheels: " + car.wheels + "<br>" +
            "Static wheels: " + Vehicle.wheels;
    </script>
</body>
</html>

Comparison: Static vs Instance Properties

Property Type	Access Method	Shared Across Instances	Memory Usage
Static	ClassName.property	Yes	Single copy
Instance	instance.property	No	Copy per instance

Common Use Cases

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Static Properties Use Cases</title>
</head>
<body>
    
    
    <script>
        class MathUtils {
            static PI = 3.14159;
            static E = 2.71828;
            
            static square(num) {
                return num * num;
            }
        }
        
        class Counter {
            static count = 0;
            
            constructor(name) {
                this.name = name;
                Counter.count++; // Increment static counter
            }
            
            static getCount() {
                return Counter.count;
            }
        }
        
        // Using constants
        console.log("PI value:", MathUtils.PI);
        console.log("Square of 5:", MathUtils.square(5));
        
        // Using counters
        let counter1 = new Counter("First");
        let counter2 = new Counter("Second");
        
        console.log("Total counters:", Counter.getCount());
        
        document.getElementById("demo").innerHTML = 
            "Math PI: " + MathUtils.PI + "<br>" +
            "Total counters created: " + Counter.getCount();
    </script>
</body>
</html>

Key Points

Static properties belong to the class, not instances
Accessed using ClassName.property syntax
Useful for constants, counters, and shared data
Memory efficient - only one copy exists
Cannot be accessed through instance objects

Conclusion

Static properties provide a way to store class-level data that is shared across all instances. They are perfect for constants, utility values, and maintaining class-wide state like counters.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

188 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next