Object-Oriented Programming (OOP) di JavaScript: Konsep dan Implementasi

Anda merasa bingung bagaimana caranya membuat kode JavaScript yang rapi, mudah dipahami, dan tidak berantakan saat proyek mulai membesar? Jika iya, Anda tidak sendirian. Banyak pemula merasa frustrasi ketika fungsi dan variabel berantakan di mana-mana, hingga sulit mengelola logika program. Di sinilah Object-Oriented Programming (OOP) hadir sebagai solusi.

Dengan memahami OOP, Anda bisa menulis kode yang lebih terstruktur, mudah dikelola, dan siap untuk pengembangan jangka panjang—bahkan untuk aplikasi skala besar. Artikel ini akan membimbing Anda memahami konsep OOP di JavaScript mulai dari dasar hingga contoh implementasi nyata.

Setelah membaca artikel ini, Anda akan mempelajari:

• Apa itu OOP dan mengapa penting dalam JavaScript
• Konsep utama OOP: Class, Object, Encapsulation, Inheritance, Polymorphism
• Cara mengimplementasikan OOP menggunakan class di JavaScript modern (ES6)
• Contoh kode nyata dan mudah dipahami

Apa Itu OOP di JavaScript?

Object-Oriented Programming (OOP) adalah paradigma pemrograman yang berfokus pada pembuatan objek yang berisi data (property) dan fungsi (method).
Tujuan utamanya adalah membuat kode lebih modular, reusable, dan mudah dipelihara.

Di JavaScript modern (ES6 ke atas), OOP dapat diterapkan menggunakan class dan object, yang membuat sintaksnya lebih mudah dibaca seperti bahasa pemrograman lain (Java, C#, Python).

Konsep Dasar OOP di JavaScript

1. Class dan Object

• Class adalah blueprint atau cetakan.
• Object adalah hasil dari class tersebut.

class Mobil {
  constructor(merek, warna) {
    this.merek = merek;
    this.warna = warna;
  }

  info() {
    return `Mobil ini adalah ${this.merek} berwarna ${this.warna}`;
  }
}

const mobil1 = new Mobil("Toyota", "Merah");
console.log(mobil1.info());

class Mobil {
  constructor(merek, warna) {
    this.merek = merek;
    this.warna = warna;
  }

  info() {
    return `Mobil ini adalah ${this.merek} berwarna ${this.warna}`;
  }
}

const mobil1 = new Mobil("Toyota", "Merah");
console.log(mobil1.info());

2. Encapsulation (Enkapsulasi)

Menyembunyikan detail internal dan hanya menyediakan akses melalui method tertentu.

class BankAccount {
  #saldo = 0; // private property

  deposit(jumlah) {
    this.#saldo += jumlah;
  }

  getSaldo() {
    return `Saldo Anda: Rp${this.#saldo}`;
  }
}

const akun = new BankAccount();
akun.deposit(500000);
console.log(akun.getSaldo());

class BankAccount {
  #saldo = 0; // private property

  deposit(jumlah) {
    this.#saldo += jumlah;
  }

  getSaldo() {
    return `Saldo Anda: Rp${this.#saldo}`;
  }
}

const akun = new BankAccount();
akun.deposit(500000);
console.log(akun.getSaldo());

3. Inheritance (Pewarisan)

Class dapat mewarisi fitur dari class lain menggunakan extends.

class Hewan {
  constructor(nama) {
    this.nama = nama;
  }

  suara() {
    return "Hewan bersuara...";
  }
}

class Kucing extends Hewan {
  suara() {
    return "Meong!";
  }
}

const kucing = new Kucing("Kitty");
console.log(kucing.suara());

class Hewan {
  constructor(nama) {
    this.nama = nama;
  }

  suara() {
    return "Hewan bersuara...";
  }
}

class Kucing extends Hewan {
  suara() {
    return "Meong!";
  }
}

const kucing = new Kucing("Kitty");
console.log(kucing.suara());

4. Polymorphism (Polimorfisme)

Method yang sama, perilaku berbeda.

class Burung {
  gerak() {
    return "Terbang";
  }
}

class Ikan {
  gerak() {
    return "Berenang";
  }
}

function lihatGerak(makhluk) {
  console.log(makhluk.gerak());
}

lihatGerak(new Burung());
lihatGerak(new Ikan());

class Burung {
  gerak() {
    return "Terbang";
  }
}

class Ikan {
  gerak() {
    return "Berenang";
  }
}

function lihatGerak(makhluk) {
  console.log(makhluk.gerak());
}

lihatGerak(new Burung());
lihatGerak(new Ikan());

Implementasi OOP dalam Proyek Nyata

• Studi Kasus: Sistem Manajemen Produk

class Produk {
  constructor(nama, harga) {
    this.nama = nama;
    this.harga = harga;
  }

  info() {
    return `${this.nama} - Rp${this.harga}`;
  }
}

class Pakaian extends Produk {
  constructor(nama, harga, ukuran) {
    super(nama, harga);
    this.ukuran = ukuran;
  }

  info() {
    return `${this.nama} (Ukuran: ${this.ukuran}) - Rp${this.harga}`;
  }
}

const baju = new Pakaian("Kaos Polos", 75000, "L");
console.log(baju.info());

class Produk {
  constructor(nama, harga) {
    this.nama = nama;
    this.harga = harga;
  }

  info() {
    return `${this.nama} - Rp${this.harga}`;
  }
}

class Pakaian extends Produk {
  constructor(nama, harga, ukuran) {
    super(nama, harga);
    this.ukuran = ukuran;
  }

  info() {
    return `${this.nama} (Ukuran: ${this.ukuran}) - Rp${this.harga}`;
  }
}

const baju = new Pakaian("Kaos Polos", 75000, "L");
console.log(baju.info());

Dengan OOP, Anda bisa mengelola produk, pengguna, transaksi, dan fitur lainnya secara modular.

Anda sudah memahami dasar OOP di JavaScript—mulai dari konsep hingga implementasi. Dengan kemampuan ini, Anda siap menulis kode yang jauh lebih rapi, terstruktur, dan profesional.

Ingin melangkah lebih jauh dalam JavaScript?
Baca juga: “Asynchronous JavaScript: Memahami Callback, Promise, dan Async/Await”