Dalam kehidupan sehari-hari, kita sering menjumpai objek. Objek dapat didefinisikan sebagai segala sesuatu yang ada di dunia ini, baik itu benda mati maupun makhluk hidup. Dalam konteks pemrograman, objek adalah representasi dari hal-hal tersebut. Paradigma yang umum digunakan untuk memodelkan objek dalam pemrograman adalah Object Oriented Programming (OOP) atau pemrograman berorientasi objek. Dalam OOP, segala sesuatu dipandang sebagai objek yang dapat saling berinteraksi, sehingga membentuk sebuah program yang kompleks.
Apa itu Objek di JavaScript?
Objek di JavaScript merupakan sebuah variabel yang dapat menyimpan nilai (disebut properti) dan fungsi (disebut method). Sebagai contoh, mari kita ambil objek mobil.
Contoh Objek Mobil
Misalkan kita ingin memodelkan sebuah mobil. Kita bisa mulai dengan mendefinisikan objek tersebut menggunakan variabel. Contohnya:
var car = "Mobil Fiat";
Namun, variabel car hanya menyimpan nama mobil saja, tanpa informasi lain. Oleh karena itu, kita perlu menggunakan objek untuk menyimpan lebih banyak data.
Membuat Objek dengan Notasi Kurung Kurawal
Objek di JavaScript dapat dibuat dengan menggunakan tanda kurung kurawal, di mana kita mendefinisikan pasangan key dan value. Berikut adalah contoh pembuatan objek mobil:
var car = {
type: "Fiat",
model: "500",
color: "white"
};
Dengan cara ini, kita dapat menyimpan berbagai informasi terkait objek mobil dalam satu struktur data.
Apa Perbedaan Properti dan Method?
Dalam objek yang telah kita buat, kita baru saja membuat properti. Properti adalah ciri khas dari objek (variabel), sedangkan method adalah perilaku dari objek (fungsi). Untuk menambahkan method ke dalam objek, kita bisa mendefinisikannya sebagai sebuah fungsi.
Contoh Penambahan Method
var car = {
type: "Fiat",
model: "500",
color: "white",
start: function() {
console.log("Ini method start");
},
drive: function() {
console.log("Ini method drive");
},
brake: function() {
console.log("Ini method brake");
},
stop: function() {
console.log("Ini method stop");
}
};
Dengan cara ini, objek car kini memiliki properti dan method yang dapat kita gunakan.
Cara Mengakses Properti dan Method Objek
Setelah membuat objek, kita perlu tahu bagaimana cara mengakses properti dan method yang ada di dalamnya. Caranya adalah dengan menggunakan tanda titik (dot notation), diikuti dengan nama properti atau method.
Contoh Akses Properti dan Method
console.log(car.type); // Mengakses properti console.log(car.color); // Mengakses properti car.start(); // Menjalankan method car.drive(); // Menjalankan method
Dalam contoh di atas, kita dapat mengakses properti menggunakan objek.properti dan menjalankan method dengan objek.method().
Menggunakan Keyword this
Keyword this dalam JavaScript digunakan untuk merujuk pada objek pemiliknya. Saat digunakan dalam method, this akan mengacu pada objek yang memanggil method tersebut.
Contoh Penggunaan this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar Objek Javascript</title>
<script>
var person = {
firstName: "Muhar",
lastName: "Dian",
showName: function() {
alert(`Nama: ${this.firstName} ${this.lastName}`);
}
};
person.showName();
</script>
</head>
<body>
</body>
</html>
Dalam contoh di atas, this merujuk pada objek person, sehingga method showName dapat mengakses properti firstName dan lastName.
Membuat Class Objek dengan this
Dalam pemrograman berorientasi objek, kita sering membuat objek dengan membuat instance dari class. Namun, pada contoh sebelumnya, kita membuat objek secara langsung. Lalu, bagaimana jika kita ingin membuat objek baru dengan properti yang sama?
Menggunakan Class untuk Membuat Objek
Di JavaScript, kita dapat membuat class mulai dari versi ES6. Namun, pada versi sebelumnya (ES5), kita bisa menggunakan function untuk membuat class. Berikut adalah contoh pembuatan class menggunakan function:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar Objek Javascript</title>
<script>
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.fullName = function() {
return `${this.firstName} ${this.lastName}`;
};
this.showName = function() {
document.write(this.fullName());
};
}
var person1 = new Person("Muhar", "Dian");
var person2 = new Person("Petani", "Kode");
person1.showName();
document.write("<br>");
person2.showName();
</script>
</head>
<body>
</body>
</html>
Dalam contoh di atas, kita membuat objek baru dengan menggunakan keyword new, dan memberikan nilai untuk firstName dan lastName. Dengan cara ini, kita dapat membuat banyak objek dengan properti yang sama tanpa harus menulis ulang kode.
Apa Selanjutnya?
Sampai di sini, kita telah belajar dasar-dasar objek pada JavaScript. Namun, masih ada banyak hal yang dapat dieksplorasi, seperti pembuatan objek menggunakan prototype dan class yang lebih kompleks. Artikel ini hanya memberikan gambaran awal, dan akan ada kesempatan lain untuk mendalami topik-topik tersebut lebih lanjut.
Dengan memahami dasar-dasar objek, Anda sudah berada di jalur yang tepat untuk menguasai pemrograman berorientasi objek di JavaScript. Teruslah belajar dan bereksperimen dengan kode!
