Masukkan Password
38 Metode Kelas
Lecture ini melanjutkan materi sebelumnya tentang class, tetapi sekarang fokus pada bagaimana menambahkan method ke dalam class dan memahami penggunaan keyword this.
Bagian paling penting dari lecture ini sebenarnya adalah:
Property menyimpan data/state object, sedangkan method menentukan behavior/aksi object. Ketika method ingin mengakses property milik object tersebut, kita menggunakan
this.
Mari kita bedah pelan-pelan.
1. Mengingat Kembali Class
Pada lecture sebelumnya kita sudah punya class seperti:
class User {
firstName: string;
lastName: string;
age: number;
gender: string;
constructor(
firstName: string,
lastName: string,
age: number,
gender: string
) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.gender = gender;
}
}
Class User adalah blueprint.
Dari class tersebut kita bisa membuat beberapa object:
const user1 = new User("John", "Smith", 28, "male");
const user2 = new User("Mary", "Jane", 25, "female");
Sekarang ada dua object:
user1
├── firstName = John
├── lastName = Smith
├── age = 28
└── gender = male
user2
├── firstName = Mary
├── lastName = Jane
├── age = 25
└── gender = female
2. Class Bisa Memiliki Method
Sebelumnya kita sudah belajar bahwa class bisa memiliki property.
Sekarang kita tambahkan method.
Misalnya kita ingin setiap user bisa melakukan aksi:
“Menyapa user.”
Kita bisa membuat method:
greetUser() {
}
Sehingga:
class User {
firstName: string;
lastName: string;
age: number;
gender: string;
constructor(
firstName: string,
lastName: string,
age: number,
gender: string
) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.gender = gender;
}
greetUser() {
// logic method
}
}
3. Method pada Class Mirip Function
Kalau kamu sudah memahami function, method seharusnya tidak terlalu sulit.
Function:
function greet() {
console.log("Hello");
}
Method:
class User {
greetUser() {
console.log("Hello");
}
}
Perbedaannya terutama pada tempat function tersebut berada.
Function
↓
berdiri sendiri
Method
↓
function yang menjadi bagian dari object/class
Jadi kita bisa mengatakan:
Method pada dasarnya adalah function yang menjadi behavior dari sebuah object.
4. Membuat Method greetUser()
Misalnya kita ingin menghasilkan:
Hello John Smith
Kita mungkin awalnya berpikir bisa menulis:
greetUser() {
const message = `Hello ${firstName} ${lastName}`;
console.log(message);
}
Tetapi ini akan menghasilkan error.
Kenapa?
Karena:
firstName
dan:
lastName
tidak dianggap sebagai variable lokal di dalam method.
5. Kenapa Tidak Bisa Langsung Menggunakan firstName?
Perhatikan struktur class:
class User {
firstName: string;
lastName: string;
greetUser() {
const message = `Hello ${firstName} ${lastName}`;
}
}
TypeScript melihat:
firstName
dan bertanya:
“Variable
firstNameini berasal dari mana?”
Apakah:
- variable lokal?
- parameter method?
- variable global?
TypeScript tidak otomatis menganggap:
firstName
sebagai:
this.firstName
Karena firstName adalah property milik object.
6. Solusinya: Gunakan this
Kita harus menulis:
this.firstName
dan:
this.lastName
Jadi:
greetUser() {
const message = `Hello ${this.firstName} ${this.lastName}`;
console.log(message);
}
Sekarang TypeScript mengerti:
“Saya ingin mengambil property
firstNamedanlastNamedari object yang sedang menjalankan method ini.”
7. Apa Sebenarnya this?
Ini adalah konsep yang sangat penting dalam OOP JavaScript/TypeScript.
Secara sederhana:
thismengacu kepada object yang sedang menjalankan/memanggil method tersebut.
Misalnya:
user1.greetUser();
Maka di dalam greetUser():
this
mengacu pada:
user1
Sehingga:
this.firstName
berarti:
user1.firstName
dan:
this.lastName
berarti:
user1.lastName
8. Contoh dengan user1
Misalnya:
const user1 = new User(
"John",
"Smith",
28,
"male"
);
Data user1:
user1
├── firstName = John
├── lastName = Smith
├── age = 28
└── gender = male
Kemudian:
user1.greetUser();
Saat method berjalan:
this
↓
user1
Jadi:
this.firstName
→ "John"
dan:
this.lastName
→ "Smith"
Maka:
const message = `Hello ${this.firstName} ${this.lastName}`;
menjadi:
Hello John Smith
9. Bagaimana dengan user2?
Sekarang kita punya:
const user2 = new User(
"Mary",
"Jane",
25,
"female"
);
Kemudian:
user2.greetUser();
Sekarang:
this
↓
user2
Jadi:
this.firstName
→ "Mary"
dan:
this.lastName
→ "Jane"
Hasilnya:
Hello Mary Jane
10. Inilah Kenapa this Sangat Penting
Perhatikan kita hanya menulis satu method:
greetUser() {
const message =
`Hello ${this.firstName} ${this.lastName}`;
console.log(message);
}
Tetapi method tersebut bisa digunakan oleh banyak object.
user1.greetUser();
user2.greetUser();
user3.greetUser();
Hasilnya bisa berbeda:
Hello John Smith
Hello Mary Jane
Hello David Brown
Kenapa?
Karena this selalu mengacu pada object yang sedang memanggil method.
11. Visualisasi this
Ini cara yang bagus untuk mengingatnya:
User Class
┌──────────────┐
│ firstName │
│ lastName │
│ │
│ greetUser() │
└──────┬───────┘
│
┌─────────┴─────────┐
↓ ↓
user1 user2
John Mary
Smith Jane
│ │
↓ ↓
user1.greetUser() user2.greetUser()
│ │
↓ ↓
this = user1 this = user2
Jadi:
user1.greetUser()
↓
this = user1
sedangkan:
user2.greetUser()
↓
this = user2
12. this Bukan Berarti Class
Ini kesalahan pemahaman yang cukup umum.
this bukan berarti class.
Misalnya:
class User {
firstName: string;
}
Kemudian:
const user1 = new User();
const user2 = new User();
Ketika:
user1.someMethod();
this mengacu pada user1, bukan class User.
Ketika:
user2.someMethod();
this mengacu pada user2.
13. Sekarang Kita Tambahkan Parameter ke Method
Sampai sekarang method kita:
greetUser() {
}
tidak menerima parameter.
Tetapi seperti function biasa, method juga bisa menerima parameter.
Misalnya kita ingin memberikan sapaan:
Hello Mr. John Smith
atau:
Hello Mrs. Mary Jane
Kita bisa membuat:
greetUser(salutation: string) {
}
salutation adalah parameter method.
14. Membuat Message
Sekarang:
greetUser(salutation: string) {
const message =
`Hello ${salutation}. ${this.firstName} ${this.lastName}`;
console.log(message);
}
Ada dua jenis data yang kita gunakan di sini.
Data dari parameter
salutation
Data dari property object
this.firstName
this.lastName
Ini perbedaan yang sangat penting.
15. Parameter vs Property
Perhatikan:
greetUser(salutation: string) {
const message =
`Hello ${salutation}. ${this.firstName} ${this.lastName}`;
}
salutation
Adalah parameter:
salutation: string
Kita langsung menggunakan:
salutation
Tidak perlu:
this.salutation
karena salutation bukan property class.
this.firstName
Adalah property class.
Maka kita menggunakan:
this.firstName
this.lastName
Juga property class.
Maka:
this.lastName
Jadi:
salutation
↓
parameter method
this.firstName
↓
property object
this.lastName
↓
property object
16. Contoh Lengkap
Class-nya menjadi seperti ini:
class User {
firstName: string;
lastName: string;
age: number;
gender: string;
constructor(
firstName: string,
lastName: string,
age: number,
gender: string
) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.gender = gender;
}
greetUser(salutation: string) {
const message =
`Hello ${salutation}. ${this.firstName} ${this.lastName}`;
console.log(message);
}
}
Kemudian:
const user1 = new User(
"John",
"Smith",
28,
"male"
);
const user2 = new User(
"Mary",
"Jane",
25,
"female"
);
Untuk user pertama:
user1.greetUser("Mr");
Hasil:
Hello Mr. John Smith
Untuk user kedua:
user2.greetUser("Mrs");
Hasil:
Hello Mrs. Mary Jane
17. Perhatikan Dua Jenis Input
Pada:
user1.greetUser("Mr");
ada dua sumber data.
Dari argument method:
"Mr"
masuk ke:
salutation
Dari object:
user1
├── firstName = John
└── lastName = Smith
diakses menggunakan:
this.firstName
this.lastName
Sehingga:
"Mr"
+
"John"
+
"Smith"
↓
Hello Mr. John Smith
18. Kenapa console.log(message) Tidak Menggunakan this?
Ini juga dijelaskan dalam lecture.
Kita punya:
const message = `Hello...`;
Kemudian:
console.log(message);
Kita tidak perlu:
console.log(this.message);
Kenapa?
Karena message adalah local variable yang dibuat di dalam method:
greetUser() {
const message = "...";
}
Jadi message langsung bisa diakses.
19. Bedakan Local Variable dan Class Property
Local variable
greetUser() {
const message = "Hello";
console.log(message);
}
message adalah variable lokal.
Gunakan:
message
Class property
class User {
firstName: string;
}
Di dalam method:
greetUser() {
console.log(this.firstName);
}
Gunakan:
this.firstName
20. Aturan Praktis this
Untuk level sekarang, gunakan aturan sederhana:
Kalau ingin mengakses property milik object dari dalam method, gunakan
this.
Contoh:
class User {
name: string;
greet() {
console.log(this.name);
}
}
Bukan:
class User {
name: string;
greet() {
console.log(name); // ❌
}
}
21. Kenapa Satu Method Bisa Menghasilkan Data Berbeda?
Ini inti dari OOP.
Method:
greetUser(salutation: string) {
const message =
`Hello ${salutation}. ${this.firstName} ${this.lastName}`;
console.log(message);
}
hanya ditulis sekali.
Tetapi bisa digunakan oleh banyak instance:
user1.greetUser("Mr");
user2.greetUser("Mrs");
user3.greetUser("Mr");
Karena setiap instance memiliki property masing-masing.
user1
firstName = John
lastName = Smith
user2
firstName = Mary
lastName = Jane
Method-nya sama, tetapi this berbeda.
22. Analogi Sederhana
Bayangkan class User adalah template kartu identitas.
Semua user punya:
Nama depan
Nama belakang
Umur
Gender
Dan semua user bisa:
Greet user
Sekarang ada dua orang:
John Smith
Mary Jane
Ketika John menjalankan:
greetUser()
dia akan menggunakan datanya sendiri.
Ketika Mary menjalankan:
greetUser()
dia menggunakan datanya sendiri.
Itulah fungsi this.
this= “object yang sedang melakukan aksi ini.”
23. Class Lengkap + Diagram
Kode:
class User {
firstName: string;
lastName: string;
age: number;
gender: string;
constructor(
firstName: string,
lastName: string,
age: number,
gender: string
) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.gender = gender;
}
greetUser(salutation: string) {
const message =
`Hello ${salutation}. ${this.firstName} ${this.lastName}`;
console.log(message);
}
}
Kemudian:
const user1 = new User("John", "Smith", 28, "male");
const user2 = new User("Mary", "Jane", 25, "female");
user1.greetUser("Mr");
user2.greetUser("Mrs");
Alurnya:
User CLASS
│
┌─────────────┴─────────────┐
│ │
user1 user2
│ │
John / Smith Mary / Jane
│ │
↓ ↓
user1.greetUser("Mr") user2.greetUser("Mrs")
│ │
↓ ↓
this = user1 this = user2
│ │
↓ ↓
Hello Mr. John Smith Hello Mrs. Mary Jane
24. Constructor vs Method Biasa
Lecture juga menyebut bahwa constructor sebenarnya adalah special method.
Perbedaannya:
Constructor
Dipanggil ketika object dibuat:
new User(...)
Tujuan utamanya biasanya:
menginisialisasi object.
Contoh:
constructor(name: string) {
this.name = name;
}
Method biasa
Dipanggil ketika kita meminta object melakukan suatu aksi:
user1.greetUser("Mr");
Tujuannya:
menjalankan behavior/aksi object.
25. Perbandingan
| Constructor | Method |
|---|---|
| Method khusus | Method biasa |
Dipanggil saat new | Dipanggil sesuai kebutuhan |
Namanya harus constructor | Bisa diberi nama apa saja |
| Umumnya menginisialisasi property | Menjalankan behavior |
new User(...) | user.greetUser() |
26. Hal yang Sering Membingungkan
Misalnya:
class User {
firstName: string;
greetUser() {
console.log(this.firstName);
}
}
Kemudian:
const user1 = new User();
const user2 = new User();
Kalau kita melakukan:
user1.greetUser();
maka:
this.firstName
↓
user1.firstName
Tetapi kalau:
user2.greetUser();
maka:
this.firstName
↓
user2.firstName
Method-nya sama. this-nya yang berubah sesuai object pemanggil.
27. Ringkasan Lecture
Ada beberapa konsep yang wajib kamu kuasai dari lecture ini.
① Class bisa memiliki property
class User {
firstName: string;
lastName: string;
}
Property = data/state object.
② Class bisa memiliki method
class User {
greetUser() {
console.log("Hello");
}
}
Method = behavior/aksi object.
③ Method bisa menerima parameter
greetUser(salutation: string) {
}
Sama seperti function biasa.
④ Property class diakses menggunakan this
this.firstName
this.lastName
⑤ this mengacu pada object yang sedang memanggil method
user1.greetUser();
→ this adalah user1.
Sedangkan:
user2.greetUser();
→ this adalah user2.
⑥ Local variable tidak membutuhkan this
const message = "...";
console.log(message);
Karena message adalah variable lokal.
🧠 Cara Mengingat Paling Mudah
Pegang tiga aturan ini:
PROPERTY
↓
data milik object
↓
this.property
METHOD
↓
behavior/aksi object
↓
object.method()
THIS
↓
object yang sedang memanggil method
Contohnya:
user1.greetUser("Mr");
Baca seperti ini:
“User1, tolong jalankan method
greetUserdengan salutationMr.”
Di dalam method:
this.firstName
artinya:
“Ambil
firstNamemilik user1 yang sedang menjalankan method ini.”
Sedangkan:
salutation
artinya:
“Ambil parameter yang dikirim ketika method dipanggil.”
Kalau pemahaman this ini sudah kuat, kamu akan jauh lebih mudah memahami materi OOP berikutnya seperti access modifiers (public, private, protected), inheritance, static, abstract class, interface, dan polymorphism.