OOP — atau Pemrograman Berorientasi Objek — dapat membantu Anda mengatur kode dengan cara yang lebih logis dan mudah dikelola, dan dapat mempermudah penggunaan ulang dan perluasan kode Anda di masa mendatang.

Dalam JavaScript, Pemrograman Berorientasi Objek (OOP) adalah paradigma pemrograman yang didasarkan pada konsep "objek", yang merupakan kumpulan data dan fungsi yang bekerja sama untuk melakukan tugas tertentu.

Di OOP, objek dibuat dari "kelas", yang merupakan templat yang menentukan properti dan metode objek yang mereka buat.

Keuntungan OOP

Salah satu keuntungan utama menggunakan OOP dalam JavaScript adalah memungkinkan Anda mengatur kode dengan cara yang lebih logis dan mudah dikelola. Dengan OOP, Anda dapat membuat kelas yang mewakili objek dunia nyata dan menentukan properti dan metode yang dimiliki objek tersebut. Ini membuatnya lebih mudah untuk dipahami dan bekerja dengan kode Anda, terutama karena semakin kompleks.

Manfaat lain dari OOP dalam JavaScript atau pemrograman adalah memungkinkan penggunaan kembali kode dan ekstensibilitas.

Setelah Anda mendefinisikan kelas, Anda dapat membuat objek dari kelas itu sebanyak yang Anda butuhkan. Ini dapat menghemat banyak waktu dan tenaga karena Anda tidak perlu menulis kode yang sama berulang kali untuk setiap objek.

Selain itu, Anda dapat membuat kelas baru yang mewarisi dari kelas yang sudah ada, yang memungkinkan Anda menggunakan kembali dan memperluas fungsionalitas kode yang sudah ada.

Memulai dengan OOP

Untuk memulai OOP dalam JavaScript, Anda harus terlebih dahulu memahami konsep kelas. Dalam JavaScript, kelas adalah templat yang menentukan properti dan metode objek yang dibuatnya. Berikut adalah contoh kelas sederhana yang mewakili seseorang:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hi, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

Untuk membuat objek dari kelas ini, Anda menggunakan newkata kunci diikuti dengan nama kelasnya, seperti ini:

const person1 = new Person("John", 25);
const person2 = new Person("Jane", 30);

console.log(person1.name);  // Output: "John"
console.log(person2.age);  // Output: 30
person1.greet();  // Output: "Hi, my name is John and I am 25 years old."

Selain mendefinisikan kelas dan membuat objek, OOP dalam JavaScript juga memungkinkan pewarisan. Ini berarti Anda dapat membuat kelas baru yang mewarisi properti dan metode kelas yang sudah ada. Misalnya, Anda ingin membuat Studentkelas yang mewakili siswa di sekolah. Kelas Studentdapat mewarisi dari Personkelas, seperti ini:

class Student extends Person {
  constructor(name, age, school) {
    super(name, age);
    this.school = school;
  }
  info() {
    console.log(`${this.name} is ${this.age} years old and goes to ${this.school}.`);
  }
}

Empat Pilar OOPS

Empat pilar pemrograman berorientasi objek (OOP) dalam JavaScript adalah:

Enkapsulasi:

Enkapsulasi mengacu pada gagasan membungkus data dan fungsionalitas bersama di dalam suatu objek. Dalam OOP, objek adalah blok bangunan dasar dari kode Anda, dan setiap objek memiliki properti dan metodenya sendiri. Ini memungkinkan Anda untuk mengatur kode Anda dengan cara yang membuatnya lebih mudah untuk dipahami dan dikerjakan.

Misalnya, Anda dapat membuat Personkelas yang memiliki properti seperti nameand age, dan metode seperti greet()and introduce().

Abstraksi:

Abstraksi adalah proses menyembunyikan detail implementasi objek dan hanya memaparkan informasi yang diperlukan kepada pengguna. Di OOP, Anda dapat menggunakan abstraksi untuk membuat kode Anda lebih modular dan fleksibel.

Misalnya, Anda dapat menentukan kelas abstrak yang menyediakan antarmuka umum untuk sekelompok objek terkait, tanpa menentukan bagaimana objek tersebut diimplementasikan.

Warisan:

Warisan adalah proses pembuatan kelas baru yang mewarisi properti dan metode kelas yang ada. Ini memungkinkan Anda untuk menggunakan kembali dan memperluas kode yang ada, yang dapat menghemat waktu dan tenaga Anda.

Misalnya, jika Anda memiliki Personkelas yang mendefinisikan properti dan metode umum untuk seseorang, Anda bisa membuat Studentkelas yang mewarisi dari Personkelas tersebut dan menambahkan fungsionalitas tambahan.

Polimorfisme:

Polimorfisme adalah kemampuan objek yang berbeda untuk merespons pemanggilan metode yang sama dengan cara yang berbeda. Dalam OOP, polimorfisme memungkinkan Anda membuat objek yang memiliki antarmuka yang sama, tetapi memiliki implementasi yang berbeda. Ini membuat kode Anda lebih fleksibel dan memungkinkan Anda menulis kode yang lebih mudah dikelola dan diperluas.

Misalnya, Anda dapat membuat Shapekelas yang mendefinisikan draw()metode umum, lalu membuat subkelas untuk berbagai jenis bentuk (mis Circle. , Rectangle, dll.) yang masing-masing mengimplementasikan draw()metode dengan caranya sendiri.

Berikut adalah contoh bagaimana pilar OOP ini dapat digunakan dalam program JavaScript:

// Encapsulation: define a Person class with properties and methods
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hi, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

// Inheritance: define a Student class that inherits from the Person class
class Student extends Person {
  constructor(name, age, school) {
    super(name, age);
    this.school = school;
  }
  info() {
    console.log(`${this.name} is ${this.age} years old and goes to ${this.school}.`);
  }
}

// Abstraction: define an abstract Shape class with a common draw() method
abstract class Shape {
  abstract draw(): void;
}

// Polymorphism: define subclasses of Shape that implement the draw() method in their own way
class Circle extends Shape {
  draw() {
    console.log("Drawing a circle...");
  }
}
class Rectangle extends Shape {
  draw() {
    console.log("Drawing a rectangle...");
  }
}

Pemrograman berorientasi objek adalah konsep dasar dalam JavaScript dan dapat sangat meningkatkan struktur dan pengaturan kode Anda. Dengan memahami dan mengimplementasikan konsep seperti enkapsulasi, pewarisan, dan polimorfisme, Anda dapat membuat program yang lebih efisien dan dapat dipelihara.

Apakah Anda seorang pemula atau pengembang berpengalaman, meluangkan waktu untuk menguasai OOP dalam JavaScript akan terbayar dalam jangka panjang. Terima kasih telah membaca, dan selamat coding.

Jika Anda ingin belajar tentang CSS FlexBox secara mendalam, periksa Ebook ini