Di bab objek kamu sudah bikin objek satu per satu dengan { }. Masalahnya muncul saat kamu butuh puluhan objek dengan bentuk yang sama, misalnya data mahasiswa. Menyalin { nama, nim, perkenalan() {...} } berkali-kali itu capek dan rawan typo.

class (hadir di ES6 atau ES2015) adalah cetakan. Kamu tulis bentuknya sekali, lalu cetak objek sebanyak apa pun dengan new. Objek hasil cetakan disebut instance.

class Mahasiswa {
  constructor(nama, nim) {
    this.nama = nama;
    this.nim = nim;
  }

  perkenalan() {
    return `Saya ${this.nama}, NIM ${this.nim}`;
  }
}

const dini = new Mahasiswa("Dini", "0421");
const raka = new Mahasiswa("Raka", "0422");

console.log(dini.perkenalan()); // Saya Dini, NIM 0421
console.log(raka.nama);         // Raka

Yang terjadi saat new Mahasiswa("Dini", "0421") dijalankan, langkah demi langkah:

1. JavaScript membuat objek kosong baru.
2. constructor dipanggil otomatis, dan this menunjuk ke objek baru itu.
3. Baris this.nama = nama mengisi properti objek.
4. Objek yang sudah terisi dikembalikan dan disimpan ke dini.

Method seperti perkenalan() tidak disalin ke tiap objek. Ia disimpan sekali di Mahasiswa.prototype, lalu dipakai bersama oleh semua instance. Itulah kenapa class disebut "gula sintaksis": di balik layar, JavaScript tetap memakai sistem prototype yang sudah ada sejak dulu. Class hanya membuat penulisannya lebih rapi dan familiar bagi yang pernah belajar Java atau Python.

console.log(dini.perkenalan === raka.perkenalan); // true, fungsi yang sama
console.log(typeof Mahasiswa);                    // "function"

Dua hal kecil yang beda dari fungsi biasa: class wajib dipanggil dengan new (tanpa new kamu dapat TypeError), dan isi class otomatis berjalan dalam strict mode.

Kadang sebuah nilai lebih masuk akal dihitung daripada disimpan. Luas lingkaran, misalnya, selalu bergantung pada jari-jarinya. Getter (get) membuatmu bisa membaca hasil hitungan seperti properti biasa, tanpa tanda kurung.

class Lingkaran {
  constructor(r) {
    this._r = r;
  }

  get luas() {
    return Math.round(Math.PI * this._r ** 2);
  }

  set jari(nilai) {
    if (nilai <= 0) throw new Error("Jari-jari harus positif");
    this._r = nilai;
  }
}

const roda = new Lingkaran(7);
console.log(roda.luas); // 154
roda.jari = 10;         // memanggil setter
console.log(roda.luas); // 314
roda.jari = -1;         // Error: Jari-jari harus positif

Setter (set) dipanggil saat kamu menulis dengan =. Ini tempat yang pas untuk validasi. Awalan _ pada _r hanyalah konvensi: tanda "ini urusan internal, jangan diutak-atik dari luar". JavaScript tidak benar-benar melarangnya. Properti privat resmi dengan tanda # baru datang di ES2022, dan kita bahas di bab JavaScript modern.

Method static menempel pada class itu sendiri. Cocok untuk fungsi bantu yang tidak butuh data dari satu objek tertentu.

class Kalkulator {
  static tambah(a, b) {
    return a + b;
  }
}

console.log(Kalkulator.tambah(2, 3)); // 5

const k = new Kalkulator();
console.log(k.tambah); // undefined, instance tidak punya

Contoh nyata yang sudah sering kamu pakai: Math.max(), Array.from(), dan Number.isInteger() semuanya method static.

Misalkan mahasiswa Universitas Terbuka punya semua sifat Mahasiswa, ditambah program studi. Daripada menulis ulang, pakai extends.

class MahasiswaUT extends Mahasiswa {
  constructor(nama, nim, prodi) {
    super(nama, nim); // jalankan constructor induk dulu
    this.prodi = prodi;
  }

  perkenalan() {
    return `${super.perkenalan()}, prodi ${this.prodi}`;
  }
}

const sari = new MahasiswaUT("Sari", "0533", "Sistem Informasi");
console.log(sari.perkenalan());
// Saya Sari, NIM 0533, prodi Sistem Informasi
console.log(sari instanceof Mahasiswa); // true

super punya dua wajah:

Aturan penting: di class anak, super() harus dipanggil sebelum kamu menyentuh this. Alasannya, objeknya baru benar-benar dibuat oleh constructor induk. Menulis this.prodi sebelum super() langsung menghasilkan ReferenceError.

Menulis ulang perkenalan() di class anak disebut override. Versi anak yang dipakai, tapi lewat super.perkenalan() kamu masih bisa meminjam hasil versi induk lalu menambahinya.

Proyek nyata tidak ditulis dalam satu file raksasa. ES6 Modules membuat tiap file punya ruang lingkup sendiri: variabel di satu file tidak bocor ke file lain kecuali kamu export, dan file lain baru bisa memakainya kalau ia import.

File pertama, math.js:

export const PI = 3.14;

export function keliling(r) {
  return 2 * PI * r;
}

export default function luas(r) {
  return PI * r * r;
}

File kedua, app.js:

import luas, { PI, keliling as kel } from "./math.js";

console.log(luas(10)); // 314
console.log(PI);       // 3.14
console.log(kel(10));  // 62.800000000000004

Bedanya named dan default export:

Beberapa sifat modul yang perlu kamu tahu:

• Modul dimuat sekali lalu di-cache. Kalau lima file meng-import math.js, kodenya tetap jalan satu kali.
• Modul selalu strict mode.
• Di browser, file utama dipanggil dengan <script type="module" src="app.js"></script>. Di Node.js, pakai ekstensi .mjs atau "type": "module" di package.json.
• Karena import/export bersifat statis, bundler seperti Vite atau Webpack bisa membuang fungsi yang tidak pernah di-import. Proses ini disebut tree-shaking.

Catatan untuk latihan di bawah: editor latihan menjalankan satu file saja, jadi tidak ada import. Kamu cukup menulis class-nya langsung.

• Lupa new. Mahasiswa("Dini") melempar TypeError: Class constructor Mahasiswa cannot be invoked without 'new'.
• Memakai this sebelum super(). Di constructor class anak, panggil super(...) di baris pertama.
• Memanggil getter dengan kurung. roda.luas() error karena luas hasilnya angka, bukan fungsi. Tulis roda.luas.
• Memanggil method static dari instance. k.tambah(2, 3) gagal; yang benar Kalkulator.tambah(2, 3).
• Tertukar kurung kurawal saat import. import { luas } from "./math.js" gagal kalau luas diekspor sebagai default. Default diimpor tanpa { }.
• Lupa ekstensi .js pada path import di browser. Browser butuh path lengkap seperti "./math.js".