Category: JavaScript

Sedikit kilas balik pada catatan sebelumnya tentang class, bahwa class memiliki property dan method. Setelah sebuah class didefinisikan, maka class tersebut dapat digunakan berulang kali. Caranya adalah dengan menggunakan object constructor (berikutnya akan ditulis constructor). Constructor sebenarnya adalah sebuah function, bedanya adalah constructor dipanggil menggunakan kata kunci new.

var Anjing = function(umur_anjing_saya, warna_anjing_saya) {
  this.umur = umur_anjing_saya;
  this.warna = warna_anjing_saya;
};
 
var heli = new Anjing(5, "putih");
var luki = new Anjing(3, "hitam");

Pada contoh di atas, function “Anjing” adalah sebuah constructor. Constructor dapat dipanggil berulang kali untuk menciptakan object baru dengan kata kunci new. Jadi constructor adalah sebuah cetak biru dari sebuah object, bukan object itu sendiri.

Lalu bagaimana cara untuk mengubah cetak biru tersebut, katankanlah untuk menambah fungsi/fitur pada class “Anjing”? Kita bisa menambahkan method setelah memanggil constructor.

var Anjing = function(umur_anjing_saya, warna_anjing_saya) {
  this.umur = umur_anjing_saya;
  this.warna = warna_anjing_saya;
};
 
var heli = new Anjing(5, "putih");
heli.suara = function() {
  console.log("guk");
};
heli.suara();

var luki = new Anjing(3, "hitam");
luki.suara(); //error

Pada baris ketujuh dapat dilihat method “suara” ditambahkan pada object “heli”. Perhatikan apa yang akan terjadi jika luki juga mencoba untuk bersuara seperti ini luki.suara();. Meskipun luki termasuk ke dalam class “Anjing”, tetapi dia tidak tau bagaimana untuk bersuara karena hanya heli yang ditambahi method “suara”. Jadi ajarkan luki untuk bersuara seperti heli, tapi dengan suara yang agak beda, misalnya “auu”.

var Anjing = function(umur_anjing_saya, warna_anjing_saya) {
  this.umur = umur_anjing_saya;
  this.warna = warna_anjing_saya;
};
 
var heli = new Anjing(5, "putih");
heli.suara = function() {
  console.log("guk");
};
heli.suara();

var luki = new Anjing(3, "hitam");
luki.suara = function() {
  console.log("auu");
};
luki.suara();

Object juga bisa digunakan sebagai argumen pada suatu function, karena pada dasarnya suatu object adalah variabel yang lebih kompleks.

var Anjing = function(suara) {
  this.suara = suara;
};

function keluarkanSuara(anjing) {
  console.log(anjing.suara);
};

var heli = new Anjing("guk");
keluarkanSuara(heli);

Cara yang lebih elegan untuk menambah fungsi/fitur pada sebuah cetak biru objek adalah dengan menggunakan kata kunci prototype. Prototype mewakili sifat pewarisan (inheritance) pada JavaScript. Alih-alih menggunakan heli.suara untuk menambahkan method pada object “heli”, gunakan Anjing.prototype.suara.

var Anjing = function(umur_anjing_saya, warna_anjing_saya) {
  this.umur = umur_anjing_saya;
  this.warna = warna_anjing_saya;
};
 
var heli = new Anjing(5, "putih");
Anjing.prototype.suara = function() {
  console.log("guk");
};
heli.suara();

var luki = new Anjing(3, "hitam");
luki.suara();

Sekarang “luki” bisa menggunakan method “suara” seperti pada “heli” tanpa harus diajarkan terlebih dahulu, karena sudah ditambahkan pada class “Anjing”.

Kegunaan penting dari prototype adalah agar programer tidak perlu menulis ulang kode yang sudah ada di class lain. Misal pada contoh berikut kita ingin membuat class “Kucing”, yang memiliki property atau method yang sama dengan class “Anjing”.

var Kucing = function(umur_kucing_saya, warna_kucing_saya) {
  this.umur = umur_kucing_saya;
  this.warna = warna_kucing_saya;
  this.suara = function() {
    console.log("mew");
  };
};

Pada contoh di atas tampak bahwa class “Kucing” menggunakan property “umur” dan “warna” yang juga ada pada class “Anjing”. Untuk menghindari hal ini maka ciptakan suatu induk, dan gunakan prototype untuk menurunkan property dan method untuk anak-anaknya.

var Hewan = function(suara_hewan) {
  this.suara = function() {
    console.log(suara_hewan);
  };
};

var Anjing = function(umur_anjing, warna_anjing) {
  this.umur = umur_anjing;
  this.warna = warna_anjing;
};

Anjing.prototype = new Hewan("guk");

var heli = new Anjing(5, "putih");
heli.suara();

Pada contoh di atas, meskipun “heli” sebagai “Anjing” tidak memiliki method “suara”, tetapi tetap bisa memanggil method “suara” karena mendapat pewarisan dari class “Hewan”.

Pewarisan juga bisa dilakukan secara bertingkat (prototype chain). Misalnya kita mempunyai seekor anjing bernama heli. Heli ini termasuk anjing, tetapi juga termasuk hewan. Jadi, class “Heli” bisa diturunkan dari class “Anjing”, dan class “Anjing” diturunkan dari class “Hewan”. Mari lanjutkan dan sempurnakan kode di atas sehingga memiliki sifat enkapsulasi dan pewarisan.

var Hewan = function(suara_hewan) {
  var suara = suara_hewan;
  this.bersuara = function() {
    return console.log(suara);
  };
};

var Anjing = function(umur_hewan, warna_hewan) {
  var umur = umur_hewan;
  var warna = warna_hewan;
  this.berumur = function() {
    return console.log(umur);
  };
  this.berwarna = function() {
    return console.log(warna);
  };
};

var Heli = function(hobi_heli) {
  var hobi = hobi_heli;
  this.berhobi = function() {
    return console.log(hobi);
  };
};

Anjing.prototype = new Hewan("guk");
Heli.prototype = new Anjing(5, "putih");

var anjing_saya = new Heli("jogging");
anjing_saya.berhobi(); //jogging
anjing_saya.berumur(); //5
anjing_saya.bersuara(); //guk

Pada catatan mengenai pemrograman berorientasi objek, sudah dijelaskan cara untuk menciptakan object dan mengakses property-nya dengan menggunakan dot notation.

nama_object.nama_property

Selain itu, juga bisa dengan menggunakan bracket notation.

nama_object["nama_property"]

Perbedaannya adalah bracket notation bisa diisi dengan variabel yang nilainya adalah nama dari property.

var nama_object = {
  nama_property: nilai_property
};

var nama = "nama_property";
nama_object[nama];

Baris terakhir pada contoh di atas sama dengan nama_object["nama_property"]. Contoh kasus yang membutuhkan bracket notation adalah pada perulangan for-in. Bentuk dasarnya adalah sebagai berikut.

for (var nama_property in nama_object) {}

Kemudian dengan menggunakan bracket notation, cetak semua property yang ada pada suatu object.

var Anjing = function(umur_anjing_saya, warna_anjing_saya) {
  this.umur = umur_anjing_saya;
  this.warna = warna_anjing_saya;
};

var heli = new Anjing(5, "putih");

var nama_property;
for (nama_property in heli) {
  console.log(heli[nama_property]);
}

Untuk menciptakan object “Anjing”, maka digunakan custom constructor seperti pada potongan kode di atas. Namun sebenarnya itu adalah cara untuk mendefinisikan suatu class. Class bisa dianalogikan sebagai tipe pada suatu object sama halnya seperti tipe data pada variabel.

Sebagai contoh pada kode “Anjing” di atas. Dalam hal ini, “heli” adalah object dari class “Anjing”. Class adalah hal yang sangat penting dalam pemrograman berorientasi objek. Hal itu karena class menyediakan informasi tentang suatu object. Jadi bisa dikatakan object adalah “instansi” dari class.

Sampai sejauh ini sudah dibahas tentang konsep dasar OOP, yaitu enkapsulasi. Satu hal yang tidak boleh terlupakan pada konsep enkapsulasi adalah masalah privasi. Analogi pada dunia nyata adalah seperti ini, katakan ada seekor “Anjing” bernama “heli” yang berumur 5 tahun dan berwarna “putih”. Anjing lain bernama “luki” bisa memiliki property dan method yang berbeda dengan “heli”. Anjing “luki”, sebagai sebuah object yang kompleks dan mandiri, tentu saja tidak boleh sekedar mencontek “property” dan “method” yang ada pada Anjing “heli”. Alasannya, meskipun bisa saja memiliki “umur” dan “warna” yang sama, tetapi tidak mungkin dengan property seperti misalnya susunan DNA yang sama.

Contoh lain, analogikan object sebagai sebuah televisi. Televisi memiliki method antara lain: on/off, pindah saluran, dan ubah volume suara. Method lain seperti fungsi-fungsi elektronik yang ada di dalamnya dibuat private sehingga tidak bisa diakses, yang bisa mengaksesnya adalah seorang ahli yang memiliki pengetahuan tentang televisi.

var Anjing = function(umur_anjing_saya, warna_anjing_saya) {
  this.umur = umur_anjing_saya;
  this.warna = warna_anjing_saya;
};

var heli = new Anjing(5, "putih");
var luki = heli.warna;
console.log(luki);

Dapat dilihat pada contoh di atas, property “warna” dari object “heli” bisa diakses oleh variabel “luki” yang berada di luar class “Anjing”. Lalu bagaimana untuk menyembunyikan informasi agar tidak bisa diakses di luar class? Definisikan property dengan menggunakan kata kunci var. Dengan kata lain, ini adalah sebuah private property.

var Anjing = function(umur_anjing_saya, warna_anjing_saya) {
  var umur = umur_anjing_saya;
  var warna = warna_anjing_saya;
};

var heli = new Anjing(5, "putih");
var luki = heli.warna;
console.log(luki);

Dengan menggunakan kata kunci var, property tidak akan bisa diakses dari luar class. Pada contoh di atas, console akan mengeluarkan “undefined error“.

Meskipun tidak bisa diakses dari luar class, ada satu cara untuk bekerja menggunakan property ini, yaitu melalui sebuah public method. Public method akan mengembalikan nilai dari private property.

var Anjing = function(umur_anjing_saya, warna_anjing_saya) {
  var umur = umur_anjing_saya;
  var warna = warna_anjing_saya;
  this.suara = function() {
    return "Umur saya " + umur + " tahun dan berwarna " + warna;
  };
};

var heli = new Anjing(5, "putih");
console.log(heli.suara());

Tidak hanya property, method juga bisa dibuat private. Caranya sama seperti membuat private property.

var Anjing = function(umur_anjing_saya, warna_anjing_saya) {
  var umur = umur_anjing_saya;
  var warna = warna_anjing_saya;
  var suara = function() {
    return "Umur saya " + umur + " tahun dan berwarna " + warna;
  };
  this.guk = function() {
    return suara();
  };
};

var heli = new Anjing(5, "putih");
console.log(heli.guk());

Pada catatan ini telah dibahas mengenai perbedaan dot notation dengan bracket notation, class, dan private property & private method. Berikutnya masih ada satu konsep dasar OOP dengan JavaScript yang juga penting, pewarisan (inheritance).

JavaScript adalah bahasa pemrograman yang paling penting dalam pengembangan website. JavaScript juga mendukung pemrograman berorientasi objek (object oriented programming), karena mengenal konsep object, property, dan method. Mungkin juga banyak yang melewatkan salah satu sifat dasar OOP yang terdapat pada JavaScript, yaitu inheritance atau pewarisan. Pewarisan dalam JavaScript disebut prototype.

Ketika belajar tentang OOP, pasti tidak bisa lepas dari object. Object memungkinkan para programer untuk menggunakan kembali kode-kode yang pernah ditulis, re-used, inilah yang merupakan sifat dasar dari OOP, enkapsulasi (encapsulation).

Object, dalam JavaScript, dan pada banyak bahasa pemrograman berorientasi objek yang lain adalah sebuah tipe data. Tipe data lain yang lebih primitif adalah string, number, dan boolean. Berikut ini adalah cara mendeklarasikan sebuah variabel sesuai tipe datanya.

var kata = "belajar"; //string
var angka = 153; // number
var jawaban = true; // boolean

Sedikit lebih rumit untuk mendeklarasikan object. Jika string dianalogikan sebagai kata (kumpulan karakter), number sebagai angka, dan boolean sebagai pernyataan benar atau salah; object dianalogikan sebagai sebuah benda yang lebih kompleks. Cukup sampai di sini pengertian dari object karena pengertian lanjutan dari tipe data ini hanya akan menjadikannya semakin kompleks dan susah dimengerti. Jadi langsung saja pada cara untuk mendeklarasikan object.

Sama seperti mendeklarasikan variabel dengan tipe data primitif, untuk menciptakan object digunakan kata kunci var. Untuk contoh akan dibuat sebuah objek, anjing.

var anjing = {};

Pada contoh di atas diciptakan sebuah objek kosong yang diberi nama “anjing”. Dalam dunia nyata tentu saja tidak ada objek kosong, maka dari itu pada tipe data object juga dikenal property dan method. Property dan method adalah variable dan function yang berada di dalam object.

var anjing = {
  umur: 3,
  warna: merah,
  suara: function() {
    return "guk";
  }
};

Maka jadilah sebuah object anjing yang memiliki 2 property, yaitu umur dan warna; dan sebuah method suara. Kemudian bagaimana cara untuk mengakses property dan method dari sebuah object. Jika pada tipe data primitif, tinggal ambil saja nama variabelnya, karena variabel itu berisi data yang ingin diakses. Sedangkan untuk tipe data object adalah dengan menggunakan dot notation dengan formula sebagai berikut.

nama_object.nama_property atau
nama_object.nama_method()

Jadi kita dapat mengakses property dengan cara menulis anjing.umur atau anjing.warna dan anjing.suara() untuk mengakses method. Selain menggunakan dot notation, property juga dapat diakses menggunakan bracket notation, dengan formula sebagai berikut.

nama_object[“nama_property”]

var anjing = {
  umur: 3,
  warna: merah,
  suara: function() {
    return "guk";
  }
};

var umur_anjing_saya = anjing.umur; // dot notation
var warna_anjing_saya = anjing["warna"]; // bracket notation
console.log(anjing.suara()); // mencetak method suara ke console

Cara mendeklarasikan object seperti di atas adalah dengan menggunakan Literal Notation. Cara lain untuk menciptakan object adalah dengan menggunakan kata kunci new. Cara ini disebut sebagai menciptakan object dengan constructor. Formulanya adalah sebagai berikut.

var nama_object = new Object();

Contoh di atas jika diubah ke cara kedua menjadi sebagai berikut.

var anjing = new Object();
anjing.umur = 3;
anjing.warna = "merah";
anjing.suara = function() {
  return "guk";
};

Seperti halnya pada function, sebuah method juga dapat diberikan 1 atau lebih parameter. Parameter adalah variabel yang dilewatkan pada function atau method. Pada contoh di atas, method suara akan ditambahkan sebuah method dengan parameter. Method ini berfungsi untuk mengubah warna anjing.

var anjing = new Object();
anjing.umur = 3;
anjing.warna = "merah";
anjing.suara = function() {
  return "guk";
};
anjing.ubahWarna = function(warna_baru) {
  anjing.warna = warna_baru;
};

Jadi property “warna” pada object “anjing” dapat diubah dengan memanggil method “ubahWarna”.

anjing.ubahWarna("kuning");

Catatan panjang lebar di atas belum sepenuhnya merangkum konsep object dalam OOP. Sebagai contoh, Method “ubahWarna” tidak bisa digunakan pada “anjing” yang lain (atau dengan kata lain, hanya ada 1 ekor anjing di dunia ini). Jadi kode tersebut belum memiliki sifat dasar OOP yang memungkinkan setiap object dapat digunakan kembali. Object “anjing” harus diubah menjadi lebih universal, sehingga dapat digunakan oleh semua anjing di dunia.

Untuk membuat object anjing menjadi lebih universal, dibutuhkan kata kunci baru yaitu this. Kata kunci ini bertindak sebagai wadah yang mengacu pada objek yang bersangkutan. Selain itu juga perlu mengubah constructor standar new Object() sehingga menjadi custom constructor. Custom constructor memiliki formula sebagai berikut.

var nama_object = function(nama_parameter) {
this.nama_property = nama_parameter;
};

Selengkapnya dapat dilihat pada contoh berikut.

var Anjing = function(umur_anjing_saya, warna_anjing_saya) {
  this.umur = umur_anjing_saya;
  this.warna = warna_anjing_saya;
  this.suara = function() {
    return "Umur saya " + this.umur + " tahun dan berwarna " + this.warna;
  };
};

Sekarang object “Anjing” (huruf ‘A’ kapital menandakan bahwa itu adalah constructor, meskipun tidak diwajibkan) dapat digunakan untuk semua anjing yang ada di dunia. Contoh saya memiliki seekor anjing yang bernama “heli” yang berumur 5 tahun dan berwarna “putih”, maka dapat dituliskan ke dalam kode sebagai berikut.

var heli = new Anjing(5, "putih");
var bicara = heli.suara();
console.log(bicara);

Sehingga object “Anjing” dengan nama “heli” berkata: “Umur saya 5 tahun dan berwarna putih” :D.

Pada catatan ini dikenalkan istilah-istilah umum pada OOP, yaitu object, property, method, dan constructor serta kata kunci yang berhubungan dengannya, new dan this. Sampai di sini sudah dibahas tentang enkapsulasi (encapsulation). Pada catatan berikutnya, konsep ini akan diperdalam kemudian dilanjutkan tentang konsep pewarisan (inheritance).