JavaScript Class Static Methods

Key Static Concepts

static methodName() {
    return "I'm static!";
}

ClassName.staticMethod();

static isValid(data) {
    return data !== null;
}

// this.property won't work
// in static methods

🔹 Static vs Instance Methods

Understanding the difference between static and instance methods:

class User {
    constructor(name, email) {
        this.name = name;
        this.email = email;
    }
    
    // Instance method - needs an object to be called
    greet() {
        return `Hello, I'm ${this.name}`;
    }
    
    // Instance method - uses 'this' to access object properties
    getEmail() {
        return this.email;
    }
    
    // Static method - belongs to the class, not instances
    static validateEmail(email) {
        return email.includes('@') && email.includes('.');
    }
    
    // Static method - utility function
    static createGuestUser() {
        return new User("Guest", "[email protected]");
    }
    
    // Static method - helper function
    static compareUsers(user1, user2) {
        return user1.name === user2.name;
    }
}

// Using instance methods (need to create an object first)
const user1 = new User("Alice", "[email protected]");
console.log(user1.greet());     // Instance method
console.log(user1.getEmail());  // Instance method

// Using static methods (call directly on the class)
console.log(User.validateEmail("[email protected]"));  // Static method
console.log(User.validateEmail("invalid-email"));   // Static method

const guestUser = User.createGuestUser();  // Static method
console.log(guestUser.greet());

const user2 = new User("Bob", "[email protected]");
console.log(User.compareUsers(user1, user2));  // Static method

🔹 Static Properties

Classes can also have static properties that belong to the class:

class Car {
    // Static properties
    static wheels = 4;
    static type = "Vehicle";
    static brands = ["Toyota", "Honda", "Ford", "BMW"];
    
    constructor(brand, model, year) {
        this.brand = brand;
        this.model = model;
        this.year = year;
        
        // Increment static counter when new car is created
        Car.totalCars++;
    }
    
    // Instance method
    getInfo() {
        return `${this.year} ${this.brand} ${this.model}`;
    }
    
    // Static method using static properties
    static getWheelCount() {
        return `Cars have ${Car.wheels} wheels`;
    }
    
    // Static method
    static isValidBrand(brand) {
        return Car.brands.includes(brand);
    }
    
    // Static method to get total cars created
    static getTotalCars() {
        return `Total cars created: ${Car.totalCars}`;
    }
}

// Initialize static counter
Car.totalCars = 0;

// Access static properties directly
console.log(Car.wheels);        // 4
console.log(Car.type);          // Vehicle
console.log(Car.getWheelCount()); // Cars have 4 wheels

// Check if brand is valid
console.log(Car.isValidBrand("Toyota"));  // true
console.log(Car.isValidBrand("Unknown")); // false

// Create some cars
const car1 = new Car("Toyota", "Camry", 2023);
const car2 = new Car("Honda", "Civic", 2022);

console.log(Car.getTotalCars());  // Total cars created: 2
console.log(car1.getInfo());      // 2023 Toyota Camry

🔹 Real-World Example: Database Helper

Static methods are perfect for utility classes and helper functions:

class DatabaseHelper {
    // Static properties for configuration
    static connectionString = "localhost:5432";
    static maxRetries = 3;
    
    // Static method for validation
    static isValidId(id) {
        return typeof id === 'number' && id > 0;
    }
    
    // Static method for formatting
    static formatDate(date) {
        return date.toISOString().split('T')[0];
    }
    
    // Static method for generating queries
    static buildSelectQuery(table, columns = ['*'], conditions = {}) {
        const cols = columns.join(', ');
        let query = `SELECT ${cols} FROM ${table}`;
        
        const whereClause = Object.keys(conditions)
            .map(key => `${key} = '${conditions[key]}'`)
            .join(' AND ');
            
        if (whereClause) {
            query += ` WHERE ${whereClause}`;
        }
        
        return query;
    }
    
    // Static method for logging
    static logQuery(query) {
        const timestamp = DatabaseHelper.formatDate(new Date());
        return `[${timestamp}] Executing: ${query}`;
    }
    
    // Static method for error handling
    static handleError(error, operation) {
        return `Error during ${operation}: ${error.message}`;
    }
}

// Using the DatabaseHelper class (no need to create instances)
console.log(DatabaseHelper.isValidId(123));     // true
console.log(DatabaseHelper.isValidId(-1));      // false

const today = new Date();
console.log(DatabaseHelper.formatDate(today));

const query = DatabaseHelper.buildSelectQuery(
    'users', 
    ['name', 'email'], 
    { active: true, role: 'admin' }
);
console.log(query);

console.log(DatabaseHelper.logQuery(query));

// Simulate error handling
try {
    throw new Error("Connection timeout");
} catch (error) {
    console.log(DatabaseHelper.handleError(error, "database connection"));
}

🔹 Static Methods in Inheritance

Static methods can be inherited and overridden in child classes:

class Animal {
    static species = "Unknown";
    
    constructor(name) {
        this.name = name;
    }
    
    // Static method in parent class
    static getSpeciesInfo() {
        return `This is a ${this.species}`;
    }
    
    // Static method for classification
    static classify() {
        return "Animal Kingdom";
    }
    
    // Instance method
    introduce() {
        return `Hi, I'm ${this.name}`;
    }
}

class Dog extends Animal {
    static species = "Canis lupus";
    static breed = "Various";
    
    // Override static method
    static getSpeciesInfo() {
        return `${super.getSpeciesInfo()} - Man's best friend!`;
    }
    
    // New static method
    static getBreedInfo() {
        return `Dogs come in ${this.breed} breeds`;
    }
    
    // Override instance method
    introduce() {
        return `${super.introduce()} and I'm a dog!`;
    }
}

class GoldenRetriever extends Dog {
    static breed = "Golden Retriever";
    
    // Override static method again
    static getBreedInfo() {
        return `I'm specifically a ${this.breed}`;
    }
    
    // New static method
    static getTemperament() {
        return "Friendly, intelligent, and devoted";
    }
}

// Using static methods with inheritance
console.log(Animal.classify());                    // Animal Kingdom
console.log(Animal.getSpeciesInfo());             // This is a Unknown

console.log(Dog.classify());                      // Inherited from Animal
console.log(Dog.getSpeciesInfo());               // Overridden method
console.log(Dog.getBreedInfo());                 // New method

console.log(GoldenRetriever.getSpeciesInfo());   // Inherited from Dog
console.log(GoldenRetriever.getBreedInfo());     // Overridden method
console.log(GoldenRetriever.getTemperament());   // New method

// Instance methods still work normally
const myDog = new GoldenRetriever("Buddy");
console.log(myDog.introduce());

🔹 When to Use Static Methods

Best practices for using static methods:

class StringUtils {
    // ✅ Good: Utility function
    static capitalize(str) {
        return str.charAt(0).toUpperCase() + str.slice(1);
    }
    
    // ✅ Good: Validation helper
    static isEmail(email) {
        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
    }
    
    // ✅ Good: Factory method
    static createSlug(title) {
        return title.toLowerCase()
                   .replace(/[^a-z0-9]+/g, '-')
                   .replace(/^-|-$/g, '');
    }
}

class User {
    constructor(name, email) {
        this.name = name;
        this.email = email;
    }
    
    // ❌ Bad: This should NOT be static (needs instance data)
    // static getDisplayName() {
    //     return this.name; // 'this' won't work in static method
    // }
    
    // ✅ Good: Instance method for object-specific behavior
    getDisplayName() {
        return StringUtils.capitalize(this.name);
    }
    
    // ✅ Good: Static factory method
    static createFromEmail(email) {
        const name = email.split('@')[0];
        return new User(name, email);
    }
}

// Using the utilities
console.log(StringUtils.capitalize("hello world"));
console.log(StringUtils.isEmail("[email protected]"));
console.log(StringUtils.createSlug("My Blog Post Title!"));

const user = User.createFromEmail("[email protected]");
console.log(user.getDisplayName());