📛 Pemrograman Berorientasi Objek JavaScript

Pelajari konsep OOP (Object-Oriented Programming) dalam JavaScript untuk membangun aplikasi yang terstruktur

📌 Elements

💡 Fundamental OOP

Pemrograman Berorientasi Objek (OOP) adalah paradigma pemrograman yang menggunakan objek dan kelas untuk mengorganisasi kode menjadi unit yang dapat digunakan kembali.

oop-basics.js
// Object literal
const user = {
  name: 'John',
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

// Constructor function
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log(`Hello, I'm ${this.name}`);
  };
}
const person1 = new Person('Alice', 25);

📝 Penjelasan Detail:

â€ĸ Object literal - Cara sederhana membuat objek
â€ĸ Constructor function - Fungsi khusus untuk membuat objek
â€ĸ this - Referensi ke objek saat ini
â€ĸ new - Operator untuk membuat instance baru
â€ĸ Prototype - Mekanisme pewarisan di JavaScript

🛠ī¸ Features

class-syntax.js
// Class syntax (ES6)
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

// Inheritance
class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}
const dog = new Dog('Rex');
dog.speak(); // Rex barks.

ℹī¸ Browser Support

Class syntax didukung di semua browser modern (Chrome 49+, Firefox 45+, Safari 10+, Edge 13+). Untuk browser lama, gunakan Babel untuk transpilasi.

📊 Basic Tables

Concept Description Example
Encapsulation Mengelompokkan data dan fungsi terkait class User { ... }
Inheritance Pewarisan sifat dari class lain class Admin extends User
Polymorphism Kemampuan objek merespon berbeda method overriding
Abstraction Menyembunyikan detail kompleksitas private methods

📝 Penjelasan Detail:

â€ĸ Encapsulation - Mengelompokkan data dan perilaku terkait
â€ĸ Inheritance - Membuat hierarki class yang dapat diperluas
â€ĸ Polymorphism - Method yang sama memberikan hasil berbeda
â€ĸ Abstraction - Menyembunyikan detail implementasi yang kompleks

🚀 Advanced Table

Feature ES5 ES6+
Class definition function Person() {} class Person {}
Inheritance Person.prototype = Object.create(Animal.prototype) class Person extends Animal
Static methods Person.someMethod = function() {} static someMethod() {}
Private fields Convention: _privateField #privateField
Getters/Setters Object.defineProperty() get name() {}

ℹī¸ Modern JavaScript

ES6+ memperkenalkan sintaks class yang lebih bersih, tetapi di balik layarnya masih menggunakan prototype-based inheritance seperti ES5.

💡 Pro Tips

đŸŽ¯ Best Practices

Gunakan class untuk kompleksitas menengah-tinggi, komposisi daripada pewarisan untuk reuse code, dan pertahankan SRP (Single Responsibility Principle).

best-practices.js
// ✅ Good - Composition over inheritance
class Walker {
  walk() { console.log('Walking...'); }
}

class Talker {
  talk() { console.log('Hello!'); }
}

class Human {
  constructor() {
    this.walker = new Walker();
    this.talker = new Talker();
  }
}

// ❌ Avoid - Deep inheritance chains
class A { ... }
class B extends A { ... }
class C extends B { ... }
class D extends C { ... }

📝 Penjelasan Detail:

â€ĸ Komposisi > Pewarisan - Lebih fleksibel dan mudah dikelola
â€ĸ Single Responsibility - Setiap class harus punya satu tanggung jawab
â€ĸ Open/Closed Principle - Terbuka untuk ekstensi, tertutup untuk modifikasi
â€ĸ Law of Demeter - Minimalkan ketergantungan antar class
â€ĸ SOLID Principles - Pedoman desain OOP yang baik

🌐 Info

📚 Referensi Tambahan

Pelajari lebih lanjut tentang OOP JavaScript di MDN Web Docs atau buku "JavaScript: The Good Parts" oleh Douglas Crockford.

⚙ī¸ Modern JavaScript

ES2022 memperkenalkan fitur class fields dan private methods yang membuat OOP di JavaScript semakin matang dan powerful.