JavaScript Static Methods: A Complete Tutorial

class StringUtils {
  static capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
  }
 
  static truncate(str, maxLength) {
    return str.length > maxLength
      ? str.slice(0, maxLength) + "..."
      : str;
  }
 
  static words(str) {
    return str.trim().split(/\s+/);
  }
}
 
// Called on the class, not an instance
console.log(StringUtils.capitalize("hello WORLD")); // "Hello world"
console.log(StringUtils.truncate("Long text here", 8)); // "Long tex..."
console.log(StringUtils.words("  hello world  ")); // ["hello", "world"]
 
// Not available on instances
const u = new StringUtils();
// u.capitalize("test") → TypeError: u.capitalize is not a function

class Counter {
  static count = 0; // Tracks how many instances were created
 
  constructor(name) {
    Counter.count += 1; // Access class-level state via class name
    this.name = name;
    this.id = Counter.count; // Assign unique ID
  }
 
  static reset() {
    Counter.count = 0;
  }
 
  toString() {
    return `Counter(${this.id}: ${this.name})`;
  }
}
 
const c1 = new Counter("first");
const c2 = new Counter("second");
const c3 = new Counter("third");
 
console.log(Counter.count); // 3
console.log(c1.id);         // 1
console.log(c2.id);         // 2
 
Counter.reset();
console.log(Counter.count); // 0

class Color {
  constructor(r, g, b) {
    this.r = r;
    this.g = g;
    this.b = b;
  }
 
  // Factory: create from hex string
  static fromHex(hex) {
    const n = parseInt(hex.replace(/^#/, ""), 16);
    return new Color((n >> 16) & 255, (n >> 8) & 255, n & 255);
  }
 
  // Factory: create from HSL
  static fromHSL(h, s, l) {
    // Simplified — real HSL-to-RGB conversion is longer
    return new Color(
      Math.round(l * 255),
      Math.round(l * 255),
      Math.round(l * 255)
    );
  }
 
  // Factory: common presets
  static red()   { return new Color(255, 0, 0); }
  static green() { return new Color(0, 255, 0); }
  static blue()  { return new Color(0, 0, 255); }
  static black() { return new Color(0, 0, 0); }
 
  toHex() {
    return `#${[this.r, this.g, this.b]
      .map(c => c.toString(16).padStart(2, "0"))
      .join("")}`;
  }
}
 
const red   = Color.red();
const coral = Color.fromHex("#FF7F50");
console.log(red.toHex());   // "#ff0000"
console.log(coral.toHex()); // "#ff7f50"

class Animal {
  constructor(name) { this.name = name; }
 
  static create(name) {
    return new this(name); // 'this' is the class, so new this() creates an instance
  }
}
 
class Dog extends Animal {
  bark() { return `${this.name} barks!`; }
}
 
const a = Animal.create("Generic");
const d = Dog.create("Rex"); // this = Dog in static method when called on Dog
 
console.log(d instanceof Dog); // true
console.log(d.bark());         // "Rex barks!"

class Config {
  static VERSION = "2.4.1";
  static MAX_RETRIES = 3;
  static DEFAULT_TIMEOUT = 5000;
  static SUPPORTED_FORMATS = ["json", "xml", "csv"];
 
  static isSupported(format) {
    return Config.SUPPORTED_FORMATS.includes(format);
  }
}
 
console.log(Config.VERSION);              // "2.4.1"
console.log(Config.isSupported("json"));  // true
console.log(Config.isSupported("pdf"));   // false

class Base {
  static greet() { return `Hello from ${this.name}`; }
  static create() { return new this(); }
}
 
class Derived extends Base {
  // Inherits greet() and create()
}
 
console.log(Base.greet());    // "Hello from Base"
console.log(Derived.greet()); // "Hello from Derived" — this.name = "Derived"

console.log(Object.getPrototypeOf(Derived) === Base); // true (static chain)
console.log(Object.getPrototypeOf(Derived.prototype) === Base.prototype); // true (instance chain)

class Logger {
  static format(msg) { return `[LOG] ${msg}`; }
  static print(msg)  { console.log(this.format(msg)); }
}
 
class DebugLogger extends Logger {
  static format(msg) { return `[DEBUG ${new Date().toISOString()}] ${msg}`; }
}
 
Logger.print("Hello");       // "[LOG] Hello"
DebugLogger.print("Hello");  // "[DEBUG 2026-...] Hello"

class Database {
  static connection;
  static isInitialized = false;
 
  static {
    // Complex initialization that needs try/catch or multiple statements
    try {
      Database.connection = Database._connect();
      Database.isInitialized = true;
      console.log("Database initialized");
    } catch (err) {
      console.error("DB init failed:", err.message);
      Database.connection = null;
    }
  }
 
  static _connect() {
    // Simulate connection setup
    return { host: "localhost", port: 5432, status: "connected" };
  }
}
 
console.log(Database.isInitialized); // true