Masukkan Password
26 Objek & Metode JavaScript
Lecture ini melanjutkan langsung dari pembahasan object sebelumnya. Kalau lecture sebelumnya kita belajar:
Object = kumpulan property berupa key-value pair
maka sekarang kita belajar satu konsep baru:
Kalau sebuah property menyimpan function, property tersebut disebut method.
Ini konsep yang sangat penting karena nantinya kamu akan sering melihat object seperti:
user.name
user.age
user.calculateAge()
name dan age adalah property, sedangkan calculateAge() adalah method.
1. Review: Apa itu Object?
Misalnya kita punya:
let user = {
name: "John",
yearOfBirth: 1989,
isMarried: false
};
Object user memiliki beberapa data:
user
│
├── name → "John"
├── yearOfBirth → 1989
└── isMarried → false
Setiap data tersebut disebut property.
Jadi:
user.name
adalah property.
user.yearOfBirth
adalah property.
user.isMarried
juga property.
2. Property Bisa Menyimpan Value Apa Pun
Ini adalah dasar penting sebelum memahami method.
Sebuah property bisa menyimpan berbagai macam tipe value.
Misalnya:
let user = {
name: "John", // String
yearOfBirth: 1989, // Number
isMarried: false, // Boolean
address: null // null
};
Jadi:
property → value
bisa berupa:
String
Number
Boolean
null
undefined
Array
Object
Function
dll.
Dan di sinilah hubungannya dengan method.
3. Function Juga Bisa Menjadi Value
Di lecture sebelumnya kita sudah belajar bahwa function adalah sebuah value.
Contoh:
let greetings = function() {
console.log("Hello");
};
Function tersebut disimpan di variable greetings.
Jadi secara sederhana:
greetings → function
Karena function adalah value, kita juga bisa memasukkannya ke dalam object.
Contohnya:
let user = {
name: "John",
calculateAge: function() {
// function
}
};
Sekarang object kita memiliki:
user
│
├── name → "John"
└── calculateAge → function
Nah, karena calculateAge menyimpan sebuah function dan berada sebagai property dari object, maka property tersebut disebut:
Method
4. Jadi Apa Bedanya Property dan Method?
Ini bagian paling penting dari lecture.
Misalnya:
let user = {
name: "John",
age: 28,
sayHello: function() {
console.log("Hello");
}
};
Di sini:
name
age
adalah property karena menyimpan data biasa.
Sedangkan:
sayHello
adalah method karena menyimpan function.
Gambaran sederhananya:
OBJECT
│
├── PROPERTY
│ ├── name → "John"
│ └── age → 28
│
└── METHOD
└── sayHello → function
Atau:
Property = object menyimpan data. Method = object menyimpan function/perilaku.
5. Analogi Sederhana
Bayangkan kita mempunyai object berupa mobil.
Mobil memiliki:
brand → Toyota
color → Black
speed → 100
Itu adalah data/property.
Tetapi mobil juga bisa melakukan sesuatu:
start()
drive()
brake()
stop()
Itu adalah behavior/perilaku.
Dalam JavaScript kita bisa menggambarkannya:
let car = {
brand: "Toyota",
color: "Black",
start: function() {
console.log("Car started");
},
drive: function() {
console.log("Car is driving");
}
};
Jadi:
car
│
├── brand → "Toyota" ← property
├── color → "Black" ← property
│
├── start() ← method
└── drive() ← method
Ini salah satu ide dasar dari object-oriented programming:
Object tidak hanya menyimpan data, tetapi juga bisa memiliki behavior/perilaku yang berkaitan dengan data tersebut.
6. Cara Membuat Method
Sekarang kita lihat syntax-nya.
Misalnya:
let user = {
name: "John",
yearOfBirth: 1989,
calculateAge: function(yearOfBirth) {
return 2024 - yearOfBirth;
}
};
Perhatikan:
calculateAge: function(yearOfBirth) {
return 2024 - yearOfBirth;
}
Strukturnya:
propertyName : function() {
...
}
Jadi:
calculateAge
adalah nama property.
Sedangkan:
function(yearOfBirth) {
return 2024 - yearOfBirth;
}
adalah value yang disimpan di property tersebut.
Karena value-nya adalah function, maka calculateAge disebut method.
7. Kenapa Menggunakan : dan Bukan =?
Ini sering membingungkan pemula.
Kalau kita membuat variable:
let age = 28;
kita menggunakan:
=
Tetapi saat membuat property di object:
let user = {
age: 28
};
kita menggunakan:
:
Karena syntax object adalah:
key: value
Misalnya:
let user = {
name: "John",
age: 28
};
Artinya:
name → "John"
age → 28
Kalau value-nya function:
let user = {
calculateAge: function() {
// ...
}
};
Artinya:
calculateAge → function
Jadi:
:
berarti:
“Property ini memiliki value tersebut.”
8. Method pada Lecture: calculateAge
Lecture menggunakan contoh:
let user = {
name: "John",
yearOfBirth: 1989,
calculateAge: function(yearOfBirth) {
return 2024 - yearOfBirth;
}
};
Method tersebut menerima parameter:
yearOfBirth
kemudian:
return 2024 - yearOfBirth;
Misalnya:
2024 - 1989 = 35
Jadi method akan mengembalikan:
35
9. Cara Memanggil Method
Ini sangat mirip dengan function biasa.
Kalau function biasa:
greetings();
Kalau method yang berada di dalam object:
user.calculateAge();
Perhatikan:
user.calculateAge()
Strukturnya:
object.method()
│ │
│ └── nama method
└───────── object
Karena calculateAge menyimpan function, kita menggunakan:
()
untuk menjalankan function tersebut.
10. Property vs Method Saat Diakses
Misalnya:
let user = {
name: "John",
calculateAge: function() {
return 35;
}
};
Kalau ingin mengambil property name:
user.name
Tidak menggunakan ().
Karena name hanya menyimpan value:
"John"
Sedangkan:
user.calculateAge()
menggunakan () karena kita ingin menjalankan function.
Jadi:
user.name
↑
value
sedangkan:
user.calculateAge()
↑ ↑
method jalankan
Ini perbedaan yang sangat penting.
11. Method Bisa Menerima Argument
Method sama seperti function biasa.
Misalnya:
let user = {
calculateAge: function(yearOfBirth) {
return 2024 - yearOfBirth;
}
};
Kita bisa memanggil:
let age = user.calculateAge(1989);
Di sini:
yearOfBirth → parameter
1989 → argument
Sama seperti function yang sudah kita pelajari sebelumnya.
Kemudian:
2024 - 1989
menghasilkan:
35
dan 35 dikembalikan oleh return.
Maka:
let age = user.calculateAge(1989);
menghasilkan:
age === 35
12. Nah, Muncul Masalah Baru
Perhatikan object kita:
let user = {
name: "John",
yearOfBirth: 1989,
calculateAge: function(yearOfBirth) {
return 2024 - yearOfBirth;
}
};
Object sudah memiliki:
yearOfBirth: 1989
Tapi kita masih mengirimkannya lagi:
user.calculateAge(1989);
Ini terasa agak redundant.
Kita seperti mengatakan:
“Hei object
user, hitung umur berdasarkan1989.”
Padahal user sendiri sudah tahu:
yearOfBirth = 1989
Akan lebih bagus kalau kita bisa mengatakan:
user.calculateAge();
dan method-nya mengambil yearOfBirth milik object tersebut secara langsung.
Nah, di sinilah kita bertemu dengan keyword yang sangat penting:
this
13. Apa itu this?
Untuk sekarang, sesuai level lecture ini, pahami:
thismenunjuk ke object yang sedang menjalankan/calling method tersebut.
Misalnya:
user.calculateAge();
Method calculateAge sedang dipanggil melalui:
user
Maka di dalam method tersebut:
this
mengacu kepada:
user
Secara sederhana:
user.calculateAge()
│
↓
calculateAge sedang dijalankan
│
↓
this
│
↓
user
14. Menggunakan this untuk Mengakses Property
Awalnya lecture membuat:
let user = {
name: "John",
yearOfBirth: 1989,
calculateAge: function(yearOfBirth) {
return 2024 - yearOfBirth;
}
};
Sekarang kita tidak perlu parameter yearOfBirth.
Kita bisa:
let user = {
name: "John",
yearOfBirth: 1989,
calculateAge: function() {
return 2024 - this.yearOfBirth;
}
};
Perhatikan:
this.yearOfBirth
Artinya:
“Ambil property
yearOfBirthdari object yang sedang menjalankan method ini.”
Karena method dipanggil seperti:
user.calculateAge();
maka:
this
mengacu ke user.
Sehingga:
this.yearOfBirth
secara sederhana dapat kita bayangkan sebagai:
user.yearOfBirth
15. Mari Jalankan Step-by-Step
Object:
let user = {
name: "John",
yearOfBirth: 1989,
calculateAge: function() {
return 2024 - this.yearOfBirth;
}
};
Kemudian:
let age = user.calculateAge();
Apa yang terjadi?
Step 1
JavaScript melihat:
user.calculateAge()
Artinya:
Jalankan method
calculateAgemilikuser.
Step 2
Di dalam method ada:
this.yearOfBirth
this mengacu pada user.
Jadi secara sederhana:
this.yearOfBirth
menjadi:
user.yearOfBirth
Step 3
Nilainya:
1989
Step 4
Method menghitung:
2024 - 1989
Step 5
Hasilnya:
35
Step 6
return mengembalikan 35.
Jadi:
let age = user.calculateAge();
hasilnya:
age → 35
16. Kenapa this Lebih Bagus daripada Menulis Nama Object?
Kamu mungkin bertanya:
“Kenapa tidak langsung saja tulis
user.yearOfBirth?”
Misalnya:
let user = {
yearOfBirth: 1989,
calculateAge: function() {
return 2024 - user.yearOfBirth;
}
};
Ini mungkin terlihat bisa bekerja dalam contoh sederhana.
Tetapi this lebih tepat karena method tersebut seharusnya bekerja berdasarkan object yang menjalankannya, bukan berdasarkan nama object tertentu.
Kita ingin mengatakan:
this.yearOfBirth
yang berarti:
“yearOfBirth milik object ini.”
Bukan:
“yearOfBirth milik object yang kebetulan bernama
user.”
Konsep ini akan menjadi sangat penting ketika kita mulai membuat banyak object.
17. Analogi this
Bayangkan kamu sedang berbicara dengan diri sendiri.
Kalau John berkata:
“Umur saya 30 tahun.”
“Saya” (I / my) berarti John.
Kalau Budi mengatakan:
“Umur saya 25 tahun.”
“Saya” berarti Budi.
Kata:
“saya”
bergantung pada siapa yang sedang berbicara.
Kurang lebih konsep this seperti itu.
this.age
bisa kita pahami sebagai:
“age milik saya/object ini.”
Dalam:
user.calculateAge()
this secara sederhana mengarah ke user.
18. this bukan variable biasa
Ini penting.
this bukan seperti:
let this = ...
Kita tidak mendefinisikannya sendiri seperti variable biasa.
JavaScript menentukan nilai this berdasarkan bagaimana function/method tersebut dipanggil.
Untuk level lecture ini, cukup pegang pola:
object.method()
maka di dalam method tersebut, this mengacu pada object pemanggil dalam pola tersebut.
Contoh:
user.calculateAge();
→ this mengacu ke user.
Nanti ada aturan this yang lebih kompleks, terutama ketika menggunakan function biasa, arrow function, call, apply, bind, constructor, dan class. Itu memang perlu dipelajari terpisah.
Untuk sekarang jangan dibebani dulu.
19. Method Bisa Mengakses Banyak Property
Misalnya:
let user = {
name: "John",
yearOfBirth: 1989,
city: "Surabaya",
introduce: function() {
return `My name is ${this.name} and I live in ${this.city}`;
}
};
Ketika:
console.log(user.introduce());
this mengacu ke user.
Sehingga:
this.name
→ "John"
dan:
this.city
→ "Surabaya"
Hasil:
My name is John and I live in Surabaya
Jadi method bisa menggunakan data yang berada di object yang sama.
Ini adalah salah satu kekuatan utama object.
20. Property = Data, Method = Behavior
Sekarang kita bisa memahami konsep yang lebih besar.
Object biasanya bisa memiliki:
Data
let user = {
name: "John",
age: 35
};
Behavior
let user = {
name: "John",
age: 35,
sayHello: function() {
console.log("Hello");
}
};
Sehingga:
OBJECT
│
├── DATA
│ ├── name
│ └── age
│
└── BEHAVIOR
└── sayHello()
Ini alasan method sangat erat hubungannya dengan Object-Oriented Programming (OOP).
21. Property dan Method sebenarnya sama-sama Property
Ini sedikit konsep penting.
Secara struktur, name dan calculateAge sebenarnya sama-sama merupakan property pada object.
Perbedaannya hanya pada value yang disimpan.
let user = {
name: "John",
calculateAge: function() {}
};
Secara konsep:
name
↓
property → value String
calculateAge
↓
property → value Function
↓
disebut method
Jadi lebih tepatnya:
Method adalah property yang value-nya berupa function.
Ini adalah definisi yang sangat bagus untuk kamu ingat.
22. Perbandingan Function Biasa dan Method
Function biasa
function calculateAge(yearOfBirth) {
return 2024 - yearOfBirth;
}
calculateAge(1989);
Function berdiri sendiri.
Method
let user = {
yearOfBirth: 1989,
calculateAge: function() {
return 2024 - this.yearOfBirth;
}
};
user.calculateAge();
Function tersebut menjadi bagian dari object.
Jadi:
Function
↓
berdiri sendiri
sedangkan:
Method
↓
function yang menjadi property object
23. Kenapa Method Sangat Berguna?
Bayangkan kita punya banyak user.
Setiap user punya:
name
yearOfBirth
dan setiap user perlu kemampuan:
calculateAge()
Konsep object memungkinkan kita menggabungkan:
DATA
+
FUNCTION YANG BEKERJA DENGAN DATA TERSEBUT
Misalnya:
let user = {
name: "John",
yearOfBirth: 1989,
calculateAge: function() {
return 2024 - this.yearOfBirth;
}
};
Sekarang object user tidak hanya menyimpan:
name
yearOfBirth
tetapi juga tahu:
“Bagaimana cara menghitung umur saya.”
Itulah ide dasar yang akan terus muncul dalam object-oriented programming.
24. Dot Notation untuk Method
Sama seperti property, method juga bisa diakses dengan dot notation:
user.calculateAge();
Strukturnya:
user
↓
.calculateAge
↓
()
↓
jalankan function
Jadi jangan hanya melihat:
user.calculateAge
sebagai “ambil property”.
Kalau ditambah:
()
maka function yang tersimpan di property tersebut dijalankan.
25. Bracket Notation Juga Bisa Digunakan
Karena method sebenarnya adalah property yang berisi function, kita juga bisa menggunakan bracket notation.
Misalnya:
let user = {
calculateAge: function() {
return 35;
}
};
Kita bisa:
user["calculateAge"]();
Ini sama dengan:
user.calculateAge();
Keduanya menjalankan method.
26. Bedakan method dengan method()
Ini juga penting.
Misalnya:
user.calculateAge
artinya kita mengakses value yang disimpan di property calculateAge.
Value tersebut adalah function.
Sedangkan:
user.calculateAge()
artinya:
jalankan function tersebut.
Sama seperti lecture function sebelumnya:
let greetings = function() {
console.log("Hello");
};
greetings
→ function value.
greetings()
→ jalankan function.
Begitu juga:
user.calculateAge
→ function value.
user.calculateAge()
→ jalankan function.
27. Contoh Lengkap dari Lecture
Mari kita buat versi lengkap:
let user = {
name: "John",
yearOfBirth: 1989,
isMarried: false,
calculateAge: function() {
return 2024 - this.yearOfBirth;
}
};
Object:
user
│
├── name → "John"
├── yearOfBirth → 1989
├── isMarried → false
└── calculateAge → function
Ambil property:
console.log(user.name);
Output:
John
Ambil property:
console.log(user.yearOfBirth);
Output:
1989
Jalankan method:
console.log(user.calculateAge());
Output:
35
28. Alur user.calculateAge()
Ini yang sebaiknya kamu pahami secara mendalam:
user.calculateAge();
JavaScript secara konsep:
1. Cari object "user"
↓
2. Cari property "calculateAge"
↓
3. Property tersebut berisi function
↓
4. Jalankan function
↓
5. Di dalam function:
this → user
↓
6. this.yearOfBirth → 1989
↓
7. 2024 - 1989
↓
8. return 35
Jadi hasil akhirnya:
35
29. return Tetap Bekerja Seperti Function Biasa
Method juga bisa menggunakan return.
let user = {
yearOfBirth: 1989,
calculateAge: function() {
return 2024 - this.yearOfBirth;
}
};
Kemudian:
let age = user.calculateAge();
Karena method melakukan:
return 35;
maka:
age
berisi:
35
Ini sama persis dengan konsep return yang sudah kita pelajari di lecture function.
30. Jangan Tertukar dengan console.log()
Misalnya:
calculateAge: function() {
console.log(2024 - this.yearOfBirth);
}
Ini menampilkan hasil.
Sedangkan:
calculateAge: function() {
return 2024 - this.yearOfBirth;
}
Ini mengembalikan hasil.
Misalnya:
let age = user.calculateAge();
Kalau method menggunakan console.log() saja:
age
akan menjadi:
undefined
Kalau menggunakan return:
age
menjadi:
35
Jadi ingat:
console.log() → tampilkan
return → kirim nilai keluar
31. Kenapa JavaScript Banyak Menggunakan Object?
Di lecture disebutkan bahwa JavaScript adalah bahasa yang sangat menggunakan konsep object.
Nanti kamu akan bertemu object hampir di mana-mana.
Contohnya browser sendiri menyediakan banyak object:
console
window
document
Misalnya:
console.log()
console adalah object dan log adalah method.
Secara konsep:
console
│
└── log()
Begitu juga nanti kamu akan sering melihat pola seperti:
document.getElementById()
atau:
array.push()
dan banyak lagi.
Jadi ketika kamu melihat:
something.doSomething()
kemungkinan besar kamu sedang melihat:
object + method
32. Hubungan dengan Lecture Sebelumnya
Kalau kita rangkai semua lecture sebelumnya:
Variable
let age = 28;
Variable menyimpan value.
Function
function calculateAge() {
return 35;
}
Function adalah value yang bisa dijalankan.
Object
let user = {
age: 28
};
Object mengelompokkan data dalam property.
Method
let user = {
age: 28,
calculateAge: function() {
return 2024 - this.yearOfBirth;
}
};
Function disimpan sebagai property object → method.
Jadi pembelajaranmu sekarang sebenarnya sedang menyambung dengan sangat rapi:
Variable
↓
Value
↓
Function juga merupakan value
↓
Function bisa disimpan sebagai property
↓
Property yang menyimpan function
↓
METHOD
33. Cheat Sheet
Object
let user = {
name: "John",
age: 28
};
Property
user.name
user.age
Property menyimpan data.
Method
let user = {
sayHello: function() {
console.log("Hello");
}
};
Property sayHello menyimpan function → method.
Memanggil method
user.sayHello();
Method dengan parameter
let user = {
greet: function(name) {
return `Hello ${name}`;
}
};
user.greet("John");
Method menggunakan data object sendiri
let user = {
name: "John",
greet: function() {
return `Hello ${this.name}`;
}
};
user.greet();
34. Perbedaan Property dan Method
| Property | Method | |
|---|---|---|
| Menyimpan | Data/value | Function |
| Contoh | name: "John" | greet: function() {} |
| Akses | user.name | user.greet() |
() | Tidak perlu | Perlu untuk menjalankan |
| Tujuan | Menyimpan informasi | Melakukan sesuatu |
Cara paling mudah mengingatnya:
Property = “object ini punya apa?” Method = “object ini bisa melakukan apa?”
Misalnya object car:
CAR
│
├── brand → Toyota ← punya apa?
├── color → Black ← punya apa?
│
├── start() ← bisa melakukan apa?
├── drive() ← bisa melakukan apa?
└── brake() ← bisa melakukan apa?
35. Inti Paling Penting dari Lecture Ini
Ada 6 hal yang wajib kamu kuasai.
1. Object adalah kumpulan key-value pair
let user = {
name: "John",
age: 28
};
2. Property menyimpan value
name: "John"
age: 28
3. Function juga merupakan value
let greet = function() {
console.log("Hello");
};
4. Function yang disimpan sebagai property object disebut method
let user = {
greet: function() {
console.log("Hello");
}
};
5. Method dijalankan menggunakan ()
user.greet();
Bukan hanya:
user.greet;
6. this digunakan untuk mengakses property milik object yang sedang menjalankan method
let user = {
yearOfBirth: 1989,
calculateAge: function() {
return 2024 - this.yearOfBirth;
}
};
Ketika:
user.calculateAge();
maka secara sederhana:
this → user
sehingga:
this.yearOfBirth
mengacu pada:
user.yearOfBirth
🧠 Mental model terakhir
Bayangkan object sebagai seorang manusia.
USER
│
┌──────────┴──────────┐
↓ ↓
PROPERTY METHOD
│ │
↓ ↓
name → John greet()
age → 28 calculateAge()
Property menjelaskan data yang dimiliki object.
Method menjelaskan aksi yang bisa dilakukan object.
Dan this bisa kamu bayangkan sebagai kata “saya”:
this.name
≈
“nama saya”
Sedangkan:
this.yearOfBirth
≈
“tahun lahir saya”
Jadi ketika kamu melihat:
user.calculateAge();
bayangkan:
“User, jalankan kemampuan
calculateAgemilikmu sendiri.”
dan di dalam method:
this.yearOfBirth
berarti:
“Ambil
yearOfBirthmilik saya (object yang sedang menjalankan method).”
Itulah inti utama lecture ini. Setelah konsep ini benar-benar kamu pahami, pembahasan object, method, dan this di lecture-lecture berikutnya akan jauh lebih mudah.