Apa Itu Class di Javascript? - Belajar Class di Javascript - Information And Technology

Apa Itu Class di Javascript? - Belajar Class di Javascript

Dalam paradigma Object-Oriented Programming (OOP), class adalah sebuah blueprint yang mana dapat dikembangkan guna membuat sebuah objek.
Blueprint ini adalah sebuah template yang mana di dalamnya menjelaskan seperti apa perilaku dari objek itu (berupa properti ataupun method).
2020031400163071868d05b7fff5009d785e8cb61890d3.png
Paradigma OOP selalu diilustrasikan dengan kehidupan real. Visualisasi di atas memberikan contoh gambaran umum OOP di mana ada sebuah blueprint kucing, nilai atau value yang dimiliki kucing, dan kemampuan yang dapat dilakukan olehnya. 
Dalam OOP blueprint tersebut dikenal sebagai class (kelas), nilai atau value yang dimiliki olehnya dikenal sebagai properti, kemampuan yang dimilikinya dikenal sebagai behaviour/method dan realisasi dari sebuah blueprint tersebut disebut sebagai instance.
Di dalam dunia pemrograman terkhusus dalam paradigma OOP, kita seringkali membuat banyak objek dengan jenis yang sama. Dengan membuat blueprint ini kita dapat menurunkan tingkat duplikasi kode dalam membuat objek yang serupa
Umumnya mayoritas bahasa pemrograman memanfaatkan class dalam penerapan paradigma OOP. Pada JavaScript tidak terdapat konsep class murni bahkan hingga saat ini. Tapi bukan berarti kita tidak bisa menerapkan paradigma OOP sepenuhnya.
Seperti yang kita ketahui, class pada OOP adalah sebuah blueprint. Jika berbicara mengenai blueprint, JavaScript mempunyai konsep untuk membuatnya tanpa melalui class. Konsep tersebut merupakan prototype. Sejak awal para developer menggunakan konsep ini dalam menerapkan paradigma OOP di JavaScript.
Meskipun dapat menggantikan class, konsep prototype ini tidak serupa dengan class pada bahasa pemerogramman lain. Terlebih pada penulisan sintaknya atau perintahnya. Hal ini membuat banyak developer kebingungan khususnya developer yang memiliki dasar dari bahasa class basis (seperti Java, C++, C#, Swift, etc.). Walaupun banyak juga developer yang merasa bahwa class tidak penting atau tidak diperlukan pada JavaScript, meskipun begitu fitur class ini tetap menjadi salah satu yang dikembangkan pada ECMAScript 6.

A Class Before ES6

Sebelum ada ES6, Hal yang paling mendekati dengan class yakni membuat sebuah objek dengan menggunakan constructor function dan keyword new, lalu untuk menambahkan method kita gunakan konsep prototype.

  1. function Car(manufacture, color) {

  2.     this.manufacture = manufacture;

  3.     this.color = color;

  4.     this.enginesActive = false;

  5. }

  6.  

  7. Car.prototype.startEngines = function () {

  8.     console.log('Mobil dinyalakan...');

  9.     this.enginesActive = true;

  10. };

  11.  

  12. Car.prototype.info = function () {

  13.     console.log("Manufacture: " + this.manufacture);

  14.     console.log("Color: " + this.color);

  15.     console.log("Engines: " + (this.enginesActive ? "Active" : "Inactive"));

  16. }

  17.  

  18. var johnCar = new Car("Honda", "Red");

  19. johnCar.startEngines();

  20. johnCar.info();

  21.  

  22. /* output: 

  23. Mobil dinyalakan...

  24. Manufacture: Honda

  25. Color: Red

  26. Engines: Active

  27. */


Pada kode di atas Car adalah constructor function yang mana akan membuat instance Car baru setiap kode new Car() dieksekusi. Melalui Car.prototype, method startEngines() dan carInfo()  diwarisi pada setiap instance Car yang dibuat, sehingga johnCar (sebagai instance Car) dapat mengakses kedua method tersebut.

ES6 Classes

Dengan adanya class pada ES6, membuat pembuatan class di JavaScript menjadi lebih mudah dan juga penulisannya juga mirip seperti bahasa pemrograman lain berbasis class. proses Pembuatan class pada ES6 menggunakan keyword class itu sendiri kemudian diikuti dengan nama classnya. 

  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 yang berbasis class, pasti penulisannya tak terlalu berbeda  bahkan sangat serupa bukan?

Walaupun dari segi sintaksis atau perintah pembuatan class antara keduanya cukup berbeda, tapi perilaku dari objek yang dibuat dengan keduanya sama.

Itulah mengapa class pada ES6 hanya sebuah syntactic sugar dari konsep prototype yang sudah ada.

Subscribe to receive free email updates:

0 Response to "Apa Itu Class di Javascript? - Belajar Class di Javascript"

Posting Komentar