CLASS JAVASCRIPT FUNCTION

Penjelasan Class di Javascript

Dalam paradigma pemrograman berorientasi objek (OOP), Class javascript function adalah blueprint yang dapat dikembangkan untuk membuat objek.

Blueprint ini merupakan template yang menjelaskan perilaku suatu objek (berupa properti atau metode).

Paradigma OOP selalu digambarkan dalam kehidupan nyata. Visualisasi di atas adalah contoh gambaran umum OOP terdapat blueprint kucing, nilai yang dimiliki kucing, dan kemampuan yang dapat dilakukannya.

Dalam OOP, blueprint ini disebut class, nilainya disebut properti, kemampuan yang dimilikinya disebut behavior/method, dan realisasi dari blueprint disebut instance.

Dalam dunia pemrograman khususnya paradigma OOP, kita sering membuat banyak objek dengan tipe yang sama. Dengan membuat blueprint ini, kita dapat mengurangi duplikasi kode saat membuat objek serupa

Sebagian besar bahasa pemrograman menggunakan class untuk mengimplementasikan paradigma OOP. Hingga saat ini, belum ada konsep class murni dalam JavaScript. Namun bukan berarti kita tidak bisa sepenuhnya menerapkan paradigma OOP.

Seperti yang kita ketahui, class dalam OOP adalah sebuah blueprint. Berbicara tentang blueprint, konsep JavaScript adalah membuatnya tanpa class. Konsep ini adalah prototype. Sejak awal, developer telah menggunakan konsep ini untuk mengimplementasikan paradigma OOP di JavaScript.

Meskipun prototipe dapat menggantikan class, itu tidak sama dengan class dalam bahasa lain. Terutama saat menulis sintaks. Ini membingungkan banyak programmer, terutama programmer berbasis bahasa class basic (seperti Java, C++, C#, Swift, etc.). Meskipun banyak pengembang menganggap class tidak diperlukan dalam JavaScript, fitur class ini masih dikembangkan di ECMAScript 6.

A Class before ES6

Sebelum ES6, hal yang paling dekat dengan class adalah membuat objek dengan fungsi konstruktor (Constructor function) dan kata kunci baru (keyword new), lalu kami menggunakan prototype konsep untuk menambahkan metode.

• function Car(manufacture, colo

      this.manufacture = manufacture;

      this.color = color;

      this.enginesActive = false;

• 5 }· Car.prototype.startEngines = function () {·     console.log(‘Mobil dinyalakan…’);·      this.enginesActive = true;

  ·  Car.prototype.info = function () {
  ·      console.log(“Manufacture: ” + this.manufacture);
  ·      console.log(“Color: ” + this.color);
  ·      console.log(“Engines: ” + (this.enginesActive ? “Active” : “Inacti·  var johnCar = new Car(“Honda”, “Red”);
  ·  johnCar.startEngines();
  ·  johnCar.info();

  ·  /* output:
  ·  Mobil dinyalakan…
  ·  Manufacture: Honda
  · ·  Engines: Active
  ·  */ Color: Red

Pada kode di atas, Car adalah fungsi konstruktor (constructor function ) yang membuat instance Car baru setiap kali kode Car baru (New Car) ()dijalankan. Car.prototype menyebabkan metode startEngines() dan carInfo() diwarisi pada setiap instance Car yang dibuat, jadi johnCar (sebagai instance Car) dapat menggunakan kedua metode tersebut.

Teknik dasar ini digunakan untuk membuat class JavaScript function sebelum ES6.

“Mengapa metode instance harus disimpan dalam prototype atau __proto__? Mengapa tidak menyimpannya di constructor sama seperti properti?

Alasannya adalah jika kita menyimpan metode di constructor, maka metode akan dibuat setiap kali instance dibuat. Ini bukan pendekatan yang baik karena jika metode tersebut berisi banyak kode, maka akan memakan banyak memori.

Di sisi lain, jika Anda menggunakan prototype, method ini dibuat hanya sekali. Dan method ini diwarisi oleh setiap instance yang dibuat.”

kelas ES6

Dengan class di ES6, membuat class di JavaScript menjadi lebih mudah dan penulisannya mirip dengan bahasa pemrograman berbasis class lainnya. Saat membuat kelas di ES6, keyword class itu sendiri digunakan diikuti dengan nama classnya. mobil kelas {

  class Car {

      // Sama seperti function constructor

      constructor(manufacture, color) {

          this.manufacture = manufacture;

          this.color = color;

          this.enginesActive = false;

      // Sama seperti Car.prototype.startEngine

      startEngines() {

          console.log(‘Mobil dinyalakan…’);

          this.enginesActive = true;

      // Sama seperti car.prototype.info

      info() {

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

          console.log(`Color:  ${this.color}`);

          console.log(`Engines: ${this.enginesActive ? “Active” : “Inactive”}`);

  const johnCar = new Car(“Honda”, “Red”);

  johnCar.startEngines();

  johnCar.info();

  /* output:

  Mobil dinyalakan…

  Manufacture: Honda

  Color: Red

  Engines: Active

  */

Jika Anda sudah familiar dengan bahasa pemrograman berbasis class, pasti tulisannya sangat mirip?

Meskipun sintaksis untuk membuat class sangat berbeda antara keduanya, perilaku objek yang dibuat dengan keduanya adalah sama.

Karena itu, class di ES6 hanyalah gula sintaksis (Syntactic Sugar) dari konsep prototype yang ada.

“Jika kita ingin membuat fungsi konstruktor (Constructor function) atau Class. Menurut Code Convention (aturan penulisan), gunakan CamelCase pada penamaannya. Misalnya Car dari Car, SportCar dari sportCar atau Sportcar

Tags: Class javascript function, javascript, Mesin Antrian Javascript