Belajar Dasar JavaScript: Kelas

Kelas merupakan templat bagi objek. Jadi kita bisa membuat objek dari suatu kelas. Bisa dikatakan, kelas adalah rancangan dari suatu objek.

Deklarasi Kelas

Kelas dalam JavaScript dapat dideklarasikan dengan keyword class. Contohnya seperti berikut:

class Orang {}

Pada kode di atas kita mendeklarasikan kelas dengan nama Orang. Kode di antara kurung kurawal disebut dengan class body. Di dalam class body kita mendeklarasikan method dan properti dari kelas.

Objek dari kelas Orang dapat dibuat dengan keyword new. Contohnya seperti berikut:

const orang = new Orang();

Properti

Properti pada kelas dapat dideklarasikan di dalam class body. Contoh pendeklarasiannya:

class Orang {
  nama = "Toiman";
  umur = 29;
}

Saat objek dari kelas Orang dibuat maka objek akan memiliki properti nama bernilai "Toiman" dan umur bernilai 29.

Pengaksesan dan pengubahan nilai properti pada kelas juga sama dengan pengaksesan dan pengubahan properti pada objek. Contohnya:

const orang = new Orang();
console.log(orang.nama);
console.log(orang["umur"]);

orang.nama = "Supardi";
console.log(orang.nama);

Method

Method pada kelas juga dideklarasikan di dalam class body. Contohnya seperti ini:

class Orang {
  nama = "Toiman";
  umur = 29;

  greet() {
    console.log(`Hello i am ${this.nama} with age ${this.umur}`);
  }
}

Sama seperti pada objek, this pada fungsi greet merujuk kepada objek pemilik fungsi tersebut.

Pemanggilan fungsi di kelas juga sama dengan pemanggilan fungsi pada objek. Contohnya seperti ini:

const orang = new Orang();
orang.greet();

Konstruktor

Konstruktor merupakan fungsi khusus yang digunakan untuk membuat objek dari suatu kelas. Saat membuat objek dengan keyword new sebenarnya kita memanggil konstruktor. Berikut adalah contoh konstruktor:

class Orang {
  constructor(nama, umur) {
    this.nama = nama;
    this.umur = umur;
  }

  greet() {
    console.log(`Hello i am ${this.nama} with age ${this.umur}`);
  }
}

Pada kode di atas kita tidak perlu mendeklarasikan property nama dan umur, karena saat kita menentukan nilai untuk kedua property tersebut, property tersebut secara otomatis dibuat.

this pada kode menunjukkan objek yang dibuat. Untuk membuat objek dari kelas Orang kita harus memberikan argumen untuk nama dan umur. Contohnya seperti ini:

const orang = new Orang("Toiman", 29);
orang.greet();

const orang2 = new Orang("Sayuri", 23);
orang2.greet();

Operator instanceof

Operator instanceof merupakan operator yang digunakan untuk mengecek apakah suatu objek mempunyai kelas tertentu. Operator ini menghasilkan nilai Boolean. Contohnya:

const toiran = new Orang("Toiran", 33);
const sayuri = {
  nama: "Sayuri",
  umur: 23,
};

console.log(toiran instanceof Orang); // true
console.log(sayuri instanceof Orang); // false

Pada kode di atas kita mengecek apakah objek toiran dan sayuri mempunyai kelas Orang.

Anggota Statis

Anggota Statis merupakan anggota Kelas yang dapat diakses tanpa membuat objek dari kelas. Anggota statis dapat diakses dengan menggunakan nama kelas.

Pada kode berikut kita mendeklarasikan properti statis dengan nama versi.

class Kelas {
  static versi = "0.1";
}

console.log(Kelas.versi); // 0.1

Pada kode berikut kita mendeklarasikan fungsi statis dengan nama sayVersion.

class Kelas {
  static sayVersion() {
    console.log("0.1");
  }
}

Kelas.sayVersion(); // 0.1

Saat kita mengakses anggota statis kelas dari dalam kelas itu sendiri kita harus menggunakan nama kelas tidak boleh menggunakan this.

class Kelas {
  static versi = "0.1";
  static sayVersion() {
    console.log(Kelas.versi);
  }

  beep() {
    console.log(this.versi);
  }

  beep2() {
    console.log(Kelas.versi);
  }
}

Kelas.sayVersion(); // 0.1
const kelas = new Kelas();
kelas.beep(); // undefined
kelas.beep2(); // 0.1

Saat kita menggunakan this.versi, kita mengakses properti versi dari objek kelas. Anggota statis tidak dimasukkan ke dalam anggota objek.

Anggota Privat

Secara default, anggota kelas merupakan anggota publik yang berarti dapat diakses diluar kelas. Anggota kelas juga dapat dijadikan anggota privat. Anggota privat adalah anggota kelas yang hanya dapat diakses dari dalam kelas. Jika diakses dari luar kelas, maka akan terjadi error.

Nama dari anggota privat harus diawali dengan tanda pagar (#). Contohnya pada kode berikut kita membuat properti privat bernama #agenRahasia.

class Negara {
  #agenRahasia = "CIA";

  sayAgenRahasia() {
    console.log(this.#agenRahasia);
  }
}

const negara = new Negara();
negara.sayAgenRahasia(); // CIA
console.log(negara.#agenRahasia);
// Uncaught:
// SyntaxError: Private field '#agenRahasia' must be declared in an enclosing class

Berbeda dengan anggota publik, anggota privat harus dideklarasikan di dalam class body. Jika kita mengakses anggota privat yang tidak dideklarasikan akan terjadi error.

Pada contoh berikut kita mengakses properti privat yang tidak dideklarasikan bernama #rahasiaSaya.

class Rahasia {
  setRahasiaSaya(rahasia) {
    this.#rahasiaSaya = rahasia;
  }

  printRahasiaSaya() {
    console.log(this.#rahasiaSaya);
  }
}

const rahasia = new Rahasia();
// Uncaught:
// SyntaxError: Private field '#rahasiaSaya' must be declared in an enclosing class

rahasia.setRahasiaSaya("Mobile Legend");
rahasia.printRahasiaSaya();

Pada saat membuat objek dari Rahasia terjadi error. Untuk mengatasinya kita bisa mendeklarasikan properti #rahasiaSaya di class body.

class Rahasia {
  #rahasiaSaya;

  setRahasiaSaya(rahasia) {
    this.#rahasiaSaya = rahasia;
  }

  printRahasiaSaya() {
    console.log(this.#rahasiaSaya);
  }
}

const rahasia = new Rahasia();

rahasia.setRahasiaSaya("Mobile Legend");
rahasia.printRahasiaSaya(); // Mobile Legend

Pada kode berikut kita membuat fungsi privat bernama printAgen.

class Perusahaan {
  #printAgen() {
    console.log("Putin");
  }

  sayAgen() {
    this.#printAgen();
  }
}

const perusahaan = new Perusahaan();
perusahaan.sayAgen(); // Putin
perusahaan.#printAgen();
// Uncaught SyntaxError: Private field '#printAgen' must be declared in an enclosing class