Objek adalah segala sesuatu yang ada di dunia ini, dalam kehidupan nyata kita sering menjumpai objek. Entah itu benda mati ataupun makhluk hidup, semuanya objek. Objek-objek ini dapat kita modelkan di dalam pemrograman. Biasanya menggunakan paradigma OOP (Object Oriented Programming) atau pemrograman beorientasikan objek. OOP ini merupakan sebuah teknik atau cara di dalam pemrograman dimana segala sesuatu di pandang sebagai objek. Objek-objek ini dapat saling berinteraksi sehingga membentuk sebuah program.
Objek sebenarnya adalah sebuah variabel yang menyimpan nilai (properti) dan fungsi (method).
Contoh objek mobil :
Untuk memodelkan mobil ini di dalam kode program, bisa saja seperti ini :
var car = "Mobil Fiat";
Tapi variabel car hanya akan menyimpan nama mobil saja, karena itu kita harus menggunakan objek. Objek pada javascript dapat dibuat dengan tanda kurung kurawal dengan isi berupa key dan value.
Contoh :
Kode di atas bisa juga ditulis seperti ini :
var car = {
type:"Fiat",
model:"500",
color:"white"
};
Perbedaan Properti dan Method
Pada contoh di atas kita hanya membuat properti saja, properti adalah ciri khas dari objek (variabel), sedangkan method adalah perilaku dari objek (fungsi). Method dapat dibuat dengan cara mengisi nilai (value) dengan sebuah fungsi.
Contoh :
var car = {
// properti
type: "Fiat",
model: "500",
color: "white",
// method
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");
}
};
Cara Mengakses Properti dan Method Objek
Cara mengakses properti dan method dari objek ialah dengan menggunakan tanda titik atau dot (.), lalu diikuti dengan nama properti atau method.
Contoh :
console.log(car.type); console.log(car.color); car.start(); car.drive();
Perhatikan sinatk di atas terdapat car.type, car.color, car.start(), dan car.drive().
Untuk mengakses properti, kita cukup gunakan nama objek.properti. Sedangkan untuk method kita harus menggunakan tanda kurung, ini menyatakan kalau kita ingin mengeksekusi fungsi.
Menggunakan Keyword this
Kata kunci this digunakan untuk mengakses properti dan method dari dalam method (objek).
Contoh :
dsdsd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Belajar Objek Javascript</title>
<script>
var person = {
firstName : "Agus",
lastName : "Suratna",
showName : function(){
alert(`Nama: ${this.firstName} ${this.lastName}`);
}
};
person.showName();
</script>
</head>
<body>
</body>
</html>
Hasilnya :
Kata kunci this pada contoh di atas akan mengacu pada objek person.
Membuat Class Objek dengan this
Pada pemrograman berorientasikan objek, kita biasanya membuat objek dengan membuat instance dari class. Akan tetapi pada contoh-contoh di atas, kita membuat objeknya secara langsung.
Jika kita ingin membuat objek yang lain dengan properti yang sama, bisa saja dibuat dua seperti ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Belajar Objek Javascript</title>
<script>
var person = {
firstName : "Agus",
lastName : "Suratna",
showName : function(){
alert(`Nama: ${this.firstName} ${this.lastName}`);
}
};
var person2 = {
firstName : "Chandra",
lastName : "Hardiawan",
showName : function(){
alert(`Nama: ${this.firstName} ${this.lastName}`);
}
};
person.showName();
person2.showName();
</script>
</head>
<body>
</body>
</html>
Ini tentu tidak efektif jika kita ingin membuat banyak objek, karena kita harus menulis ulang kode yang sama, solusinya kita bisa gunakan class.
Pada Javascript versi ES5, class belum ada. Fitur ini baru ditambahkan pada Javascript versi ES6. Pada ES5 kita bisa membuat class dengan fungsi. Lalu di dalamnya menggunakan kata kunci this.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Belajar Objek Javascript</title>
<script>
function Person(firstName, lastName){
// properti
this.firstName = firstName;
this.lastName = lastName;
// method
this.fullName = function(){
return `${this.firstName} ${this.lastName}`
}
this.showName = function(){
document.write(this.fullName());
}
}
var person1 = new Person("Agus", "Suratna");
var person2 = new Person("Chandra", "Hardiawan");
person1.showName();
document.write("<br>");
person2.showName();
</script>
</head>
<body>
</body>
</html>
Hasilnya :
Perhatikanlah contoh di atas, kita membuat objek baru dengan kata kunci new, lalu diberikan nilai parameter firstName dan lastName.
var person1 = new Person("Agus", "Suratna");
Jadi berapapun objek yang ingin kita buat cukup gunakan kata kunci new saja.
Demikian tutorial mengenai dasar-dasar objek pada Javascript, selanjutnya kita akan bahas lagi tentang pembuatan objek dengan prototype dan class. Semoga bermanfaat.
Referensi :
- https://www.petanikode.com/javascript-objek/