news

Rabu, 10 Juni 2020

Belajar tentang Class didalam Javascript

Dalam paradigma Object-Oriented Programming (OOP), class merupakan sebuah blueprint yang dapat dikembangkan untuk membuat sebuah objek. Blueprint ini merupakan sebuah template yang di dalamnya menjelaskan seperti apa perilaku dari objek itu (berupa properti ataupun method).

2020031400163071868d05b7fff5009d785e8cb61890d3.png
Paradigma OOP selalu digambarkan dengan kehidupan nyata. Visualisasi di atas mencontohkan gambaran umum OOP di mana terdapat sebuah blueprint kucing, nilai yang dimiliki kucing, dan kemampuan yang dapat dilakukan olehnya. 
Dalam OOP blueprint tersebut dikenal dengan class (kelas), nilai yang dimiliki olehnya dikenal dengan properti, kemampuan yang dimilikinya dikenal sebagai behaviour/method dan realisasi dari sebuah blueprint tersebut disebut instance.
Dalam dunia pemrograman khususnya dalam paradigma OOP, kita sering membuat banyak objek dengan jenis yang sama. Dengan membuat blueprint ini kita dapat mengurangi duplikasi kode dalam membuat objek yang serupa.

ES6 Classes

Dengan hadirnya class pada ES6, pembuatan class di JavaScript menjadi lebih mudah dan juga penulisannya mirip seperti bahasa pemrograman lain berbasis class. Pembuatan class pada ES6 menggunakan keyword class itu sendiri kemudian diikuti dengan nama class-nya. 
  1. class Car {
  2.     
  3.     // Sama seperti function constructor
  4.     constructor(manufacture, color) {
  5.         this.manufacture = manufacture;
  6.         this.color = color;
  7.         this.enginesActive = false;
  8.     }
  9.     
  10.     // Sama seperti Car.prototype.startEngine
  11.     startEngines() {
  12.         console.log('Mobil dinyalakan...');
  13.         this.enginesActive = true;
  14.     }
  15.     
  16.     // Sama seperti car.prototype.info
  17.     info() {
  18.         console.log(`Manufacture: ${this.manufacture}`);
  19.         console.log(`Color:  ${this.color}`);
  20.         console.log(`Engines: ${this.enginesActive ? "Active" : "Inactive"}`);
  21.     }
  22.     
  23. }
  24.  
  25. const johnCar = new Car("Honda", "Red");
  26. johnCar.startEngines();
  27. johnCar.info();
  28.  
  29.  
  30. /* output: 
  31. Mobil dinyalakan...
  32. Manufacture: Honda
  33. Color: Red
  34. Engines: Active
  35. */

Jika Anda terbiasa dengan bahasa pemrograman berbasis class, pasti penulisannya sangat serupa bukan? Walaupun dari segi sintaksis pembuatan class antara keduanya cukup berbeda, namun perilaku dari objek yang dibuat dengan keduanya sama. Inilah mengapa class pada ES6 hanya sebuah syntactic sugar dari konsep prototype yang sudah ada.
Mari kita bahas class pada ES6 lebih lanjut.
“Ketika kita hendak membuat sebuah constructor function ataupun class. Secara code convention (aturan penulisan), gunakan CamelCase dalam penamaannya. Contohnya Car daripada car, SportCar daripada sportCar atau Sportcar”

Constructor

Deklarasi class menggunakan ES6 memiliki sifat yang sama seperti pembuatan class menggunakan function constructor (seperti contoh sebelumnya). Namun alih-alih menggunakan function constructor dalam menginisialisasi propertinya, class ini memisahkan constructornya dan ditempatkan pada body class menggunakan method spesial yang dinamakan constructor. 

  1. class Car {

  2.     constructor(manufacture, color) {

  3.         this.manufacture = manufacture;

  4.         this.color = color;

  5.         this.enginesActive = false;

  6.     }

  7. }



constructor biasanya hanya digunakan untuk menetapkan nilai awal pada properti berdasarkan nilai yang dikirimkan pada constructor. Namun sebenarnya kita juga dapat menuliskan logika di dalam constructor jika memang kita memerlukan beberapa kondisi sebelum nilai properti diinisialisasi.
Kita juga melihat penggunaan this pada constructor. Konteks dalam class, keyword this merujuk pada  instance dari class tersebut. Sehingga this dapat digunakan untuk mengelola properti yang terdapat pada instance

Instance

Setelah kita membuat class pada JavaScript, lantas bagaimana cara membuat instance dari class tersebut? Tapi sebelumnya, apa itu instance? Instance merupakan objek yang memiliki properti dan method yang telah ditentukan oleh blueprint-nya (class), atau singkatnya adalah objek yang merupakan hasil realisasi dari sebuah blueprint.
Sama seperti constructor function, untuk membuat instance dari class pada ES6 kita gunakan keyword new.
  1. class Car {
  2.     constructor(manufacture, color) {
  3.         this.manufacture = manufacture;
  4.         this.color = color;
  5.         this.enginesActive = false;
  6.     }
  7. }
  8.  
  9. const johnCar = new Car("Honda", "Red");

Pembuatan class menggunakan ES6 lebih ketat dibandingkan dengan constructor function, di mana dalam pembuatan instance wajib menggunakan keyword new. Jika kita tidak menuliskannya, maka akan terjadi error seperti ini:

  1. class Car {

  2.     constructor(manufacture, color) {

  3.         this.manufacture = manufacture;

  4.         this.color = color;

  5.         this.enginesActive = false;

  6.     }

  7. }

  8.  

  9. const johnCar = Car("Honda", "Red");

  10.  

  11. /* error:

  12. TypeError: Class constructor Car cannot be invoked without 'new'

  13. */


Kita juga dapat membuat banyak instance dari class yang sama, dan tentunya objek yang kita buat memiliki karakteristik (properti dan method) yang sama. Walaupun sama, namun nilai dari propertinya bersifat unik atau bisa saja berbeda. Contohnya seperti ini:

  1. class Car {

  2.     constructor(manufacture, color) {

  3.         this.manufacture = manufacture;

  4.         this.color = color;

  5.         this.enginesActive = false;

  6.     }

  7. }

  8.  

  9. const johnCar = new Car("Honda", "Red");

  10. const adamCar = new Car("Tesla", "Black");

  11.  

  12. console.log(johnCar.manufacture);

  13. console.log(adamCar.manufacture);

  14.  

  15. /* output:

  16. Honda

  17. Tesla

  18. */


Variabel johnCar dan adamCar merupakan sebuah objek dari Car. Tentu keduanya akan memiliki properti manufacture, color, dan enginesActive. Namun pada output kita melihat bahwa nilai dari properti kedua objek tersebut berbeda, karena kita dapat memberikan nilai yang berbeda pada saat objeknya dibuat

Property Accessor

Melalui objek class kita juga dapat mengubah nilai properti seperti ini:

  1. class Car {

  2.     constructor(manufacture, color) {

  3.         this.manufacture = manufacture;

  4.         this.color = color;

  5.         this.enginesActive = false;

  6.     }

  7. }

  8.  

  9. const johnCar = new Car("Honda", "Red");

  10. console.log(`Warna mobil: ${johnCar.color}`); // output -> Warna Mobil: Red

  11.  

  12. johnCar.color = "White"; // Mengubah nilai properti color menjadi white

  13.  

  14. console.log(`Warna mobil: ${johnCar.color}`); // output -> Warna Mobil: White


Dengan class kita juga dapat mengimplementasi getter/setter sebuah properti menjadi sebuah method seperti ini:
  1. class Car {
  2.     constructor(manufacture, color) {
  3.         this.manufacture = manufacture;
  4.         this._color = color;
  5.         this.enginesActive = false;
  6.     }
  7.     
  8.     get color() {
  9.         return `Warna mobile ${this._color}`;
  10.     }
  11.     
  12.     set color(value) {
  13.         console.log(`Warna mobil diubah dari ${this._color} menjadi ${value}`);
  14.         this._color = value;
  15.     }
  16. }
  17.  
  18. const johnCar = new Car("Honda", "Red");
  19. console.log(johnCar.color); // output -> Warna Mobil: Red
  20. johnCar.color = "White"; // Mengubah nilai properti color menjadi white
  21. console.log(johnCar.color); // output -> Warna Mobil: White

Perhatikan juga ketika kita menerapkan getter/setter pada properti class. Kita perlu mengubah atau membedakan penamaan properti aslinya dengan property accessor yang kita buat. 
Berdasarkan code convention yang ada kita perlu mengubah properti asli class-nya dengan menambahkan underscore di depan nama propertinya (_color). Tanda underscore berfungsi sebagai tanda bahwa properti _color tidak sebaiknya diakses langsung, namun harus melalui property accessor (getter/setter).

Method

Untuk menambahkan method pada class, kita juga cukup menuliskannya pada body class, tidak perlu melalui prototype seperti menggunakan constructor function.
  1. class Car {
  2.     constructor(manufacture, color) {
  3.         this.manufacture = manufacture;
  4.         this.color = color;
  5.         this.enginesActive = false;
  6.     }
  7.     
  8.     startEngines() {
  9.         console.log("Mesin dinyalakan");
  10.         this.enginesActive = true;
  11.     }
  12.     
  13.     info() {
  14.         console.log(`Manufacture: ${this.manufacture}`);
  15.         console.log(`Color: ${this.color}`);
  16.         console.log(`Engines: ${this.manufacture ? "Active" : "Inactive"}`);
  17.     }
  18. }
  19.  
  20. const johnCar = new Car("Honda", "Red");
  21.  
  22. johnCar.startEngines();
  23. johnCar.info();
  24.  
  25.  
  26. /* output:
  27. Mesin dinyalakan
  28. Manufacture: Honda
  29. Color: Red
  30. Engines: Active
  31. */

Dengan menggunakan class, walaupun kita menuliskan method pada body class, namun method tersebut tetap berada pada prototype chain miliki instance yang terbuat. Kita bisa melihat bagaimana objek yang dibuat menggunakan class pada console browser.
20200312163128914b6b721efd67a21c9e124a0111699e.gif

Inheritance

Dalam gambaran dunia nyata, banyak objek yang berbeda tetapi punya kesamaan atau kemiripan tertentu. Contohnya mobil dengan motor memiliki banyak kesamaan karena objek tersebut merupakan kendaraan. Mobil merupakan kendaraan darat begitu juga dengan motor. Mungkin yang membedakan objek tersebut adalah jumlah roda dan kapasitas penumpang yang dapat ditampung. 
Sama halnya pada OOP, beberapa objek yang berbeda bisa saja memiliki kesamaan dalam hal tertentu. Di situlah konsep inheritance atau pewarisan harus diterapkan. Pewarisan dapat mencegah kita melakukan perulangan kode. Untuk lebih memahaminya lihatlah contoh bagan pada sebuah kelas berikut:
2020031216412445298e8b960399d06bf16eab880badd8.png
Pada bagan di atas kita dapat lihat class Car, Motorcycle, Plane, dan Helicopter memiliki banyak properti yang sama seperti lisencePlate, manufacture, dan engineActive. Kemudian memiliki beberapa method yang sama seperti startEngines(), info(), dan parking().
Jika kita ubah diagram class Car di atas menjadi sebuah kode maka kode tampak seperti ini:
  1. class Car {
  2.     constructor(licensePlate, manufacture, wheels) {
  3.         this.licensePlate = licensePlate;
  4.         this.manufacture = manufacture;
  5.         this.wheels = wheels;
  6.         this.engineActive = false;
  7.     }
  8.     
  9.     startEngines() {
  10.         console.log(`Mesin kendaraan ${this.licensePlate} dinyalakan!`);
  11.     }
  12.     
  13.     info() {
  14.         console.log(`Nomor Kendaraan: ${this.licensePlate}`);
  15.         console.log(`Manufacture: ${this.manufacture}`);
  16.         console.log(`Mesin: ${this.engineActive ? "Active": "Inactive"}`);
  17.     }
  18.     
  19.     droveOff() {
  20.         console.log(`Kendaraan ${this.licensePlate} melaju!`)
  21.     }
  22.     
  23.     openDoor() {
  24.         console.log(`Membuka pintu!`)
  25.     }
  26.     
  27.     parking() {
  28.         console.log(`Kendaraan ${this.licensePlate} parkir!`);
  29.     }
  30. }

Tidak ada masalah dengan kode tersebut, tetapi jika kita akan membuat kelas lainnya seperti Motorcycle, Plane, dan Helicopter maka kita harus menuliskan properti dan method yang sama secara berulang. 
Dengan teknik inheritance, kita bisa mengelompokkan properti dan method yang sama. Caranya dengan membuat sebuah kelas baru yang nantinya akan diturunkan sifatnya pada class lain:
2020031216453692b650a5c0e0b6c77a74227d408e5757.png
Ketika class Vehicle telah dibuat, kelas lainnya dapat melakukan extends pada kelas tersebut untuk mewarisi sifatnya. Dalam pewarisan, class Vehicle dapat disebut sebagai super atau parent class. Kelas yang mewarisi sifat dari parent class disebut dengan child class.
Pada JavaScript jika kita ingin mewariskan sifat class, lakukan dengan keyword extends seperti berikut:

  1. class ChildClass extends ParentClass {

  2.     

  3. }



Sebagai contoh mari kita buat class Vehicle yang nantinya akan kita gunakan sebagai parent class.

  1. class Vehicle {

  2.     constructor(licensePlate, manufacture) {

  3.         this.licensePlate = licensePlate;

  4.         this.manufacture = manufacture;

  5.         this.engineActive = false;

  6.     }

  7.     

  8.     startEngines() {

  9.         console.log(`Mesin kendaraan ${this.licensePlate} dinyalakan!`);

  10.     }

  11.     

  12.     info() {

  13.         console.log(`Nomor Kendaraan: ${this.licensePlate}`);

  14.         console.log(`Manufacture: ${this.manufacture}`);

  15.         console.log(`Mesin: ${this.engineActive ? "Active": "Inactive"}`);

  16.     }

  17.     

  18.     parking() {

  19.         console.log(`Kendaraan ${this.licensePlate} parkir!`);

  20.     }

  21. }


Kemudian kita bisa membuat class Car sebagai child class dari Vehicle.

  1. class Car extends Vehicle {

  2.    constructor(licensePlate, manufacture, wheels) {

  3.        super(licensePlate, manufacture);

  4.        this.wheels = wheels;

  5.    }

  6.  

  7.    droveOff() {

  8.      console.log(`Kendaraan ${this.licensePlate} melaju!`);

  9.    }

  10.  

  11.    openDoor() {

  12.      console.log(`Membuka pintu!`);

  13.    }

  14. }



Dengan begitu selain properti dan method yang terdapat di dalamnya, class Car juga dapat mengakses seluruh properti dan method yang terdapat pada class Vehicle.
  1. class Vehicle {
  2.    constructor(licensePlate, manufacture) {
  3.        this.licensePlate = licensePlate;
  4.        this.manufacture = manufacture;
  5.        this.engineActive = false;
  6.    }
  7.   
  8.    startEngines() {
  9.        console.log(`Mesin kendaraan ${this.licensePlate} dinyalakan!`);
  10.    }
  11.   
  12.    info() {
  13.        console.log(`Nomor Kendaraan: ${this.licensePlate}`);
  14.        console.log(`Manufacture: ${this.manufacture}`);
  15.        console.log(`Mesin: ${this.engineActive ? "Active": "Inactive"}`);
  16.    }
  17.   
  18.    parking() {
  19.        console.log(`Kendaraan ${this.licensePlate} parkir!`);
  20.    }
  21. }
  22.  
  23. class Car extends Vehicle {
  24.    constructor(licensePlate, manufacture, wheels) {
  25.        super(licensePlate, manufacture);
  26.        this.wheels = wheels;
  27.    }
  28.  
  29.    droveOff() {
  30.      console.log(`Kendaraan ${this.licensePlate} melaju!`);
  31.    }
  32.  
  33.    openDoor() {
  34.      console.log(`Membuka pintu!`);
  35.    }
  36. }
  37.  
  38. const car = new Car("H121S", "Honda", 4);
  39. car.startEngines();
  40.  
  41. /* output:
  42. Mesin kendaraan H121S dinyalakan!
  43. */

Oiya pada constructor class Car, kita melihat penggunaan super(), apa itu maksudnya? Keyword super digunakan untuk mengakses properti dan method yang ada pada induk class ketika berada pada child class. 
Jadi super(lisencePlate, manufacture) di atas berarti kita mengakses constructor dari parent class dan mengirimkan lisencePlate, dan manufacture sebagai data yang dibutuhkan olehnya agar objek (instance) Car berhasil dibuat.
Penggunaan super sangat berguna ketika kita hendak menjalankan method overriding pada method parent. Contohnya kita akan melakukan method overriding pada method info() dengan menambahkan informasi jumlah roda pada mobil, maka kita dapat melakukannya dengan seperti ini:
  1. class Car extends Vehicle {
  2.    constructor(licensePlate, manufacture, wheels) {
  3.        super(licensePlate, manufacture);
  4.        this.wheels = wheels;
  5.    }
  6.  
  7.    droveOff() {
  8.      console.log(`Kendaraan ${this.licensePlate} melaju!`);
  9.    }
  10.  
  11.    openDoor() {
  12.      console.log(`Membuka pintu!`);
  13.    }
  14.  
  15.    /* overriding method info dari parent class */
  16.    info() {
  17.      super.info();
  18.      console.log(`Jumlah roda: ${this.wheels}`);
  19.    }
  20. }
  21.  
  22. const johnCar = new Car("H121S", "Honda", 4);
  23. johnCar.info();
  24.  
  25. /* output:
  26. Nomor Kendaraan: H121S
  27. Manufacture: Honda
  28. Mesin: Inactive
  29. Jumlah roda: 4
  30. */

Dalam melakukan pewarisan kelas, tidak ada tingkatan yang membatasinya. Maksudnya, kita dapat mewariskan sifat kelas A pada kelas B, lalu kelas B mewarisi sifatnya kembali pada kelas C dan selanjutnya. Sama halnya dengan Nenek kita mewarisi sifatnya kepada orang tua kita kemudian orang tua kita mewarisi sifatnya kepada kita. 
Sehingga jika dilihat dari bagan sebelumnya, class tersebut masih bisa dikelompokkan kembali menjadi seperti ini: 
20200312165044bad7c7034d9d728224594a2fde9a7693.png

Static Method

Seluruh kendaraan pasti butuh yang namanya perawatan bukan? Jika iya, tentu kita perlu membuat method repair untuk memperbaiki kendaraan tersebut. 
Dalam analogi dunia nyata, ketika kendaraan mengalami kerusakan maka kendaraan tersebut akan diperbaiki di bengkel (factory), sehingga kita perlu membuat class baru yang berperan sebagai factory, sebutlah class tersebut VehicleFactory. 
Di dalam kelas VehicleFactory terdapat satu method repair() yang dapat menerima banyak kendaraan sebagai parameternya. 
  1. class Vehicle {
  2.   constructor(licensePlate, manufacture) {
  3.       this.licensePlate = licensePlate;
  4.       this.manufacture = manufacture;
  5.       this.engineActive = false;
  6.   }
  7.    /*
  8.   kode lainnya
  9.   */
  10. }
  11.  
  12. /* kode lainnya dalam pembuatan class Car, 
  13. Motorcycle, dsb. */
  14.  
  15.  
  16. class VehicleFactory {
  17.  repair(vehicles) {
  18.     vehicles.forEach(vehicle => {
  19.       console.log(`Kendaraan ${vehicle.licensePlate} sedang melakukan perawatan`)
  20.     })
  21.   }
  22. }

Untuk mengakses method dari class, sejauh ini kita perlu membuat instance dari classnya terlebih dahulu. Sehingga untuk memanggil repair(), kita perlu membuat instance dari class VehicleFactory
  1. const johnCar = new Car("H121S", "Honda", 4);
  2. const tomMotor = new Motorcycle("GF121J", "Yamaha", 2);
  3. const dimasCar = new Car("TA1408K", "Tesla", 4);
  4.  
  5. /* Membuat instance untuk memanggil fungsi repair */
  6. const vehicleFactory = new VehicleFactory();
  7. vehicleFactory.repair([johnCar, tomMotor, dimasCar]);
  8.  
  9. /* output:
  10. Kendaraan H121S sedang melakukan perawatan
  11. Kendaraan GF121J sedang melakukan perawatan
  12. Kendaraan TA1408K sedang melakukan perawatan
  13. */
Kode tersebut berjalan sesuai harapan namun tidak efektif. Mengapa? Karena kita perlu membuat instance untuk sekedar memanggil satu fungsi dari class-nya tersebut. 
Membuat instance adalah membuat sebuah objek baru yang terbentuk melalui blueprint sehingga membutuhkan memori ekstra. Jika kita dapat mengakses method tersebut tanpa melalui instance mengapa tidak? 
Pada kasus inilah kita membutuhkan sebuah static method. Static method merupakan method yang tidak dapat dipanggil oleh instance dari class, namun dapat dipanggil melalui class-nya sendiri.
Pada ES6 class kita dapat membuat static method dengan menambahkan keyword static sebelum deklarasi method-nya:
  1. class Vehicle {
  2.   constructor(licensePlate, manufacture) {
  3.       this.licensePlate = licensePlate;
  4.       this.manufacture = manufacture;
  5.       this.engineActive = false;
  6.   }
  7.    /*
  8.   kode lainnya
  9.   */
  10. }
  11.  
  12. /* kode lainnya dalam pembuatan class Car, 
  13. Motorcycle, dsb. */
  14.  
  15. class VehicleFactory {
  16.  static repair(vehicles) {
  17.     vehicles.forEach(vehicle => {
  18.       console.log(`Kendaraan ${vehicle.licensePlate} sedang melakukan perawatan`)
  19.     })
  20.   }
  21. }

Kemudian untuk memanggil methodnya kita bisa panggil melalui class Vehicle kemudian repair().
  1. const johnCar = new Car("H121S", "Honda", 4);
  2. const tomMotor = new Motorcycle("GF121J", "Yamaha", 2);
  3. const dimasCar = new Car("TA1408K", "Tesla", 4);
  4.  
  5. /* Pemanggilan method repair langsung dari class-nya */
  6. VehicleFactory.repair([johnCar, tomMotor, dimasCar]);
  7.  
  8. /* output:
  9. Kendaraan H121S sedang melakukan perawatan
  10. Kendaraan GF121J sedang melakukan perawatan
  11. Kendaraan TA1408K sedang melakukan perawatan
  12. */

Solution : Class


Apakah Anda sudah berhasil mengubah mengubah function constructor menjadi class? Jika belum, mari kita lakukan hal tersebut bersama-sama.
Pertama, kita buka berkas data-source.js. Kemudian ubah penerapan function constructor berikut:

  1. function DataSource(onSuccess, onFailed) {

  2.    this.onSuccess = onSuccess;

  3.    this.onFailed = onFailed;

  4. }


Dengan menggunakan class:

  1. class DataSource {

  2.    constructor(onSuccess, onFailed) {

  3.        this.onSuccess = onSuccess;

  4.        this.onFailed = onFailed;

  5.    }

  6. }



Kemudian untuk fungsi searchClub, kita ubah penulisannya dari:

  1. DataSource.prototype.searchClub = function (keyword) {

  2.     const filteredClubs = clubs.filter(club => club.name.toUpperCase().includes(keyword.toUpperCase()));

  3.  

  4.     if (filteredClubs.length) {

  5.         this.onSuccess(filteredClubs);

  6.     } else {

  7.         this.onFailed(`${keyword} is not found`);

  8.     }

  9. };


Menjadi method yang dituliskan pada body class DataSource seperti ini:

  1. class DataSource {

  2.    constructor(onSuccess, onFailed) {

  3.        this.onSuccess = onSuccess;

  4.        this.onFailed = onFailed;

  5.    }

  6.  

  7.    searchClub(keyword) {

  8.        const filteredClubs = clubs.filter(club => club.name.toUpperCase().includes(keyword.toUpperCase()));

  9.  

  10.        if (filteredClubs.length) {

  11.            this.onSuccess(filteredClubs);

  12.        } else {

  13.            this.onFailed(`${keyword} is not found"`);

  14.        }

  15.    }

  16. }



Untuk memastikan perubahan yang kita lakukan sudah benar, silakan Anda coba buka berkas index.html pada browser. Jika aplikasi berjalan dengan lancar, maka class berhasil diterapkan dengan baik.
Namun jika aplikasi tidak berjalan lancar, dan menghasilkan eror pada console browser, jangan malu untuk bertanya pada forum diskusi ya!
Langkah dari solution ini bisa Anda temukan juga pada repository berikut: https://github.com/dicodingacademy/a163-bfwd-labs/tree/106-club-finder-class-solution

z





at