Masukkan Password
41 Properti Hanya Baca (Readonly)
Lecture ini membahas readonly property di TypeScript. Konsepnya sebenarnya cukup sederhana kalau kita bedakan dengan public, private, dan const.
Inti besarnya adalah:
readonlyberarti property boleh dibaca, tetapi nilainya tidak boleh diubah setelah diinisialisasi.
Mari kita bahas pelan-pelan.
1. Apa itu readonly?
readonly adalah keyword di TypeScript yang digunakan untuk membuat property yang nilainya tidak boleh diubah setelah diinisialisasi.
Contoh:
class Employee {
readonly empId: number = 101;
}
Kemudian:
const employee = new Employee();
console.log(employee.empId);
✅ Boleh.
Tetapi:
employee.empId = 202;
❌ Tidak boleh.
Karena empId sudah dideklarasikan sebagai:
readonly empId
2. Kenapa kita membutuhkan readonly?
Misalnya setiap employee memiliki ID.
Employee ID: 101
Name: John
Salary: 10000
Employee ID biasanya merupakan identitas unik.
Kalau sudah:
John → ID 101
kita tidak ingin sembarang kode melakukan:
employee.empId = 999;
Karena identitas employee tiba-tiba berubah.
Jadi kita ingin:
EMPLOYEE ID
│
├── boleh dibaca ✅
│
└── boleh diubah? ❌
Itulah fungsi readonly.
3. readonly bukan berarti tidak bisa dibaca
Ini penting.
readonly bukan berarti property tersebut tersembunyi.
Misalnya:
class Employee {
readonly empId: number = 101;
}
Kita tetap bisa:
console.log(employee.empId);
Hasil:
101
Yang dilarang adalah:
employee.empId = 201;
Jadi:
readonly
│
├── READ → ✅ boleh
│
└── WRITE → ❌ tidak boleh
Karena itu namanya read-only.
4. Bandingkan dengan property biasa
Misalnya kita punya:
class Employee {
empId: number = 101;
}
Karena tidak menggunakan readonly, property tersebut bisa dibaca:
console.log(employee.empId);
dan bisa diubah:
employee.empId = 202;
Hasilnya berubah:
101 → 202
Sekarang tambahkan readonly:
class Employee {
readonly empId: number = 101;
}
Sekarang:
console.log(employee.empId);
✅
Tetapi:
employee.empId = 202;
❌
5. Ada dua tempat untuk menginisialisasi readonly
Lecture menyebutkan sesuatu yang sangat penting.
Property readonly harus mendapatkan nilai ketika property tersebut diinisialisasi.
Ada dua cara utama:
Cara 1 — langsung saat deklarasi
class Employee {
readonly empId: number = 101;
}
atau:
Cara 2 — melalui constructor
class Employee {
readonly empId: number;
constructor(id: number) {
this.empId = id;
}
}
Mari kita bahas keduanya.
6. Cara pertama: langsung saat deklarasi
Misalnya:
class Employee {
readonly empId: number = 101;
}
Artinya setiap object yang dibuat dari class tersebut akan mendapatkan:
empId = 101
Misalnya:
const employee1 = new Employee();
const employee2 = new Employee();
const employee3 = new Employee();
Maka semuanya:
employee1.empId → 101
employee2.empId → 101
employee3.empId → 101
Karena nilai 101 ditulis langsung di deklarasi property.
7. Tapi ada masalah
Dalam kasus employee ID, tentu kita tidak ingin semua employee memiliki ID yang sama.
Kita ingin:
John → 101
Mary → 102
Bob → 103
Jadi kita tidak bisa melakukan:
readonly empId: number = 101;
karena semua object akan mendapatkan 101.
Kita membutuhkan cara agar ID diberikan ketika object dibuat.
Solusinya adalah constructor.
8. readonly dengan constructor
Kita bisa menulis:
class Employee {
readonly empId: number;
constructor(id: number) {
this.empId = id;
}
}
Kemudian:
const employee1 = new Employee(101);
const employee2 = new Employee(102);
const employee3 = new Employee(103);
Sekarang:
employee1 → empId = 101
employee2 → empId = 102
employee3 → empId = 103
Ini jauh lebih masuk akal.
9. Bagaimana prosesnya?
Misalnya:
const employee = new Employee(101);
Terjadi proses seperti ini:
new Employee(101)
│
↓
constructor(id)
│
↓
id = 101
│
↓
this.empId = id
│
↓
empId = 101
Setelah itu:
employee.empId
boleh dibaca.
Tetapi:
employee.empId = 200;
tidak boleh.
Jadi nilai 101 sudah ditetapkan ketika object dibuat.
10. Kenapa constructor boleh mengubah readonly?
Ini sering menjadi pertanyaan.
Kita punya:
readonly empId: number;
constructor(id: number) {
this.empId = id;
}
Bukankah readonly berarti tidak boleh diubah?
Kenapa constructor boleh mengisinya?
Karena readonly memiliki konsep:
Property boleh diinisialisasi, tetapi setelah selesai diinisialisasi, nilainya tidak boleh diubah lagi.
Constructor adalah salah satu tempat yang diperbolehkan untuk melakukan inisialisasi.
Jadi:
Property dibuat
↓
constructor berjalan
↓
readonly property diisi
↓
constructor selesai
↓
nilai tidak boleh diubah lagi
11. Shorthand yang dipelajari di lecture sebelumnya
Lecture sebelumnya kita belajar shorthand property initialization.
Kita bisa menggabungkannya dengan readonly.
Cara panjang:
class Employee {
readonly empId: number;
constructor(id: number) {
this.empId = id;
}
}
Bisa disingkat menjadi:
class Employee {
constructor(public readonly empId: number) {}
}
Ini sangat penting.
Mari kita pecah:
public readonly empId: number
Ada tiga bagian:
public
↓
property bisa diakses dari luar
readonly
↓
property tidak boleh diubah
empId: number
↓
nama dan tipe property
Jadi:
constructor(public readonly empId: number) {}
berarti:
Buat property
empId, jadikan public, jadikan readonly, dan isi nilainya dari argument constructor.
12. Contoh lengkap
class Employee {
constructor(
public readonly empId: number,
public empName: string,
private salary: number
) {}
}
Kemudian:
const employee = new Employee(
101,
"John Smith",
10000
);
Sekarang object memiliki:
employee
│
├── empId → 101 public + readonly
├── empName → John public
└── salary → 10000 private
13. Apa yang bisa dan tidak bisa dilakukan?
empId
console.log(employee.empId);
✅ boleh.
Tetapi:
employee.empId = 200;
❌ tidak boleh.
empName
console.log(employee.empName);
✅ boleh.
Dan:
employee.empName = "Michael";
✅ juga boleh.
Karena empName hanya public, bukan readonly.
salary
console.log(employee.salary);
❌ tidak boleh dari luar.
Karena salary private.
14. Bedakan public, private, dan readonly
Ini penting banget.
Ketiganya sebenarnya mengontrol hal yang berbeda.
public
Mengontrol siapa yang boleh mengakses.
public name: string;
Artinya:
dalam class → ✅
luar class → ✅
private
Mengontrol siapa yang boleh mengakses.
private salary: number;
Artinya:
dalam class → ✅
luar class → ❌
readonly
Mengontrol apakah nilai property boleh diubah.
readonly empId: number;
Artinya secara konsep:
dibaca → ✅
diubah → ❌ setelah diinisialisasi
15. readonly bisa digabungkan dengan public
Bisa:
public readonly empId: number;
Artinya:
Bisa dibaca dari luar, tetapi tidak bisa diubah dari luar.
Contoh:
console.log(employee.empId);
✅
employee.empId = 200;
❌
16. readonly juga bisa digabungkan dengan private
Bisa juga:
private readonly salary: number;
Artinya:
Property hanya bisa diakses dari dalam class dan nilainya tidak boleh diubah setelah diinisialisasi.
Misalnya:
class Employee {
private readonly salary: number;
constructor(salary: number) {
this.salary = salary;
}
}
Dari luar:
employee.salary
❌ karena private.
Di dalam class pun kita tidak boleh sembarangan melakukan:
this.salary = 20000;
setelah diinisialisasi.
17. readonly vs const
Lecture ini juga membahas perbedaan yang sangat penting antara:
readonly
dan:
const
Sekilas memang terlihat mirip.
Keduanya sama-sama berhubungan dengan nilai yang tidak boleh diubah.
Tetapi penggunaannya berbeda.
18. const digunakan untuk variable
Contoh:
const name = "John";
Kita tidak boleh:
name = "Michael";
❌
Karena name adalah constant variable.
19. readonly digunakan untuk property
Contoh:
class Employee {
readonly empId: number;
constructor(id: number) {
this.empId = id;
}
}
Di sini:
readonly
digunakan untuk property class.
Jadi sederhananya:
const
↓
variable
readonly
↓
property
20. Tidak bisa menggunakan const untuk property
Misalnya kita mencoba:
class Employee {
const empId: number = 101;
}
❌ Error.
Karena const bukan access/modifier untuk property class.
TypeScript akan menolak hal tersebut.
Untuk property yang tidak boleh diubah, gunakan:
readonly
21. Perbedaan penting lainnya
const harus langsung mendapatkan nilai ketika variable dibuat.
Misalnya:
const id = 101;
Kita tidak bisa:
const id: number;
id = 101;
❌
Sedangkan readonly bisa diinisialisasi di constructor.
Contoh:
class Employee {
readonly empId: number;
constructor(id: number) {
this.empId = id;
}
}
Ini valid.
Jadi:
const
│
└── harus langsung diinisialisasi
readonly
│
├── bisa diinisialisasi saat deklarasi
│
└── bisa diinisialisasi di constructor
22. Contoh perbandingan const dan readonly
const
const employeeId = 101;
employeeId adalah variable.
Nilainya tidak bisa diubah:
employeeId = 200; // ❌
readonly
class Employee {
readonly employeeId: number;
constructor(id: number) {
this.employeeId = id;
}
}
Kemudian:
const employee = new Employee(101);
Kita bisa:
console.log(employee.employeeId);
tetapi:
employee.employeeId = 200;
❌
23. Analogi gampang: nomor KTP / ID
Bayangkan setiap employee mendapatkan ID:
John → 101
Mary → 102
Bob → 103
ID tersebut diberikan ketika employee dibuat.
const john = new Employee(101);
Setelah dibuat:
John
ID = 101
ID tersebut boleh kita lihat:
john.empId
tetapi tidak boleh kita ubah:
john.empId = 999;
Karena kalau ID bisa berubah sembarangan, sistem bisa kacau.
Jadi readonly cocok untuk data seperti:
- employee ID
- order ID
- transaction ID
- serial number
- tanggal pembuatan object
- kode unik
- nilai konfigurasi tertentu
24. readonly bukan berarti object immutable seluruhnya
Ini juga perlu dipahami.
Misalnya:
class Employee {
readonly empId: number;
empName: string;
constructor(id: number, name: string) {
this.empId = id;
this.empName = name;
}
}
Kemudian:
const employee = new Employee(101, "John");
Kita tidak bisa:
employee.empId = 200;
❌
Tetapi kita bisa:
employee.empName = "Michael";
✅
Karena hanya empId yang readonly.
Jadi readonly berlaku per property, bukan otomatis untuk seluruh object.
25. Shorthand final yang sangat berguna
Dari semua materi lecture sebelumnya, kita sekarang bisa menulis class dengan sangat ringkas.
Contoh:
class Employee {
constructor(
public readonly empId: number,
public empName: string,
private salary: number,
public baseLocation: string,
public isEligible: boolean,
private readonly hikePercent: number
) {}
}
Perhatikan betapa banyak konsep yang sekarang kita gabungkan:
public
private
readonly
constructor
parameter properties
Misalnya:
public readonly empId
berarti:
empIdadalah property public dan readonly.
Sedangkan:
private readonly hikePercent
berarti:
hikePercentadalah property private dan readonly.
26. Ringkasan besar
| Keyword | Fungsi |
|---|---|
public | Property/method bisa diakses dari luar class |
private | Property/method hanya bisa diakses dari dalam class |
readonly | Nilai property tidak boleh diubah setelah diinisialisasi |
const | Membuat variable yang tidak bisa di-reassign |
Dan:
public readonly empId
berarti:
public
↓
boleh dibaca dari luar
readonly
↓
tidak boleh diubah
🧠 Mental model paling mudah
Bayangkan employeeId seperti nomor tiket/nomor identitas permanen.
Saat employee dibuat:
const employee = new Employee(101);
ID diberikan:
Employee
┌──────────────────────┐
│ ID: 101 │ ← readonly
│ Name: John │ ← bisa berubah
│ Salary: 10000 │ ← private
└──────────────────────┘
Setelah itu:
employee.empId
✅ “Boleh lihat.”
Tetapi:
employee.empId = 200;
❌ “Tidak boleh ganti.”
Dan kalau ditulis:
constructor(public readonly empId: number)
TypeScript secara otomatis:
- membuat property
empId, - menjadikannya
public, - menjadikannya
readonly, - mengambil nilai dari constructor,
- menginisialisasi property tersebut.
Jadi kalimat kunci dari lecture ini adalah:
readonlydigunakan ketika sebuah property boleh dibaca, tetapi nilainya tidak boleh diubah setelah property tersebut diinisialisasi.