Article Categories

Selected Reading

How to assign static methods to a class in JavaScript?

Javascript Web Development Object Oriented Programming

To assign static methods to a class in JavaScript, prefix the method with the static keyword. Static methods belong to the class itself rather than instances and can be called without creating an object.

Syntax

class ClassName {
    static methodName() {
        // method body
    }
}

// Call static method
ClassName.methodName();

Basic Static Method Example

class Calculator {
    static add(a, b) {
        return a + b;
    }
    
    static multiply(a, b) {
        return a * b;
    }
}

// Call static methods without creating instance
console.log("Addition:", Calculator.add(5, 3));
console.log("Multiplication:", Calculator.multiply(4, 6));

Addition: 8
Multiplication: 24

Static vs Instance Methods

class Student {
    constructor(name) {
        this.name = name;
    }
    
    // Instance method
    introduce() {
        return `Hi, I'm ${this.name}`;
    }
    
    // Static method
    static getSchoolName() {
        return "TutorialsPoint Academy";
    }
}

// Using static method - no instance needed
console.log("School:", Student.getSchoolName());

// Using instance method - requires object
const student1 = new Student("Alice");
console.log("Introduction:", student1.introduce());

School: TutorialsPoint Academy
Introduction: Hi, I'm Alice

Interactive Browser Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Static Methods Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .result {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin: 10px 0;
        }
        button {
            padding: 10px 20px;
            margin: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Static Methods Demo</h1>
    <div class="result" id="result"></div>
    <button onclick="performAddition()">Add Numbers</button>
    <button onclick="getInfo()">Get Class Info</button>

    <script>
        class MathHelper {
            static add(a, b) {
                return a + b;
            }
            
            static getClassName() {
                return "MathHelper Class";
            }
        }

        function performAddition() {
            const result = MathHelper.add(15, 25);
            document.getElementById('result').innerHTML = `15 + 25 = ${result}`;
        }

        function getInfo() {
            const className = MathHelper.getClassName();
            document.getElementById('result').innerHTML = `Class Name: ${className}`;
        }
    </script>
</body>
</html>

Key Points

No Instance Required: Static methods are called on the class directly
Cannot Access Instance Properties: Static methods don't have access to this
Utility Functions: Often used for utility functions that don't need object state
Memory Efficient: Only one copy exists regardless of instance count

Comparison

Method Type	Access	this Context	Use Case
Static Method	ClassName.method()	Not available	Utility functions
Instance Method	instance.method()	Available	Object behavior

Conclusion

Static methods in JavaScript provide a way to create utility functions that belong to a class but don't require instantiation. Use them for operations that don't depend on instance data.

AmitDiwan

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

792 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next