Membuat objek di javascript – Javascript memiliki dua jenis tipe data utama, yaitu tipe data dasar dan objek. Sedangkan variabel pada JavaScript adalah wadah untuk menampung nilai data.
Tipe data dasar pada Javascript meliputi :
- Angka (numbers)
- Rentetan karakter (strings)
- Boolean (true dan false)
- Null
- Undefined
Sedangkan Nilai-nilai selain tipe data dasar diatas secara otomatis dianggap sebagai objek anatar lain :
- Array
- Fungsi
- Regular expression
- Segala tipe buatan pengembang
Objek dalam Javascript adalah variabel yang menyimpan nilai properti (ciri khas) dan fungsi atau method (perilaku) yang mana nilainya dapat berubah ubah. Objek pada javascript, dapat dibuat dengan tanda kurung kurawal dengan isi berupa key dan value.
Membuat objek di javascript
Contoh berikut ini merupakan method yang dapat dibuat dengan cara mengisi nilai (value) dengan sebuah fungsi.:
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 adalah dengan menggunakan tanda titik atau dot (.), lalu diikuti dengan nama properti atau method. Contohnya adalah sebagai berikut :
console.log(car.type);
console.log(car.model);
console.log(car.color);
car.start();
car.drive();
car.brake();
car.stop();
Dimana :
- car. = Nama object
- type = Properti object
- start,drive.brake.stop = Method Object
Untuk mengakses properti, maka kita gunakan nama objek.properti. Sedangkan untuk method, kita harus menggunakan tanda kurung. Hal Ini untuk menyatakan kalau kita ingin mengeksekusi fungsi.
Untuk mengakses properti, maka kita gunakan nama objek.properti. Sedangkan untuk method, kita harus menggunakan tanda kurung. Hal Ini untuk menyatakan kalau kita ingin mengeksekusi fungsi.
Berdasarkan kode diatas, jika kita console maka hasilnya akan terlihat seperti gambar dibawah ini :
Membuat objek di javascript Menggunakan Keyword this
Keyword this atau Kata kunci this digunakan untuk mengakses properti dan method dari dalam method (objek).
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>
var person = {
firstName: "Rina",
lastName: "fitriana",
showName: function(){
alert(`Nama: ${this.firstName} ${this.lastName}`);
}
};
person.showName();
</script>
</head>
<body>
Berdasarkan contoh perogram diatas, maka hasilnya adalah sebagai berikut :
Keyword this atau kata kunci this pada contoh di atas akan mengacu pada objek person.
Membuat Class Objek dengan this pada javascript
Pada contoh-contoh pada pembahasan di atas, kita sudah membuat objek dijavascript secara langsung. Sekarang membuat objek dengan membuat instance dari class dengan properti yang sama.
<!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>Membuat Class Objek dengan this</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("Rina", "fitriana");
var person2 = new Person("Dodi", "Reza");
person1.showName();
document.write("<br>");
person2.showName();
</script>
</head>
<body>
Penjelasan Program :
Kita membuat objek baru dengan kata kunci new, lalu diberikan nilai parameter firstName dan lastName. Jadi, berapapun objek yang ingin kita buat, cukup gunakan kata kunci new saja.
Berdasarkan contoh perogram diatas, maka hasilnya adalah sebagai berikut :
Fitur ini baru ada pada Javascript versi ES6. Untuk ES5, kita bisa membuat class dengan fungsi. Setelah itu barulah di dalamnya menggunakan kata kunci this. Baca juga artikel selanjutnya yaitu Belajar Javascript #11 Pengenalan DOM Javascript
