Masukkan Password
46 Abstract Class
1. Apa itu static?
Sebelum memahami static, kita harus membedakan dua hal:
- Class
- Object/Instance
Misalnya kita punya class:
class Employee {
firstName: string;
lastName: string;
}
Lalu kita membuat object:
const emp1 = new Employee();
const emp2 = new Employee();
const emp3 = new Employee();
Gambarnya kira-kira seperti ini:
Employee (Class)
|
|---- new Employee() ---> emp1
|
|---- new Employee() ---> emp2
|
|---- new Employee() ---> emp3
Setiap object memiliki data masing-masing.
Contohnya:
emp1
├── firstName: John
└── lastName: Smith
emp2
├── firstName: Mary
└── lastName: Jane
emp3
├── firstName: David
└── lastName: Brown
Properti seperti firstName dan lastName disebut instance property.
Kenapa?
Karena properti tersebut dimiliki oleh setiap instance/object.
Kita mengaksesnya seperti ini:
console.log(emp1.firstName);
console.log(emp2.firstName);
2. Masalah: Bagaimana jika sebuah data digunakan bersama?
Bayangkan kita ingin menghitung jumlah total employee yang dibuat.
Misalnya:
const emp1 = new Employee("John", "Smith");
const emp2 = new Employee("Mary", "Jane");
const emp3 = new Employee("David", "Brown");
Kita ingin hasilnya:
Total employee: 3
Jika kita membuat count sebagai properti biasa:
class Employee {
count: number = 0;
}
Setiap object akan memiliki count sendiri.
Contohnya:
emp1.count = 0
emp2.count = 0
emp3.count = 0
Jika constructor menaikkan nilainya:
this.count++;
Maka hasilnya bisa seperti ini:
emp1.count = 1
emp2.count = 1
emp3.count = 1
Bukan:
1
2
3
Kenapa?
Karena setiap object mempunyai copy count sendiri.
3. Solusi: Gunakan static
Kalau kita ingin sebuah properti dimiliki oleh class, bukan oleh setiap object, gunakan keyword:
static
Contoh:
class Employee {
static count: number = 0;
}
Sekarang count bukan milik:
emp1
emp2
emp3
Tetapi milik:
Employee
Visualnya:
Employee
│
├── static count: 3
│
├── emp1
│ ├── firstName
│ └── lastName
│
├── emp2
│ ├── firstName
│ └── lastName
│
└── emp3
├── firstName
└── lastName
Jadi hanya ada satu count yang digunakan bersama.
4. Contoh static property
Mari buat contoh lengkap:
class Employee {
firstName: string;
lastName: string;
static count: number = 0;
constructor(firstName: string, lastName: string) {
this.firstName = firstName;
this.lastName = lastName;
Employee.count++;
}
}
Perhatikan bagian ini:
static count: number = 0;
Artinya:
countadalah properti milik classEmployee.
Kemudian:
Employee.count++;
Setiap kali object baru dibuat, nilai count bertambah.
Membuat employee pertama
const emp1 = new Employee("John", "Smith");
Awalnya:
Employee.count = 0
Constructor dijalankan:
Employee.count++;
Sekarang:
Employee.count = 1
Jika kita tampilkan:
console.log(Employee.count);
Hasil:
1
Membuat employee kedua
const emp2 = new Employee("Mary", "Jane");
Constructor berjalan lagi:
Employee.count++;
Sekarang:
Employee.count = 2
console.log(Employee.count);
Hasil:
2
Membuat employee ketiga
const emp3 = new Employee("David", "Brown");
Sekarang:
Employee.count = 3
Jadi:
console.log(Employee.count);
Hasil:
3
5. Kenapa menggunakan Employee.count, bukan this.count?
Ini bagian yang sangat penting.
Di dalam constructor:
this.firstName = firstName;
this mengacu pada object yang sedang dibuat.
Misalnya:
const emp1 = new Employee("John", "Smith");
Maka:
this
mengacu ke:
emp1
Sedangkan:
const emp2 = new Employee("Mary", "Jane");
Maka:
this
mengacu ke:
emp2
Jadi:
this
selalu berkaitan dengan instance/object.
Masalahnya, static property bukan milik instance.
Static property milik:
Employee
Maka kita harus menulis:
Employee.count++;
Bukan:
this.count++;
Karena:
this.count
berarti mencari count di dalam object.
Padahal count ada di class.
6. Static property tidak bisa diakses melalui object
Misalnya:
class Employee {
static count = 0;
}
Ini salah:
const emp1 = new Employee();
console.log(emp1.count);
TypeScript akan memberikan error.
Karena:
count
bukan milik emp1.
Yang benar:
console.log(Employee.count);
Ingat rumus sederhananya:
Instance property
object.property
Contoh:
emp1.firstName
Static property
ClassName.property
Contoh:
Employee.count
7. Apa itu static method?
Konsepnya sama.
Method biasa dimiliki oleh setiap object.
Contoh:
class Employee {
firstName: string;
lastName: string;
getFullName() {
return this.firstName + " " + this.lastName;
}
}
Kita membuat object:
const emp1 = new Employee();
const emp2 = new Employee();
Kita bisa memanggil:
emp1.getFullName();
atau:
emp2.getFullName();
Karena getFullName() adalah instance method.
Method tersebut bekerja berdasarkan data dari object tertentu.
Misalnya:
emp1 → John Smith
emp2 → Mary Jane
Jadi ketika menjalankan:
emp1.getFullName();
hasilnya:
John Smith
Sedangkan:
emp2.getFullName();
hasilnya:
Mary Jane
8. Membuat static method
Untuk membuat static method:
static methodName() {
}
Contoh:
class Employee {
static sayHello() {
return "Hi there!";
}
}
Sekarang sayHello() bukan method milik object.
Method tersebut milik class Employee.
Cara memanggilnya:
Employee.sayHello();
Contoh:
console.log(Employee.sayHello());
Hasil:
Hi there!
9. Tidak bisa memanggil static method melalui object
Misalnya:
const emp1 = new Employee();
Ini salah:
emp1.sayHello();
Karena sayHello() adalah static method.
Yang benar:
Employee.sayHello();
Perbedaannya:
Instance Method
↓
object.method()
Static Method
↓
ClassName.method()
10. Kenapa static method tidak bisa menggunakan this?
Misalnya kita punya:
class Employee {
firstName: string;
static sayHello() {
console.log(this.firstName);
}
}
Ini menjadi masalah.
Kenapa?
Karena static method dipanggil seperti ini:
Employee.sayHello();
Tidak ada object tertentu seperti:
emp1
emp2
emp3
Static method tidak tahu employee mana yang sedang dimaksud.
Misalnya:
emp1.firstName = "John";
emp2.firstName = "Mary";
Kalau static method menggunakan:
this.firstName
Pertanyaannya:
First name milik siapa?
John?
Atau Mary?
Tidak jelas.
Karena static method bekerja pada level class, bukan instance.
Contoh instance method
class Employee {
firstName: string;
constructor(firstName: string) {
this.firstName = firstName;
}
sayHello() {
return "Hello " + this.firstName;
}
}
Kemudian:
const emp1 = new Employee("John");
const emp2 = new Employee("Mary");
console.log(emp1.sayHello());
console.log(emp2.sayHello());
Hasil:
Hello John
Hello Mary
Karena setiap object memiliki firstName sendiri.
11. Kapan kita menggunakan static?
Gunakan static ketika data atau fungsi tersebut:
- Tidak bergantung pada data satu object tertentu.
- Bersifat umum.
- Digunakan bersama oleh semua instance.
- Lebih cocok dimiliki oleh class daripada object.
Contoh 1: Menghitung jumlah object
class Employee {
static count = 0;
constructor() {
Employee.count++;
}
}
Penggunaan:
new Employee();
new Employee();
new Employee();
console.log(Employee.count);
Hasil:
3
Contoh 2: Utility method
Misalnya kita ingin membuat fungsi untuk menghitung umur.
class Person {
static calculateAge(yearOfBirth: number): number {
const currentYear = new Date().getFullYear();
return currentYear - yearOfBirth;
}
}
Kita tidak perlu membuat object:
const person = new Person();
Kita bisa langsung:
console.log(Person.calculateAge(2000));
Karena fungsi tersebut tidak membutuhkan data dari object tertentu.
12. Contoh lengkap static property dan static method
class Employee {
firstName: string;
lastName: string;
static count: number = 0;
constructor(firstName: string, lastName: string) {
this.firstName = firstName;
this.lastName = lastName;
Employee.count++;
}
getFullName(): string {
return `${this.firstName} ${this.lastName}`;
}
static sayHello(): string {
return "Hello from Employee class!";
}
}
Kemudian:
const emp1 = new Employee("John", "Smith");
const emp2 = new Employee("Mary", "Jane");
const emp3 = new Employee("David", "Brown");
Memanggil instance method:
console.log(emp1.getFullName());
Hasil:
John Smith
Memanggil static property:
console.log(Employee.count);
Hasil:
3
Memanggil static method:
console.log(Employee.sayHello());
Hasil:
Hello from Employee class!
13. Perbandingan Instance vs Static
| Instance | Static |
|---|---|
| Milik object | Milik class |
| Setiap object memiliki data sendiri | Hanya ada satu milik bersama |
| Diakses menggunakan object | Diakses menggunakan nama class |
Bisa menggunakan this untuk data instance | Tidak digunakan untuk mengakses data instance tertentu |
| Cocok untuk data unik setiap object | Cocok untuk data/fungsi bersama |
Contoh:
class Employee {
firstName: string; // Instance property
lastName: string; // Instance property
static count = 0; // Static property
getFullName() { // Instance method
return this.firstName + " " + this.lastName;
}
static sayHello() { // Static method
return "Hello";
}
}
Cara akses:
const emp = new Employee();
emp.firstName;
emp.getFullName();
Employee.count;
Employee.sayHello();
14. Analogi sederhana
Bayangkan Employee adalah sebuah perusahaan.
Setiap karyawan mempunyai:
Nama
Umur
Gaji
Alamat
Data tersebut berbeda-beda.
Jadi itu adalah instance property.
Employee
↓
John → salary: 10.000
Mary → salary: 15.000
David → salary: 20.000
Tetapi perusahaan juga mempunyai informasi bersama:
Total Employee: 3
Data ini tidak perlu disimpan di setiap employee.
Lebih masuk akal jika disimpan satu kali:
Company
└── Total Employee: 3
Itulah konsep static.
Ringkasan
1. Instance property
Setiap object mempunyai salinan sendiri.
class Employee {
name: string;
}
Akses:
emp.name
2. Static property
Dimiliki oleh class dan digunakan bersama.
class Employee {
static count = 0;
}
Akses:
Employee.count
3. Instance method
Dipanggil melalui object.
emp.getFullName();
4. Static method
Dipanggil melalui class.
Employee.sayHello();
5. Aturan paling mudah diingat
INSTANCE
↓
Object → object.property
Object → object.method()
STATIC
↓
Class → Class.property
Class → Class.method()
Contoh:
emp1.firstName
emp1.getFullName()
Employee.count
Employee.sayHello()
Jadi inti utama static adalah: property atau method tersebut dimiliki oleh class, bukan oleh setiap object yang dibuat dari class tersebut.