Sibudi </>

JavaScript dan Object Oriented Programming (OOP)

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).

02. March 2012 by Sibudi
Categories: JavaScript | Tags: Catatan, JavaScript | 4 comments