Kita buka kembali Source Code dari pelajaran sebelumnya. Disini kita telah belajar mengenai cara membuat object menggunakan Object Literal, Constructor dan Factory Function. Source code terakhir yang sedang aktif adalah cara ketiga, yaitu Factory Function. Kalau kita jalankan di browser, kita memiliki 2 buah objek yaitu andi dan budi. Perhatikan bahwa keduanya memiliki method learn ya. Dan kalau kita bandingkan lagi, apakah method learn pada andi adalah sama dengan method learn pada budi?

andi.learn === budi.learn

Dan kita mendapatkan jawaban yang cukup mengejutkan ya. Ternyata kedua method tidak sama. Walaupun isi instruksinya sama persis. Jadi masing-masing object akan membuat method learn sendiri.

Kalau kita lihat kembali ke cara manajemen memory-nya. Kita sudah belajar bahwa object adalah tipe data pointer. Jadi isi memory hanyalah sebuah pointer yang merujuk ke bagian memory dinamis yang biasanya disebut dengan heap, dan disanalah seluruh data object disimpan. Di dalam object terdapat method learn yang merupakan pointer menuju ke function. Disini kita lihat bahwa ada 2 buah object andi dan budi. Dan method learn-nya ada 2 buah juga. Masing-masing object merujuk ke method sendiri, sehingga terjadikan penggandaan memory.

Penggandaan ini akan mengakibatkan pemborosan memory, terutama untuk object yang memiliki banyak method dan digunakan dalam jumlah banyak. Kita bisa melihat contohnya di dokumentasi Javascript. Sebagai contoh yang kita lihat disini adalah object Array. Di dokumentasi ini kita bisa melihat ada banyak method-nya ya, mungkin sekitar 40 method. Bayangkan kalau kita membuat 5 buah array dan seluruh method ini mengalami duplikasi, maka pemakaian memory yang seharusnya hanya 40 method berubah menjadi 200 method.

Terus bagaimana cara manajemen memory yang idealnya? Nah, ini adalah gambar manajemen memory yang ideal ya. Jadi method-nya hanya ada 1. Dan semua method learn dari object akan merujuk ke method yang sama.

Bagaimana cara menuliskan kode agar bisa seperti ini? Nah, method learn disini harus kita cut ya. Kita keluarkan ke sebelum object. Kita jadikan sebagai variable yang merupakan pointer to function. Dan di dalam object, kita tambahkan lagi method learn yang merujuk ke function learn yang berada di luar object.

let learn = function(year = 1)
{
  this.age += year;
  this.intelligence += 10 * year;
  console.log(this.name + " is learning");
}

function createStudent(name, age, intelligence)
{
  return {
    name,
    age,
    intelligence,
    learn : learn
  };
}

Kita simpan dan jalankan di browser. Kita tes ya. Kita memiliki object andi. Kita coba jalankan method andi.learn(1). Maka umur Andi bertambah 1 dan intelligence-nya bertambah 10.

Kita coba lagi object budi. Kita jalankan method budi.learn(2). Maka umur budi bertambah 2 dan intelligence-nya bertambah 20.

Artinya kedua method berfungsi dengan benar. Sekarang kita tes kembali. Apakah method andi.learn sama dengan method budi.learn? Jawabannya adalah true. Jadi pada memory hanya ada satu function learn. Dan semua method learn pada object Student akan merujuk ke function yang sama.

Nah, kalau method yang hendak kita buat berjumlah banyak, akan lebih enak kalau method tersebut kita grup menjadi sebuah object. Misalkan variable learn ini kita ganti lagi ya menjadi studentMethod. Di dalam object terdapat sebuah method learn. Lalu isi factory mesti kita ubah juga. Sekarang method learn merujuk ke studentMethod.learn.

Kita simpan dan tes lagi di browser ya. Kita jalankan method andi.learn. Berfungsi seperti biasa. Dan method andi.learn tetap sama dengan method budi.learn.

Sekarang kita coba tambahkan method baru, misalkan namanya relax ya. Kita copy paste saja dari method learn. Kita ubah namanya menjadi relax. Kita hapus baris intelligence. Jadi misalkan kalau kita relax, maka yang bertambah hanya umurnya saja, namun tidak bertambah pintar. Tulisan pada console.log kita ubah menjadi is relaxing.

relax : function(year = 1)
{
  this.age += year;
  console.log(this.name + " is relaxing");
}

Kita simpan dan jalankan di browser. Ternyata andi belum memiliki method relax ya. Kalau kita periksa kembali ke source code. Ternyata kita hanya menambahkan method relax pada studentMethod. Sedangkan di factory belum. Jadi kita mesti ke bagian factory. Lalu kita tambahkan lagi method relax yang merujuk ke studentMethod.relax. Dan sekarang barulah andi bisa menjalankan method relax.

Jadi kita lihat sendiri ya. Proses untuk penambahan methodnya lebih repot. Karena kita mesti menambahkan kode di 2 tempat. Pertama di object studentMethod. Dan kemudian kita mesti tambahkan lagi di dalam factory.

Apakah ada cara lain yang hanya perlu menulis di satu tempat saja? Ada ya. Namun sebelum melanjutkan, kita hapus dahulu seluruh isi factory function kita. Kita ganti cara menulis kode kita ya. Misalkan kita membuat terlebih dahulu object student, yang isinya adalah object kosong. Kemudian kita kembalikan object tersebut.

function createStudent(name, age, intelligence)
{
  let student = {};
  return student;
}

Kita simpan dan jalankan di browser. Sekarang kita memiliki object andi yang isinya kosong. Kita balik ke source code. Kalau baris pertama kita ganti menjadi:

let student = new Object();

Hasilnya tetap sama persis ya. Malah pada saat kita menuliskan kode seperti sebelumnya, yang sebenarnya terjadi di balik layar adalah kode yang ini. Artinya komputer membuat satu buah object baru dan menyimpannya ke variable student.

Nah, pada Javascript versi yang lebih baru, ternyata ada satu cara lagi untuk membuat object, yaitu dengan memanggil method Object.create(). Kita coba ya. Kita ganti lagi barisnya menjadi:

let student = Object.create(null);

Perhatikan bahwa pada saat memanggil method Object.create, kita tidak perlu menggunakan kata kunci new. Jadi method ini lebih mirip dengan factory function ya. Kita simpan dan jalankan di browser dan hasilnya tetap sama, kita memiliki andi sebagai object kosong.

Nah, yang spesial dari method Object.create ini adalah kita bisa menggunakan object lain sebagai argument. Kemudian object baru yang kita ciptakan secara otomatis akan mendapatkan semua property dan method dari object argument tersebut. Bagi teman-teman yang sudah belajar Object Oriented Programming, konsep ini dikenal dengan nama Inheritence. Kita coba ya. Argument null kita ganti menjadi studentMethod.

Kita simpan dan jalankan di browser ya. Sekarang kalau kita lihat lagi object Andi, maka sekilas seperti object kosong ya. Namun kalau kita lihat lebih detil, dan kita buka Prototype-nya. Ternyata disini ada method learn dan relax. Method ini bisa kita panggil, namun hasilnya akan error ya. Karena kita masih belum memiliki property yang dibutuhkan.

Kita kembali ke factory function kita. Kita tambahkan ketiga parameter sebagai property object student.

student.name = name;
student.age = age;
student.intelligence = intelligence;

Kita simpan dan jalankan di browser. Sekarang kita sudah memiliki object andi. Dan kita bisa memanggil method andi.learn. Kita juga memiliki object budi. Dan kita juga bisa memanggil method budi.learn. Dan pertanyaan terakhir, apakah method andi.learn adalah sama dengan dengan method budi.learn? Jawabannya adalah iya. Artinya kode kita sudah berfungsi dengan benar.

Dan misalkan kita ingin menambahkan method baru, kita tinggal menambahkannya di studentMethod. Misalkan kita tambahkan method baru dengan nama hello, tanpa parameter. Isinya sederhana saja ya. Cukup panggil console.log dengan argument this.name + “ says hello”.

hello : function()
{
  console.log(this.name + " says hello");
}

Kalau kita simpan dan jalankan di browser. Maka sekarang baik object andi maupun object budi bisa memanggil method hello.

Sekarang kode kita menjadi lebih ringkas, karena pada saat hendak menambahkan method, kita cukup menambahkan di satu tempat saja. Namun muncul pertanyaan berikutnya ya. Pada saat kita hanya ingin membuat satu object student, mengapa kita harus membuat 2 jenis object? Yang pertama adalah studentMethod di bagian luar. Dan kemudian kita harus membuat object student di dalam factory. Jadinya source code terpisah 2 ya. Method berada di studentMethod, sedangkan property berada di createStudent.

Nah, ada solusi yang lebih ringkas lagi yang namanya Prototype, yang akan kita bahas di bagian berikutnya.

Kita lanjutkan pembahasan kita mengenai cara membuat object yang lebih baik, yaitu dengan menggunakan prototype. Namun sebelum melanjutkan, kita review lagi source code yang telah kita buat ya. Saat ini kita sedang membahas mengenai cara membuat object menggunakan factory function. Kalau kode ini kita jalankan, maka kita memiliki object andi dan budi. Perhatikan lagi kalau kita tuliskan andi, maka browser memperlihatkan semua properti dari andi. Namun browser tidak bisa menyebutkan secara spesifik bahwa Andi adalah seorang Student. Browser hanya menganggap andi sebagai object generik atau umum.

Kembali lagi ke pelajaran sebelumnya ya. Agar browser bisa mengenali bahwa Andi adalah seorang Student, maka kita harus menggunakan cara constructor. Jadi kita komentari dahulu cara ketiga. Dan kita hilangkan komentar dari cara kedua. Kita simpan dan jalankan di browser. Kita lihat lagi variable andi ya. Perhatikan sebelum kurung kurawal browser menuliskan Student. Artinya browser sudah bisa mengenali secara spesifik bahwa object ini adalah Student.

Kita ubah kembali cara kedua menjadi komentar. Lalu kita copy paste ke bawahnya. Kita hilangkan komentarnya. Lalu kita beri komentar lagi, bahwa ini adalah cara keempat, yaitu Prototype.

Perhatikan lagi pada constructor. Disini kita sudah memiliki method learn ya. Namun belum memiliki method relax. Jadi disini kita hendak menambahkan method relax, namun menggunakan cara prototype.

Bagaimana caranya? Nah, diluar dari constructor, kita bisa langsung menuliskan tipe object-nya yaitu Student dengan S huruf besar. Diikuti oleh titik prototype. Diikuti lagi dengan titik dan nama method-nya, yaitu relax. Isinya apa? Nah, isinya sama dengan function dengan parameter year = 1. Kemudian diikuti dengan kurung kurawal. Isi dari method ini kita copy paste saja ya dari method learn. Kita cukup hilangkan baris intelligence, kemudian mengganti kata learning menjadi relaxing.

Student.prototype.relax = function(year = 1)
{
  this.age += year;
  console.log(this.name + " is relaxing");
}

Kita simpan dan jalankan di browser. Kita lihat kembali variable andi. Perhatikan bahwa method learn berada di dalam object andi. Sedangkan kalau kita lihat lebih dalam, kita bisa menemukan ada method relax di dalam prototype-nya. Dan kita bisa memanggil method relax, baik pada variable andi maupun budi.

Apa yang membedakan method learn yang berada di dalam object, dengan method relax yang berada di dalam prototype? Kalau kita coba jalankan perintah ini

andi.learn === budi.learn

Maka browser mengembalikan nilai false. Artinya masing-masing variable memiliki method learn sendiri. Mereka menggunakan 2 memory yang terpisah, sehingga terjadilah pemborosan memory.

Sedangkan kalau kita menjalankan perintah

andi.relax === budi.relax

Maka browser mengembalikan nilai true. Artinya method relax ini hanya ada 1, dan semua object student akan merujuk ke method yang sama sehingga penggunaan memory-nya menjadi lebih optimal.

Nah, untuk mengoptimalkan method learn, kita bisa mengeluarkannya dari contructor. Dan kita tulis ulang menggunakan sintaks prototype.

Student.prototype.learn = function(year = 1)
{
  this.age += year;
  this.intelligence += 10 * year;
  console.log(this.name + " is learning");
}

Kita simpan dan coba di browser ya. Kita coba panggil method learn. Dan dapat berfungsi dengan normal.

Jadi ini adalah cara terbaik untuk menuliskan object yang berukuran besar dan banyak digunakan di dalam kode kita. Kedepannya, di versi Javascript yang lebih baru, kita akan menjumpai sintaks untuk membuat object secara Object Oriented Programming, yaitu dengan menggunakan kata kunci class. Namun perlu diketahui bahwa pada Javascript, kata kunci class itu hanyalah kata kunci atau sintaks baru dengan tujuan agar programmer yang terbiasa dengan sintaks OOP dapat menuliskan kodenya dengan lebih nyaman. Sebenarnya yang terjadi di belakang layar, Javascript tetap menjalankannya sebagai prototype, sama seperti kode yang sedang kita tulis sekarang.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.