Tutorial Javascript 9 - OOP JavaScript

Konsep pemrograman berbasis object atau dalam bahasa inggris dikenal sebagai object oriented programming (oop) di dasarkan pada object dalam kehidupan kita sehari-hari.

Misalkan object gelasKaca bisa memiliki property: tinggiGelas, volumeGelas, dan bentukGelas. Object gelasKaca juga bisa memiliki method: diisi(), dibersihkan() dan dilemparkan().

Jika dikonversi ke dalam pemrograman OOP, setiap property dan method yang diperlukan oleh suatu tipe data akan melekat ke objectnya. Mari kita bahas apa maksud dari kalimat ini.

Misalkan saya memiliki function potongString(). Sesuai dengan namanya, fungsi ini berguna untuk memotong string. Cara penulisanya adalah sebagai berikut:

var kalimat = "Hello Indonesia";
var hasil = potongString(kalimat,6,14);

Variabel hasil akan berisi string "Indonesia", karena saya memotong string tersebut mulai dari index karakter ke-6 hingga ke-14. Ini adalah cara penulisan kode program menggunakan metode prosedural (berbasis function).

Jika menggunakan object, saya bisa memasukan fungsi potongString() menjadi method dari object string sehingga cara pemanggilanya sebagai berikut:

var kalimat = new String("Hello Indonesia");
var hasil = kalimat.potongString(6,14);

Untuk sementara, anda bisa abaikan keyword "new". Yang jelas, variabel kalimat akan berisi sebuah object string yang berisi "Hello Indonesia". Di dalam object string ini terdapat method potongString(), yang dipanggil menggunakan dot notation sebagaimana kita memanggil method biasa.

Inilah contoh peng-objek-an sebuah kode program, dimana sebelumnya saya menggunakan function, diubah ke dalam bentuk object.

Dari penjelasan diatas, terlihat bahwa "lawan" dari OOP adalah pemrograman prosedural yang berbasiskan function. Tapi bukan berarti bahwa pemrograman prosedural itu tidak bagus.

Untuk membuat program sederhana dalam waktu cepat, pemrograman prosedural merupakan pilihan yang pas. Pemrograman berbasis object baru terasa mandaatnya ketika kita membuat aplikasi yang besar, terdiri dari barbagai komponen dan dikerjakan oleh banyak orang.

JavaSript memang sebuah bahasa pemrograman berbasis obejct tapi tidak benar-benar menerapkan konsep OOP secara penuh. Sebagai contoh, didalam bahasa pemrograman full OOP seperti JAVA, untuk menjalankan kode program yang paling sederhana sekalipun, kita harus merancang class dan membuat object.

Pengertian Class dan Object

Dalam teori OOP, class adalah cetak biru dari sebuah object atau dalam bahasa sederhananya, class merupakan kelompok umum dari sesuatu. Object dalah "sesuatu" tersebut. Class dan object merupakan materi paling dasar dari pemrograman berbasis object.

Jika mobil adalah class, maka mobilAndi merupakan object dari class mobil. Jika binatang adalah class, maka sapi merupakan object dari class binatang. Jika Gelas adalah class, maka gelasKaca adalah object dari class gelas.

Terlihat disini bahwa mobilAndi menjadi bagian dari kelompol mobil. Dan bisa jadi nanti akan ada mobilJoko dan mobilAndi yang semuanya tergabung ke falam kelompok mobil (yang kita sebut sebagai class mobil).

Membuat Class dan Object

Untuk membuat class di dalam javascript, dalam ECMAScript 6 bisa menggunakan keyword class:

class Mobil {
    // isi class disini
}

Disini saya membuat class Mobil yang belum berisi apa-apa. Salah satu kebiasaan programmer javascript adalah, nama class ditulis dengan awalan huruf besar, bukan dengan huruf kecil sebagaimana layaknya variabel. Walaupun tentu saja kita juga bisa menggunakan awalan huruf kecil seperti:

class mobil {
    // isi  class disini
}

Jika class ini terdiri dari 2 kosa kata atau lebih, tetap menggunakan gaya penulisan camel case:

class MobilBaruBeli {
    // isi class disini
}

Dengan penulisan seperti ini, kita bisa membedakan apakan sebuah identifier itu berisi class (diawal huruf besar), variabel (diawal huruf kecil) atau konstanta (huruf besar semua).

Dalam konsep OOP, class hanya berperan sebagai cetak biru (blue print) dari object. Didalam objectlah pemrosesan dilakukan. Untuk membuat object dari suatu class, digunakan keyword new, kemudian diikuti dengan nama class tersebut.

Berikut contohnya

class Mobil {
}

var mobilAndi = new Mobil();
var mobilJoko = new Mobil();

Kode program diatas artinya saya membuat 2 buah object dari class Mobil. Object pertama disimpan kedalam variabel mobilAndi dan object kedua kedalam variabel mobilJoko.

Proses pembuatan object dari class ini dikenal dengan sebutan instantiation. Bahasa inggris instantiation sendiri berarti: membuat sesuatu yang berwujud dari yang abstrak. Dalam contoh ini, class Mobil merupakan suatu hal yang abstract, wujudnya ada di object mobilAndi dan mobilJoko.

JavaScript juga memiliki operator instanceof yang bisa digunakan untuk mengecek apakah suatu object merupakan instance dari sebuah class.

class Mobil {
}

var mobilAndi = new Mobil();
var mobilJoko = new Mobil();

console.log(mobilAndi instanceof Mobil);  // true
console.log(mobilJoko instanceof Mobil);  // true
console.log(mobilJoko instanceof String); // false

Disini mobilAndi instanceof Mobil dan mobilJoko instanceof Mobil akan menghasilkan true, karena object mobilAndi memang berasal dari class Mobil

Class Property

Untuk bisa menambahkan property kedalam class, kita harus menggunakan method kusus bernama constructor(). Method constructor ini otomatis akan berjalan saat proses pembuatan object (saat proses instantiation).

Penulisanya sebagai berikut:

class Mobil {
    constructor() {
        // isi constructor disini
    }
}

Didalam javascript, semua property untuk class harus ditulis di dalam method constructor().

Bagaimana cara menulis property untuk class ini? kita tidak bisa langsung membuat property seperti biasa, tapi harus menggunakan object kusus bernama this:

class Mobil {
    constructor() {
        this.merk = "Toyota Avanza";
        this.tipe = "MPV";
        this.harga = 200000000;
    }
}

This adalah object kusus sebagai pengganti object yang nantinya di buat dari class Mobil. Penjelasan tentang this memang sedikit rumit, untuk sementara mari kita anggap bahwa dalam membuat property class, harus menggunakan perintah this.namaProperty.

Setelah ditulis seperti ini, setiap object yang dibuat dari class Mobil secara otomatis punya 3 property tersebut. Mari kita coba:

class Mobil {
    constructor() {
        this.merk = "Toyota Avanza";
        this.tipe = "MPV";
        this.harga = 200000000;
    }
}

var mobilAndi = new Mobil();
console.log(mobilAndi.merk);  // Toyota Avanza

var mobilJoko = new Mobil();
console.log(mobilJoko.tipe);  // MPV

var mobilAlex = new Mobil();
console.log(mobilAlex.merk);  // Toyota Avanza

Di dalam class Mobil saya membuat 3 property: this.merk, this.tipe dan this.harga. Ketika class Mobil dijadikan object, property ini sudah langsung 'melekat' ke setiap object.

Disini anda bisa melihat bahwa class Mobil berperan sebagai 'cetakan' untuk object mobilAndi, mobilJoko dan mobilAlex. Setiap object ini memiliki property yang sama yang berasal dari class Mobil.

Pengertian this

Mari kita bahas sedikit tantang fungsi dari keyword this yang digunakan saat pembuatan class property.

Ketika object mobilAndi dibuat dengan perintah:

var mobilAndi = new Mobil()

JavaScript akan menjalankan method constructor() dari class Mobil. Jika di dalamnya terdapat keyword this, itu akan diganti menjadi mobilAndi. Artinya yang dijalankan secara internal oleh javascript adalah sebagai berikut:

class Mobil {
    constructor() {
        mobilAndi.merk = "Toyota Avanza";
        mobilAndi.tipe = "MPV";
        mobilAndi.harga = "200000000";
    }
}

Karena itulah kita bisa mengakses mobilAndi.merk, mobilAndi.tipe dan mobilAndi.harga.

Bagaimana dengan object lain? misalnya:

var mobilJoko = new Mobil();

Yang terjaadi juga sama. JavaScript akan mengganti this dengan mobilJoko:

class Mobil {
    constructor() {
        mobilAndi.merk = "Toyota Avanza";
        mobilAndi.tipe = "MPV";
        mobilAndi.harga = "200000000";
    }
}

Terlihat, inilah fungsi dari penulisan this didalam pembuatan class. This berfungsi sebagai pengganti object yang nantinya di buat dari class Mobil.

Peran this tidak terbatas di dalam constructor saja, tapi juga bisa digunakan di luar constructor, selama masih di dalam class.