Skip to content Skip to sidebar Skip to footer

Property Accessor didalam Object Class Javascript

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)
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.
Dengan menggunakan default parameters, nilai pada parameter tidak akan menghasilkan undefined walaupun kita tidak memberikan nilai ketika fungsi tersebut dipanggil. Default parameter dapat digunakan pada regular function ataupun arrow function.

Berikut contoh dari penggunaan default parameter:

  1. function sayHello(name = "Stranger", greet = "Hello") {

  2.     console.log(`${greet} ${name}!`);

  3. }

  4.  

  5. sayHello("Dimas", "Hai");

  6. sayHello();

  7.  

  8. /* output:

  9. Hai Dimas!

  10. Hello Stranger!

  11. */



  1. const sayHello = (name = "Stranger", greet = "Hello") => console.log(`${greet} ${name}!`);

  2.  

  3.  

  4. sayHello("Dimas", "Hai");

  5. sayHello();

  6.  

  7.  

  8. /* output:

  9. Hai Dimas!

  10. Hello Stranger!

  11. */



Pada contoh di atas, kita menggunakan tanda assignment (=) untuk menetapkan parameter name dengan nilai default “Stranger”, dan parameter greet dengan nilai default “Hello”. Hal ini sangat berguna ketika kita memanggil fungsi sayHello() tanpa menetapkan nilai parameter di dalamnya, karena walaupun kita tidak menetapkan nilainya, kedua parameter tersebut tidak akan menghasilkan undefined.

Post a Comment for "Property Accessor didalam Object Class Javascript"