Static Method dan Property JavaScript: Kata Kunci static

Static member milik class, bukan instance

Sebagian besar method yang kamu tulis di class bekerja pada instance tertentu: user tertentu, circle tertentu. Static member berbeda. Ia milik class itu sendiri. Kamu memanggilnya lewat nama class, bukan lewat instance.

class MathUtils {
    static double(n) {
        return n * 2;
    }
}

console.log(MathUtils.double(21));

const m = new MathUtils();
// console.log(m.double(21));  // TypeError: m.double is not a function

double tinggal di MathUtils, bukan di instance-nya. Membuat instance tidak membantu: m.double bernilai undefined. Ini kebalikan dari method biasa, yang tinggal di instance (secara teknis, di prototype) dan tidak terlihat oleh class-nya.

Cara memikirkannya: kata kunci class membuat dua hal, yaitu sekumpulan instance method (dipakai oleh new MathUtils()) dan sekumpulan static method (dipakai langsung oleh MathUtils). Kata kunci static memilih ke kelompok mana sebuah member masuk.

Pemakaian klasik: factory method

Alasan paling umum menulis static method adalah constructor alternatif. constructor yang asli menerima argumen apa pun yang ia terima, tapi sering kali kamu ingin cara lain untuk membuat object: dari JSON, dari baris database, dari URL.

class User {
    constructor(name, email) {
        this.name = name;
        this.email = email;
    }

    static fromJSON(json) {
        const data = JSON.parse(json);
        return new User(data.name, data.email);
    }
}

const ada = User.fromJSON('{"name":"Ada","email":"ada@example.com"}');
console.log(ada.name, ada.email);

fromJSON tidak memakai user, melainkan menghasilkan user. Saat seperti itulah static method cocok. Alternatifnya adalah fungsi lepas parseUser, tapi menyimpannya di class mengelompokkan perilaku yang berhubungan dan membuat maksudnya jelas di tempat pemanggilan.

Static property

Kamu juga bisa menempelkan data ke class itu sendiri:

class Circle {
    static PI = 3.14159;

    constructor(radius) {
        this.radius = radius;
    }

    area() {
        return Circle.PI * this.radius ** 2;
    }
}

console.log(Circle.PI);
console.log(new Circle(5).area());

Circle.PI dipakai bersama oleh setiap lingkaran: ia konstanta pada class, bukan disalin ke setiap instance. Di dalam instance method, kamu merujuknya lewat nama class (Circle.PI), bukan lewat this.

Static property berguna untuk konfigurasi, cache yang dipakai bersama antar-instance, counter, dan konstanta tingkat class.

this di dalam static method adalah class-nya

Di dalam method biasa, this adalah instance. Di dalam static method, this adalah class:

class Counter {
    static count = 0;

    static increment() {
        this.count += 1;
        return this.count;
    }
}

console.log(Counter.increment());
console.log(Counter.increment());
console.log(Counter.count);

this.count di dalam increment berarti Counter.count. Mungkin terasa aneh di awal, tapi inilah yang membuat pewarisan static method berfungsi: this merujuk ke class mana pun tempat method itu dipanggil, bukan class yang mendefinisikannya.

Static method dan pewarisan

Static method diwariskan ke subclass. Dan karena this menunjuk ke class tempat method dipanggil, factory method otomatis menghasilkan subclass yang tepat:

class Animal {
    constructor(name) {
        this.name = name;
    }

    static create(name) {
        return new this(name);
    }
}

class Dog extends Animal {
    bark() {
        return `${this.name} says woof`;
    }
}

const d = Dog.create("Rex");
console.log(d instanceof Dog);
console.log(d.bark());

Animal.create memakai new this(name). Saat kamu memanggil Dog.create("Rex"), this adalah Dog, jadi new this(name) membuat sebuah Dog. Kalau kamu menulis new Animal(name) di sana, hasilnya akan selalu Animal, dan polanya rusak. Inilah alasan utama this di static method menunjuk ke class.

Static vs. instance: perbandingan langsung

Berikut logika yang sejenis, dibagi ke dua gaya:

class Temperature {
    constructor(celsius) {
        this.celsius = celsius;
    }

    // Instance method: needs a specific temperature.
    toFahrenheit() {
        return this.celsius * 9 / 5 + 32;
    }

    // Static method: pure conversion, no instance needed.
    static celsiusToFahrenheit(c) {
        return c * 9 / 5 + 32;
    }
}

const t = new Temperature(100);
console.log(t.toFahrenheit());
console.log(Temperature.celsiusToFahrenheit(100));

Keduanya menghitung hal yang sama. Versi instance membaca data dari this.celsius. Versi static menerima input sebagai argumen. Pilih instance method saat operasinya adalah "sesuatu yang dilakukan object ini"; pilih static method saat operasinya adalah "sesuatu yang bisa dihitung class ini, dengan input tertentu."

Static block untuk persiapan

Kadang inisialisasi static property butuh lebih dari satu ekspresi: perulangan, kondisi, beberapa nilai yang saling bergantung. Untuk itulah static block ada:

class Config {
    static values = {};

    static {
        const env = "production";
        this.values.env = env;
        this.values.debug = env !== "production";
        this.values.apiUrl = env === "production"
            ? "https://api.example.com"
            : "http://localhost:3000";
    }
}

console.log(Config.values);

Blok static { ... } berjalan sekali, saat class didefinisikan. Di dalamnya, this adalah class. Pakai untuk persiapan bertahap; untuk satu assignment saja, static field biasa lebih jelas.

Private static member

Static field juga bisa private, dengan awalan #. Ia hanya bisa diakses dari dalam class:

class IdGenerator {
    static #nextId = 1;

    static next() {
        return IdGenerator.#nextId++;
    }
}

console.log(IdGenerator.next());
console.log(IdGenerator.next());
// console.log(IdGenerator.#nextId);  // SyntaxError

#nextId terkunci di dalam class. Kode luar bisa memanggil IdGenerator.next(), tapi tidak bisa menyentuh atau me-reset counter-nya. Private field punya halamannya sendiri sebentar lagi, tapi ada baiknya kamu tahu bahwa kombinasi static dan # berfungsi.

Kapan tidak memakai static

Static method adalah cara yang bagus untuk mengelompokkan helper, tapi bukan alasan untuk mengubah setiap utilitas menjadi class. Kalau kamu punya file berisi fungsi-fungsi yang berdiri sendiri, export fungsinya: jangan membungkusnya dalam class yang semua method-nya static hanya demi namespace. Module sudah melakukan tugas itu, dan melakukannya dengan lebih rapi.

Pakai static saat:

• Fungsinya memang milik sebuah class (factory, konverter, validator untuk tipe itu).
• Kamu butuh state yang dipakai bersama oleh semua instance class itu.
• Subclass mungkin ingin menimpa atau mewarisi perilakunya.

Selain itu, fungsi biasa adalah alat yang lebih sederhana.

Berikutnya: private field

Kamu sudah sekilas melihat #nextId: itulah sintaks private field di JavaScript. Ia berfungsi untuk instance member maupun static member, dan menjadi cara modern untuk menyembunyikan detail implementasi di dalam class. Itulah berikutnya.