Masukkan Password
40 Shorthand Property Initializer
Lecture ini membahas shorthand property initialization di TypeScript, yaitu cara yang lebih singkat untuk:
- membuat property pada class,
- menerima nilai melalui constructor,
- sekaligus memasukkan nilai tersebut ke property.
Kalau sebelumnya kita menulis cukup banyak kode, sekarang TypeScript menyediakan sintaks yang jauh lebih ringkas.
1. Kita ingat dulu cara lama
Misalkan kita punya class Employee dengan 5 property:
class Employee {
public empName: string;
private salary: number;
public baseLocation: string;
public isEligible: boolean;
private hikePercent: number;
constructor(
empName: string,
salary: number,
baseLocation: string,
isEligible: boolean,
hikePercent: number
) {
this.empName = empName;
this.salary = salary;
this.baseLocation = baseLocation;
this.isEligible = isEligible;
this.hikePercent = hikePercent;
}
}
Kelihatannya cukup panjang, bukan?
Perhatikan bahwa kita melakukan hal yang sebenarnya sangat repetitif.
Untuk empName:
public empName: string;
kemudian:
constructor(empName: string) {
this.empName = empName;
}
Untuk salary:
private salary: number;
kemudian:
this.salary = salary;
Dan seterusnya.
2. Ada banyak kode yang sebenarnya berulang
Perhatikan pola berikut:
public empName: string;
constructor(empName: string) {
this.empName = empName;
}
Di sini ada tiga hal yang sebenarnya berkaitan:
empName property
↓
empName parameter
↓
this.empName = empName
Kita mengatakan:
“Buat property bernama
empName, kemudian ambil nilai dari parameterempName, lalu masukkan nilai tersebut ke property.”
TypeScript menyediakan shorthand agar kita tidak perlu menulis ketiga langkah tersebut secara manual.
3. Inilah shorthand-nya
Kita bisa langsung menulis:
constructor(public empName: string) {
}
Perhatikan:
public empName: string
sekarang berada di dalam parameter constructor.
Ini bukan sekadar parameter biasa.
Karena kita memberikan access modifier:
public
TypeScript akan otomatis membuat property.
Jadi:
constructor(public empName: string) {
}
secara konsep melakukan pekerjaan yang sebelumnya kita tulis:
public empName: string;
constructor(empName: string) {
this.empName = empName;
}
4. Jadi apa yang sebenarnya terjadi?
Misalnya:
class Employee {
constructor(public empName: string) {
}
}
Kemudian:
const employee = new Employee("John Smith");
Saat new Employee("John Smith") dijalankan:
"John Smith"
│
↓
constructor(public empName: string)
│
├── membuat property empName
│
└── mengisinya dengan "John Smith"
Hasil akhirnya object kira-kira seperti:
employee = {
empName: "John Smith"
}
Jadi kita tidak perlu lagi menulis:
this.empName = empName;
TypeScript yang menangani hal tersebut.
5. Kenapa disebut shorthand?
Karena kita mempersingkat:
public empName: string;
constructor(empName: string) {
this.empName = empName;
}
menjadi:
constructor(public empName: string) {
}
Jauh lebih pendek.
Itulah mengapa lecture menyebutnya shorthand property initialization syntax.
Nama yang lebih umum untuk fitur ini adalah parameter properties.
6. Access modifier menjadi kunci
Ada satu hal penting.
Kita tidak bisa sekadar menulis:
constructor(empName: string) {
}
dan berharap empName otomatis menjadi property.
Tidak.
Itu hanya parameter biasa.
constructor(empName: string) {
}
empName hanya hidup sebagai parameter constructor.
Kalau ingin otomatis menjadi property, kita menggunakan access modifier seperti:
public
atau:
private
Contoh:
constructor(public empName: string) {
}
atau:
constructor(private salary: number) {
}
7. public pada constructor parameter
Misalnya:
class Employee {
constructor(public empName: string) {
}
}
Maka empName menjadi property public.
Kita bisa mengaksesnya dari luar:
const employee = new Employee("John Smith");
console.log(employee.empName);
Hasil:
John Smith
Dan karena public, kita juga bisa:
employee.empName = "Michael";
8. private pada constructor parameter
Sekarang misalnya salary.
Kita tidak ingin salary bisa diubah langsung dari luar.
Kita bisa menulis:
class Employee {
constructor(
public empName: string,
private salary: number
) {
}
}
Sekarang TypeScript otomatis membuat:
empName → public property
salary → private property
Jadi:
employee.empName
✅ boleh.
Tetapi:
employee.salary
❌ tidak boleh.
Karena salary private.
9. Ini menggantikan deklarasi property sebelumnya
Cara lama:
class Employee {
public empName: string;
private salary: number;
public baseLocation: string;
public isEligible: boolean;
private hikePercent: number;
constructor(
empName: string,
salary: number,
baseLocation: string,
isEligible: boolean,
hikePercent: number
) {
this.empName = empName;
this.salary = salary;
this.baseLocation = baseLocation;
this.isEligible = isEligible;
this.hikePercent = hikePercent;
}
}
Dengan shorthand:
class Employee {
constructor(
public empName: string,
private salary: number,
public baseLocation: string,
public isEligible: boolean,
private hikePercent: number
) {
}
}
Lebih ringkas.
10. Perhatikan pola ini
constructor(
public empName: string,
private salary: number,
public baseLocation: string,
public isEligible: boolean,
private hikePercent: number
) {
}
Kita bisa membaca setiap parameter seperti ini:
Parameter pertama
public empName: string
Artinya:
Buat property
empNameyang public dan tipenya string.
Parameter kedua
private salary: number
Artinya:
Buat property
salaryyang private dan tipenya number.
Parameter ketiga
public baseLocation: string
Artinya:
Buat property
baseLocationyang public dan tipenya string.
Parameter keempat
public isEligible: boolean
Artinya:
Buat property
isEligibleyang public dan tipenya boolean.
Parameter kelima
private hikePercent: number
Artinya:
Buat property
hikePercentyang private dan tipenya number.
11. Apa yang terjadi saat membuat object?
Misalnya:
const employee = new Employee(
"John Smith",
10000,
"London",
true,
20
);
Nilai-nilainya masuk ke constructor:
"John Smith" ─────→ empName
10000 ────────────→ salary
"London" ─────────→ baseLocation
true ─────────────→ isEligible
20 ───────────────→ hikePercent
Kemudian karena masing-masing parameter memiliki access modifier, TypeScript membuat property-property tersebut secara otomatis.
Hasil konseptualnya:
employee
│
├── empName: "John Smith" public
├── salary: 10000 private
├── baseLocation: "London" public
├── isEligible: true public
└── hikePercent: 20 private
12. Bandingkan sebelum dan sesudah
Cara lama
class Employee {
public empName: string;
private salary: number;
constructor(
empName: string,
salary: number
) {
this.empName = empName;
this.salary = salary;
}
}
Ada:
- deklarasi property,
- parameter constructor,
- assignment property.
Shorthand
class Employee {
constructor(
public empName: string,
private salary: number
) {
}
}
Semua dilakukan dalam satu tempat.
13. Ini bukan sekadar parameter biasa
Ini adalah bagian yang sering membingungkan pemula.
Lihat:
constructor(empName: string) {
}
empName = parameter biasa.
Tetapi:
constructor(public empName: string) {
}
empName = constructor parameter sekaligus property class.
Begitu juga:
constructor(private salary: number) {
}
salary menjadi:
constructor parameter + private property.
14. Analogi sederhana
Bayangkan kamu menerima formulir karyawan.
Formulirnya berisi:
Nama : John Smith
Salary : 10,000
Lokasi : London
Eligible : true
Hike : 20%
Cara lama seperti kamu mengatakan:
“Saya buat lima lemari dulu.”
Kemudian:
“Sekarang saya terima lima barang.”
Kemudian:
“Saya masukkan barang satu per satu ke lemari.”
Cara shorthand seperti:
“Ketika barang diterima, langsung buat tempat penyimpanannya sekaligus masukkan barang tersebut.”
Jadi lebih praktis.
15. Hubungannya dengan access modifier yang dipelajari sebelumnya
Lecture sebelumnya kita belajar:
public
private
Sekarang konsep tersebut dipakai sekaligus untuk membuat property.
Misalnya:
constructor(
public name: string,
private salary: number
) {}
public memiliki dua fungsi dalam konteks ini:
- Menjadikan parameter tersebut sebagai property.
- Menentukan property tersebut dapat diakses dari luar.
Sedangkan:
private salary
juga memiliki dua fungsi:
- Membuat
salarymenjadi property. - Membatasi akses
salaryhanya di dalam class.
16. Bagaimana dengan method?
Shorthand ini khusus berkaitan dengan constructor parameter yang diberi access modifier.
Misalnya:
class Employee {
constructor(
public name: string,
private salary: number
) {}
getSalary() {
return this.salary;
}
}
Method tetap ditulis seperti biasa.
Kita masih menggunakan:
this.salary
karena salary sekarang merupakan property dari object.
17. Contoh lengkap
Misalnya kita punya:
class Employee {
constructor(
public empName: string,
private salary: number,
public baseLocation: string,
public isEligible: boolean,
private hikePercent: number
) {}
getSalary() {
if (this.isEligible) {
return this.getNewSalary();
}
return this.salary;
}
private getNewSalary() {
const hike =
this.salary * this.hikePercent / 100;
return this.salary + hike;
}
}
Kemudian:
const employee = new Employee(
"John Smith",
10000,
"London",
true,
20
);
Kita bisa:
console.log(employee.empName);
John Smith
Bisa:
console.log(employee.baseLocation);
London
Bisa:
console.log(employee.isEligible);
true
Bisa:
console.log(employee.getSalary());
12000
Tetapi:
console.log(employee.salary);
❌ error karena salary private.
Dan:
employee.hikePercent
❌ error karena hikePercent private.
18. Tentang error undefined di lecture
Di akhir lecture ada bagian ketika hasil getSalary() sempat menghasilkan:
undefined
Kemudian instructor mengatakan bahwa masalahnya adalah function tersebut tidak melakukan return.
Ini konsep JavaScript/TypeScript yang penting.
Misalnya:
getSalary() {
this.getNewSalary();
}
Method tersebut memang menjalankan:
this.getNewSalary();
Tetapi hasilnya tidak dikembalikan.
Sehingga:
console.log(employee.getSalary());
bisa menghasilkan:
undefined
Karena getSalary() sendiri tidak me-return nilai.
Harus:
getSalary() {
return this.getNewSalary();
}
Sekarang hasil dari getNewSalary() diteruskan keluar.
19. Bedakan call dan return
Ini juga penting.
Misalnya:
getSalary() {
this.getNewSalary();
}
Artinya:
Jalankan
getNewSalary(), tetapi hasilnya tidak dikembalikan.
Sedangkan:
getSalary() {
return this.getNewSalary();
}
Artinya:
Jalankan
getNewSalary()dan kembalikan hasilnya kepada pemanggil.
Gambarnya:
Tanpa return:
getSalary()
│
↓
getNewSalary()
│
↓
12000
│
X
tidak diteruskan
Dengan return:
getSalary()
│
↓
getNewSalary()
│
↓
12000
│
↓
return 12000
│
↓
console.log()
│
↓
12000
20. Hal terpenting dari lecture ini
Kalau diringkas menjadi satu konsep:
Cara lama
class Employee {
private salary: number;
constructor(salary: number) {
this.salary = salary;
}
}
Shorthand
class Employee {
constructor(private salary: number) {}
}
Keduanya secara konsep memiliki tujuan yang sama.
Shorthand hanya membuat kode lebih ringkas dan bersih.
🧠 Mental model yang perlu diingat
Ketika kamu melihat:
constructor(
public name: string,
private salary: number
) {}
langsung baca seperti ini:
“Buat property
nameyang public, dan propertysalaryyang private. Nilainya berasal dari argument yang diberikan ketika object dibuat.”
Misalnya:
const employee = new Employee("John", 10000);
Maka:
Employee object
│
├── name ← "John" PUBLIC
│
└── salary ← 10000 PRIVATE
Jadi rumus sederhananya:
constructor(public X: type)
↓
buat property X
+
property public
+
isi dengan nilai X
dan:
constructor(private X: type)
↓
buat property X
+
property private
+
isi dengan nilai X
Intinya: access modifier (public/private) yang ditaruh di depan parameter constructor membuat parameter tersebut otomatis menjadi property class. Inilah yang membuat kita tidak perlu lagi menulis deklarasi property dan assignment this.property = parameter secara manual.