Static Method didalam Class Javascript

Static Method didalam Class Javascript

fezarzone    09.55    Comment   

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.

class Vehicle {
  constructor(licensePlate, manufacture) {
      this.licensePlate = licensePlate;
      this.manufacture = manufacture;
      this.engineActive = false;
  }
   /*
  kode lainnya
  */
}
 
/* kode lainnya dalam pembuatan class Car, 
Motorcycle, dsb. */
 
 
class VehicleFactory {
 repair(vehicles) {
    vehicles.forEach(vehicle => {
      console.log(`Kendaraan ${vehicle.licensePlate} sedang melakukan perawatan`)
    })
  }
}

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

const johnCar = new Car("H121S", "Honda", 4);
const tomMotor = new Motorcycle("GF121J", "Yamaha", 2);
const dimasCar = new Car("TA1408K", "Tesla", 4);
 
/* Membuat instance untuk memanggil fungsi repair */
const vehicleFactory = new VehicleFactory();
vehicleFactory.repair([johnCar, tomMotor, dimasCar]);
 
/* output:
Kendaraan H121S sedang melakukan perawatan
Kendaraan GF121J sedang melakukan perawatan
Kendaraan TA1408K sedang melakukan perawatan
*/

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:

class Vehicle {
  constructor(licensePlate, manufacture) {
      this.licensePlate = licensePlate;
      this.manufacture = manufacture;
      this.engineActive = false;
  }
   /*
  kode lainnya
  */
}
 
/* kode lainnya dalam pembuatan class Car, 
Motorcycle, dsb. */
 
class VehicleFactory {
 static repair(vehicles) {
    vehicles.forEach(vehicle => {
      console.log(`Kendaraan ${vehicle.licensePlate} sedang melakukan perawatan`)
    })
  }
}

Kemudian untuk memanggil methodnya kita bisa panggil melalui class Vehicle kemudian repair().

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. 

class Vehicle {
  constructor(licensePlate, manufacture) {
      this.licensePlate = licensePlate;
      this.manufacture = manufacture;
      this.engineActive = false;
  }
   /*
  kode lainnya
  */
}
 
/* kode lainnya dalam pembuatan class Car, 
Motorcycle, dsb. */
 
 
class VehicleFactory {
 repair(vehicles) {
    vehicles.forEach(vehicle => {
      console.log(`Kendaraan ${vehicle.licensePlate} sedang melakukan perawatan`)
    })
  }
}

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

const johnCar = new Car("H121S", "Honda", 4);
const tomMotor = new Motorcycle("GF121J", "Yamaha", 2);
const dimasCar = new Car("TA1408K", "Tesla", 4);
 
/* Membuat instance untuk memanggil fungsi repair */
const vehicleFactory = new VehicleFactory();
vehicleFactory.repair([johnCar, tomMotor, dimasCar]);
 
/* output:
Kendaraan H121S sedang melakukan perawatan
Kendaraan GF121J sedang melakukan perawatan
Kendaraan TA1408K sedang melakukan perawatan
*/

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:

class Vehicle {
  constructor(licensePlate, manufacture) {
      this.licensePlate = licensePlate;
      this.manufacture = manufacture;
      this.engineActive = false;
  }
   /*
  kode lainnya
  */
}
 
/* kode lainnya dalam pembuatan class Car, 
Motorcycle, dsb. */
 
class VehicleFactory {
 static repair(vehicles) {
    vehicles.forEach(vehicle => {
      console.log(`Kendaraan ${vehicle.licensePlate} sedang melakukan perawatan`)
    })
  }
}

Kemudian untuk memanggil methodnya kita bisa panggil melalui class Vehicle kemudian repair().

Inheritance Dalam OOP Javascript (Parent Class & Child Class)

Inheritance Dalam OOP Javascript (Parent Class & Child Class)

fezarzone    09.43    Comment   

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:

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:

class Car {
    constructor(licensePlate, manufacture, wheels) {
        this.licensePlate = licensePlate;
        this.manufacture = manufacture;
        this.wheels = wheels;
        this.engineActive = false;
    }
    
    startEngines() {
        console.log(`Mesin kendaraan ${this.licensePlate} dinyalakan!`);
    }
    
    info() {
        console.log(`Nomor Kendaraan: ${this.licensePlate}`);
        console.log(`Manufacture: ${this.manufacture}`);
        console.log(`Mesin: ${this.engineActive ? "Active": "Inactive"}`);
    }
    
    droveOff() {
        console.log(`Kendaraan ${this.licensePlate} melaju!`)
    }
    
    openDoor() {
        console.log(`Membuka pintu!`)
    }
    
    parking() {
        console.log(`Kendaraan ${this.licensePlate} parkir!`);
    }
}

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:

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:

class ChildClass extends ParentClass {
    
}

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

class Vehicle {
    constructor(licensePlate, manufacture) {
        this.licensePlate = licensePlate;
        this.manufacture = manufacture;
        this.engineActive = false;
    }
    
    startEngines() {
        console.log(`Mesin kendaraan ${this.licensePlate} dinyalakan!`);
    }
    
    info() {
        console.log(`Nomor Kendaraan: ${this.licensePlate}`);
        console.log(`Manufacture: ${this.manufacture}`);
        console.log(`Mesin: ${this.engineActive ? "Active": "Inactive"}`);
    }
    
    parking() {
        console.log(`Kendaraan ${this.licensePlate} parkir!`);
    }
}

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

class Car extends Vehicle {
   constructor(licensePlate, manufacture, wheels) {
       super(licensePlate, manufacture);
       this.wheels = wheels;
   }
 
   droveOff() {
     console.log(`Kendaraan ${this.licensePlate} melaju!`);
   }
 
   openDoor() {
     console.log(`Membuka pintu!`);
   }
}

Dengan begitu selain properti dan method yang terdapat di dalamnya, class Car juga dapat mengakses seluruh properti dan method yang terdapat pada class Vehicle.

class Vehicle {
   constructor(licensePlate, manufacture) {
       this.licensePlate = licensePlate;
       this.manufacture = manufacture;
       this.engineActive = false;
   }
  
   startEngines() {
       console.log(`Mesin kendaraan ${this.licensePlate} dinyalakan!`);
   }
  
   info() {
       console.log(`Nomor Kendaraan: ${this.licensePlate}`);
       console.log(`Manufacture: ${this.manufacture}`);
       console.log(`Mesin: ${this.engineActive ? "Active": "Inactive"}`);
   }
  
   parking() {
       console.log(`Kendaraan ${this.licensePlate} parkir!`);
   }
}
 
class Car extends Vehicle {
   constructor(licensePlate, manufacture, wheels) {
       super(licensePlate, manufacture);
       this.wheels = wheels;
   }
 
   droveOff() {
     console.log(`Kendaraan ${this.licensePlate} melaju!`);
   }
 
   openDoor() {
     console.log(`Membuka pintu!`);
   }
}
 
const car = new Car("H121S", "Honda", 4);
car.startEngines();
 
/* output:
Mesin kendaraan H121S dinyalakan!
*/

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:

class Car extends Vehicle {
   constructor(licensePlate, manufacture, wheels) {
       super(licensePlate, manufacture);
       this.wheels = wheels;
   }
 
   droveOff() {
     console.log(`Kendaraan ${this.licensePlate} melaju!`);
   }
 
   openDoor() {
     console.log(`Membuka pintu!`);
   }
 
   /* overriding method info dari parent class */
   info() {
     super.info();
     console.log(`Jumlah roda: ${this.wheels}`);
   }
}
 
const johnCar = new Car("H121S", "Honda", 4);
johnCar.info();
 
/* output:
Nomor Kendaraan: H121S
Manufacture: Honda
Mesin: Inactive
Jumlah roda: 4
*/

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:

Cara Menambahkan Method didalam Class Javascript

Cara Menambahkan Method didalam Class Javascript

fezarzone    09.21    Comment   

Untuk menambahkan method pada class, kita juga cukup menuliskannya pada body class, tidak perlu melalui prototype seperti menggunakan constructor function.

class Car {
    constructor(manufacture, color) {
        this.manufacture = manufacture;
        this.color = color;
        this.enginesActive = false;
    }
    
    startEngines() {
        console.log("Mesin dinyalakan");
        this.enginesActive = true;
    }
    
    info() {
        console.log(`Manufacture: ${this.manufacture}`);
        console.log(`Color: ${this.color}`);
        console.log(`Engines: ${this.manufacture ? "Active" : "Inactive"}`);
    }
}
 
const johnCar = new Car("Honda", "Red");
 
johnCar.startEngines();
johnCar.info();
 
 
/* output:
Mesin dinyalakan
Manufacture: Honda
Color: Red
Engines: Active
*/

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