React.js
  • Roadmap belajar React.js
  • Tahap 1: Dasar-dasar JavaScript
    • Apa itu JavaScript dan kegunaannya
    • Sejarah dan perkembangan JavaScript
    • Apa itu Node.js dan hubungannya dengan JavaScript
    • Cara instal Node.js
    • Cara menjalankan JavaScript di Node.js
    • Variabel dalam JavaScript
    • Tipe data dalam JavaScript
    • Operator dalam JavaScript
    • Truly dan Falsy dalam JavaScript
    • Kondisional dalam JavaScript
    • Looping dalam JavaScript
    • Fungsi dalam JavaScript
    • Parameter dan Return Value dalam JavaScript
    • DOM di JavaScript dan Cara manipulasinya
    • Event Handling dalam JavaScript
    • Try, catch, dan finally dalam JavaScript
    • Callback dalam JavaScript
    • Promise dalam JavaScript
    • Async dan Await dalam JavaScript
  • Tahap 2: JavaScript Lanjutan
    • OOP dalam JavaScript
    • ES6
    • LocalStorage dalam JavaScript
    • FetchAPI dalam JavaScript
  • Tahap 3: Memulai dengan React.js
    • Apa itu React?
    • Konsep Virtual DOM
    • Apa itu JSX?
    • Langkah-langkah Setup Project React.js
    • Apa itu Komponen dalam React?
    • Apa itu Props dan State dalam React?
    • Apa itu Event Handling dalam React?
    • Apa itu Component Lifecycle dalam React?
    • Apa itu Hooks dalam React?
    • Apa itu Custom Hooks dalam React?
  • Tahap 4: React Lanjutan
    • Apa itu Context API dalam React?
    • Apa itu State Management (Redux)?
    • Apa itu Routing di React?
    • Apa itu Dynamic Routing, Private Routing, dan Nested Routing?
    • Cara menulis CSS di React
    • Cara Menggunakan Bootstrap di React
    • Cara Menggunakan Tailwind CSS di React
    • Cara Fetching data dari API di React
    • Cara Menampilkan data dinamis di React
    • Error handling dalam pengambilan data
    • Cara Testing komponen di React
    • End-to-end testing dengan Cypress atau Selenium
Powered by GitBook
On this page
  1. Tahap 2: JavaScript Lanjutan

OOP dalam JavaScript

Apa itu OOP dalam JavaScript?

OOP (Object-Oriented Programming) adalah paradigma pemrograman yang menggunakan "objek" untuk mewakili data dan metode. Objek ini memiliki atribut (properti) dan perilaku (metode). JavaScript mendukung OOP melalui prototipe dan kelas (class).

Konsep Dasar OOP

  1. Class: Sebuah blueprint untuk membuat objek. Class mendefinisikan properti dan metode yang dimiliki oleh objek.

  2. Object: Instance dari class. Objek memiliki state (data) dan behavior (fungsi).

  3. Inheritance: Kemampuan sebuah class untuk mewarisi properti dan metode dari class lain.

  4. Encapsulation: Pembungkusan data dan metode dalam satu unit (class) untuk menjaga akses terhadap data.

  5. Polymorphism: Kemampuan untuk menggunakan metode yang sama pada objek yang berbeda.

Contoh OOP dalam JavaScript

Membuat Class dan Objek

// Mendefinisikan sebuah class
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    // Metode untuk class Person
    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

// Membuat objek dari class Person
const person1 = new Person('Alice', 30);
const person2 = new Person('Bob', 25);

// Memanggil metode pada objek
person1.greet(); // Output: Hello, my name is Alice and I am 30 years old.
person2.greet(); // Output: Hello, my name is Bob and I am 25 years old.

Inheritance (Pewarisan)

// Mendefinisikan class baru yang mewarisi dari Person
class Student extends Person {
    constructor(name, age, studentId) {
        super(name, age); // Memanggil constructor dari parent class
        this.studentId = studentId;
    }

    // Metode baru untuk class Student
    study() {
        console.log(`${this.name} is studying.`);
    }
}

// Membuat objek dari class Student
const student1 = new Student('Charlie', 20, 'S12345');

// Memanggil metode pada objek
student1.greet(); // Output: Hello, my name is Charlie and I am 20 years old.
student1.study(); // Output: Charlie is studying.

Encapsulation

class BankAccount {
    constructor(owner, balance) {
        this.owner = owner;
        this._balance = balance; // Properti dengan akses terbatas
    }

    // Metode untuk mendapatkan saldo
    getBalance() {
        return this._balance;
    }

    // Metode untuk menambah saldo
    deposit(amount) {
        if (amount > 0) {
            this._balance += amount;
        }
    }

    // Metode untuk mengurangi saldo
    withdraw(amount) {
        if (amount > 0 && amount <= this._balance) {
            this._balance -= amount;
        }
    }
}

const account = new BankAccount('Alice', 1000);
console.log(account.getBalance()); // Output: 1000
account.deposit(500);
console.log(account.getBalance()); // Output: 1500
account.withdraw(200);
console.log(account.getBalance()); // Output: 1300

Sumber

OOP dalam JavaScript memungkinkan pengembang untuk membuat kode yang lebih terstruktur, modular, dan mudah dipelihara. Dengan menggunakan konsep seperti class, inheritance, dan encapsulation, Anda dapat membangun aplikasi yang kompleks dengan lebih efisien.

PreviousAsync dan Await dalam JavaScriptNextES6

Last updated 10 months ago

MDN Web Docs - Classes
MDN Web Docs - Object-oriented JavaScript for beginners
JavaScript.info - Classes