Kita buka kembali source code dari video sebelumnya ya. Disini kita telah membuat 2 object dengan menggunakan cara Object Literal. Cara ini adalah cara yang paling gampang dan ringkas untuk membuat object sederhana. Namun disini terdapat satu kekurangan, yaitu kode yang telah kita tuliskan untuk suatu object, tidak bisa digunakan ulang untuk object berikutnya.

Sebagai contoh, kita bisa melihat dalam kode kita terdapat satu orang murid dan satu orang guru. Dalam kenyataannya, jumlah murid dalam suatu kelas bisa banyak. Bisa saja mencapai 10 murid, atau bahkan 40 murid. Bagaimana caranya kita membuat tambahan murid menggunakan object literal? Kita harus melakukan copy paste terhadap seluruh kode object student ini. Misalkan kita simpan sebagai variable student2, dengan nama murid “Budi”. Ini baru contoh untuk 2 murid ya. Kalau misalkan muridnya ada 10 orang, maka kita harus melakukan copy paste hingga mendapatkan 10 orang murid.

Berhubung kita menggandakan murid dengan menggunakan copy paste, maka disini terjadi duplikasi kode ya. Inilah yang menjadi kekurangan besar dari Object Literal, karena pada saat kita ingin mengubah method ataupun property milik student, maka kita harus mengubah ke semua duplikat yang ada. Misalkan kita ingin menambahkan properti umur dengan nilai 18 di murid dengan nama “Andi”, maka kita dapat menambahkan baris kode ini pada object student.

age : 18

Dan kalau kita ingin agar semua murid memiliki property umur, maka kita harus melakukan copy paste lagi ke semua kode murid lainnya. Pada contoh disini kita hanya memiliki 2 murid ya. Kalau misalkan kita memiliki 10 murid, maka cara menuliskan kode seperti ini akan sangat merepotkan kita.

Bagaimana solusinya? Nah, dalam video ini kita akan membicarakan mengenai cara lain untuk membuat object, yaitu dengan cara Constructor dan Factory Function. Namun sebelum melanjutkan, kita komentari dahulu seluruh kode Object Literal ini ya. Kita berikan komentar 1. Object Literal.

Sekarang kita masuk ke cara constructor terlebih dahulu. Kita tambahkan komentarnya ya, 2. Constructor. Nah, untuk membuat sebuah constructor, perintahnya mirip dengan cara membuat function. Kita tuliskan dahulu kata kunci function. Perhatikan bahwa nama yang kita tuliskan setelah kata kunci function ini bukanlah nama function, melainkan nama Object yang hendak kita buat. Oleh karena itu kita menggunakan TitleCase. Apabila nama Object terdiri dari beberapa kata, maka huruf pertama dari setiap kata menggunakan huruf besar, termasuk kata pertama. Jadi kalau misalkan kita hendak membuat constructor untuk object Student, maka kita menuliskannya dengan menggunakan S huruf besar.

Kita ikuti dengan tanda kurung. Dan seperti biasa, di dalam tanda kurung kita bisa menuliskan parameter-parameter apa saja yang hendak kita gunakan di dalam object. Sebagai contoh kita tambahkan 2 parameter, yaitu name dan age. Di dalam function, kita tinggal simpan kembali parameter ke dalam property. Jadi kode kita menjadi:

// 2. Constructor
function Student(name, age)
{
  this.name = name;
  this.age = age;
}

Perhatikan bahwa constructor tidak memerlukan kata kunci return. Kemudian kita coba panggil constructor ini ya. Misalkan kita membuat variable andi dengan memanggil constructor Student.

let andi = new Student("Andi", 18);

Perhatikan lagi baris kode ini. Untuk memanggil constructor, kita harus menggunakan kata kunci new. Kita simpan dan jalankan di browser. Kita bisa ketik andi di bagian console. Dan browser pun memberitahukan bahwa variable andi adalah object Student, dan kita bisa melihat isinya ada property name Andi, dan age 18.

Kita kembali ke source code. Untuk menambahkan student kedua, kita cukup membuat variable baru dan memanggil kembali constructor. Misalkan kita buah student baru bernama Budi. Kalau kita jalankan di browser, sekarang kita sudah memiliki 2 buah object andi dan budi.

let budi = new Student("Budi", 18);

Jadi source code untuk menambahkan object menggunakan constructor jauh lebih sederhana dibandingkan dengan object literal. Kita cukup menambahkan satu baris kode pemanggil constructor saja. Kalau dibandingkan dengan object literal, kita harus copy paste seluruh object sehingga kode yang sama harus kita tulis secara berulang-ulang.

Bagaimana cara menambahkan method ke dalam object? Kita bisa tambahkan di dalam constructor ya. Misalkan kita tambahkan lagi this.learn yang isinya adalah function. Disini kita mesti menggunakan cara function expression ya. Misalkan isi function-nya sama persis seperti object literal. Jadi kita copy paste saja.

  this.learn = function()
  {
    console.log(this.name + " is learning");
  }

Sekarang kalau kita jalankan di browser, maka kita bisa memanggil method budi.learn().

Selanjutnya kita akan mencoba bagaimana kalau kita perlu mengubah property atau method dari object yang menggunakan constructor. Kita coba tambahkan property dahulu ya. Misalkan kita mau menambahkan inteligence atau tingkat kepintaran dari pelajar tersebut. Pertama kita mesti tambahkan dahulu parameter constructornya ya. Kemudian di dalamnya kita simpan nilai dari parameter ke dalam property. Maka kodenya menjadi:

function Student(name, age, intelligence)
{
  this.name = name;
  this.age = age;
  this.intelligence = intelligence;
  this.learn = function()
  {
    console.log(this.name + " is learning");
  }
}

Dan berhubung jumlah parameter dari constructor berubah, maka semua pemanggil constructor mesti kita ubah juga. Kita mesti menambahkan inteligence dari masing-masing murid. Misalkan Andi 80 dan Budi 75.

Kita simpan dan jalankan di browser. Sekarang baik objek andi dan budi sudah memiliki property tambahan intelligence ya.

Tadi kita sudah melihat proses penambahan property. Kalau property tidak menambah jumlah parameter pada constructor, maka kita cukup mengubah kode pada constructor saja. Namun berhubung pada contoh sebelumnya kita menambahkan parameter inteligence pada contructor, maka kita perlu mengubah kode dari semua pemanggil contructor tersebut.

Sekarang kita coba ubah method learn. Kita tambahkan satu parameter yaitu year, dengan nilai default 1. Di dalamnya kita tambahkan kode bahwa age bertambah sesuai dengan nilai parameter year. Kemudian misalkan intelligence juga bertambah sebanyak 10 * year.

Kita simpan dan jalankan di browser. Kita lihat object budi terlebih dahulu ya. Kita panggil method budi.learn() tanpa argument. Artinya secara default Budi belajar selama 1 tahun ya. Kita lihat umurnya bertambah 1, sedangkan inteligence-nya bertambah 10. Selanjutnya kita lihat lagi Andi. Andi kita suruh belajar selama 2 tahun. Sekarang umur Andi bertambah 2, dan inteligence-nya bertambah 20.

Jadi kita sudah melihat ya, untuk merubah method ataupun property yang tidak merubah jumlah parameter constructor, kita cukup merubah kode pada contructornya saja. Seluruh perubahan akan diterapkan ke semua object yang dibuat menggunakan constructor tersebut.

Yang perlu diperhatikan disini adalah pada saat kita hendak memanggil constructor untuk membuat object baru, kita harus menggunakan kata kunci new. Kalau kita lupa menuliskan new, maka constructor dianggap sebagai function biasa. Dan berhubung function tidak mengembalikan nilai apa-apa, maka isi dari variable dianggap undefined.

Disinilah terjadi kekurangan dari cara membuat object menggunakan constructor, terutama bagi programmer yang sering lupa menuliskan kata new. Dan mereka pun mencari-cari apakah ada cara lain untuk membuat object, tanpa perlu menggunakan kata new. Kemudian muncul lah istilah factory function, yang artinya adalah function yang bertujuan untuk menghasilkan object. Bagaimana cara menuliskan kodenya? Pertama kita komentari terlebih dahulu cara constructor kita. Sekarang kita tambahkan komentar baru ya. Kode berikutnya ini adalah cara factory function.

Pertama kita buat dahulu function dengan nama createStudent, dengan menggunakan 3 buah parameter yaitu name, age, dan intelligence. Di dalamnya, kita akan mengembalikan sebuah object. Ingat ya, kita membuat object dengan menggunakan tanda kurung kurawal. Di dalamnya kita tuliskan pasangan key value dari properti-nya, yaitu name : name, age : age, dan intelligence : intelligence. Artinya kita membuat property dengan kata kunci name, dengan nilai yang diambil dari parameter name. Dan begitu juga dengan property lainnya ya.

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

Diluar dari function, kita membuat variable baru Andi dan mengisikan nilainya dengan memanggil function createStudent. Kita berikan argument “Andi”, 18, dan 80. Kita jalankan di browser. Sekarang kita sudah memiliki object Andi yang menyimpan 3 buah properti.

let andi = createStudent("Andi", 18, 80);

Kalau kita lihat lagi di source codenya. Ada 2 perbedaan dibandingkan dengan constructor ya. Yang pertama adalah pada saat kita memanggil function createStudent, kita sudah tidak perlu menggunakan kata new. Dan yang kedua adalah di dalam function createStudent, kita harus menggunakan kata return untuk mengembalikan object yang kita buat.

Perhatikan lagi di dalam function createStudent. Disini kita menyebutkan property dengan key name, dan value-nya juga name. Pada sintaks Javascript baru, penulisan key dan value yang isinya sama, seperti pada kode name : name, bisa kita singkat menjadi name saja. Begitu juga dengan age dan intelligence. Jadi kode kita menjadi lebih singkat:

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

Kalau kita jalankan. Kode tetap berjalan normal ya.

Object kita pada saat ini masih belum memiliki method. Apakah cara factory function bisa menambahkan method? Jawabannya bisa ya. Kita bisa menambahkan method seperti biasa pada object di dalam factory. Sebagai contoh, kita copy paste dulu method dari cara constructor ya. Kita hilangkan comment. Ingat ya, kita mesti mengganti sintaksnya menjadi sintaks object literal. Kita hilangkan kata kunci this, lalu kita ganti tanda sama dengan menjadi titik dua.

Dan apabila kita ingin menambahkan murid kedua “Budi”, kita tinggal buat variable baru dan memanggil function createStudent.

let budi = createStudent("Budi", 18, 75);

Kita simpan dan jalankan di browser. Sekarang kita sudah memiliki 2 buah object yaitu andi dan budi. Dan kedua object memiliki method learn. Kalau misalkan kita jalankan method learn pada andi dengan argument 2. Maka kita bisa melihat hasilnya bahwa umur Andi bertambah 2 dan intelligence-nya bertambah 20. Dan kalau kita menjalankan method learn pada Budi tanpa menggunakan argument, maka age dan intelligencenya juga bertambah sama seperti pada saat kita membuat object menggunakan constructor.

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.