Class static block

ECMAScript 13 introduced Class Static Blocks, providing a more flexible way to initialize static members of classes. Static blocks allow the execution of complex logic during class definition, addressing the limitations of static property initialization in the past.

Basic Syntax of Class Static Blocks

Class static blocks are defined using the static {} syntax and are placed within the class body alongside static properties and methods. Static blocks are executed immediately when the class is parsed and run only once:

class Database {
  static connection;
  static {
    // Simulate asynchronous initialization
    this.connection = new Promise((resolve) => {
      setTimeout(() => resolve("Connected"), 1000);
    });
  }
}

Execution Timing of Static Blocks

Static blocks are executed in the order they appear in the class definition. When the class is loaded, all static blocks are executed sequentially in the declared order:

class Counter {
  static count = 0;
  static {
    this.count += 10;
    console.log("First block:", this.count); // 10
  }
  static {
    this.count *= 2;
    console.log("Second block:", this.count); // 20
  }
}

Special Ability to Access Private Fields

Static blocks are the only context within a class that can simultaneously access both private instance fields and static private fields:

class Secret {
  static #count = 0;
  #key = "abc123";

  static {
    // Can access static private fields
    this.#count = 100;
  }

  static access(instance) {
    // Ordinary static methods cannot directly access instance private fields
    // return instance.#key; // Error
  }

  static {
    // Static blocks can design access solutions
    this.access = (instance) => instance.#key;
  }
}

Solving Circular Reference Problems

Static blocks are particularly useful for resolving circular dependencies between classes:

class A {
  static B;
  static {
    this.B = B;
  }
}

class B {
  static A;
  static {
    this.A = A;
  }
}

console.log(A.B === B); // true
console.log(B.A === A); // true

Practical Application Examples

Dynamic Configuration Loading

class AppConfig {
  static config;
  static {
    try {
      this.config = JSON.parse(localStorage.getItem('appConfig')) || {};
    } catch {
      this.config = { theme: 'light', debug: false };
    }
  }
}

Plugin System Registration

class PluginSystem {
  static plugins = new Map();
  static {
    // Automatically register core plugins
    import('./core-plugins').then(modules => {
      modules.default.forEach(plugin => {
        this.plugins.set(plugin.name, plugin);
      });
    });
  }
}

Performance Optimization Example

Static blocks can be used for expensive initialization operations to avoid repeated calculations during each instantiation:

class CryptoHelper {
  static #initialized = false;
  static #keyPair;

  static {
    crypto.subtle.generateKey(
      { name: "RSA-OAEP", modulusLength: 2048, hash: "SHA-256" },
      true,
      ["encrypt", "decrypt"]
    ).then(key => {
      this.#keyPair = key;
      this.#initialized = true;
    });
  }

  static get publicKey() {
    if (!this.#initialized) throw new Error("Not initialized");
    return this.#keyPair.publicKey;
  }
}

Comparison with Static Properties

Static property initializers are suitable for simple assignments, while static blocks are better for complex logic:

// Using static properties
class Simple {
  static items = [1, 2, 3];
}

// Using static blocks
class Complex {
  static items;
  static {
    const temp = [];
    for (let i = 0; i < 10; i++) {
      if (i % 2 === 0) temp.push(i);
    }
    this.items = temp;
  }
}

Browser Compatibility Considerations

As of now, all modern browser versions support class static blocks:

// Detect support
const supportsStaticBlock = (() => {
  try {
    eval("class X { static {} }");
    return true;
  } catch {
    return false;
  }
})();

For unsupported environments, the Babel plugin @babel/plugin-proposal-class-static-block can be used for transpilation.

Error Handling in Static Blocks

Static blocks can use full try-catch structures internally:

class SafeInitialization {
  static criticalData;
  static {
    try {
      this.criticalData = JSON.parse(readFileSync('config.json'));
    } catch (err) {
      console.error("Failed to load config:", err);
      this.criticalData = { fallback: true };
    }
  }
}

Metaprogramming Applications

Static blocks can be combined with decorators for metaprogramming:

function register(name) {
  return (cls) => {
    cls.registryName = name;
    return cls;
  };
}

@register('main-service')
class Service {
  static registry = {};
  static {
    if (this.registryName) {
      this.registry[this.registryName] = this;
    }
  }
}

Performance Considerations

Although static blocks execute during class loading, excessive use may impact startup performance:

class Heavy {
  static {
    // Time-consuming synchronous operations will block the main thread
    const start = Date.now();
    while (Date.now() - start < 1000) {}
    console.log("Heavy initialization completed");
  }
}

For long-running tasks, consider using asynchronous patterns or deferring initialization until needed.

Static Blocks and Inheritance

The behavior of static blocks in inheritance chains is noteworthy:

class Parent {
  static x = 1;
  static {
    console.log("Parent static block:", this.x); // 1
  }
}

class Child extends Parent {
  static y = 2;
  static {
    console.log("Child static block:", this.y); // 2
    console.log("Child accessing parent:", this.x); // 1
  }
}