Pengantar

Dalam artikel ini, saya menjelaskan tentang objek, prototipe, dan kelas, elemen-elemen penting yang membentuk anatomi Pemrograman Berorientasi Objek (OOP) di JavaScript.

Objek dalam JavaScript

Objek dalam JavaScript adalah entitas dasar yang dapat menyimpan koleksi pasangan kunci-nilai. Kunci biasanya berupa string (atau simbol), dan nilai dapat berupa tipe data JavaScript yang valid, termasuk angka, string, boolean, fungsi, array, dan objek lainnya. Mereka adalah struktur data yang kuat yang dapat mewakili fenomena kompleks dunia nyata dalam kode kita.

Membuat Objek

Membuat objek dalam JavaScript dapat dilakukan dengan beberapa cara. Metode paling umum adalah menggunakan literal objek. Literal objek didefinisikan di dalam tanda kurung kurawal {}.

let car = {
    make: "Tesla",
    model: "Model 3",
    color: "red",
    drive: function() {
        console.log("The car is driving");
    }
};

Cara lain adalah menggunakan konstruktor new Object().

let car = new Object();
car.make = "Tesla";
car.model = "Model 3";
car.color = "red";
car.drive = function() {
    console.log("The car is driving");
};

Properti dan Metode Objek

Dalam objek JavaScript, kunci-kunci dikenal sebagai properti dan nilainya sebagai nilai properti yang sesuai. Jika nilai properti adalah fungsi, kita sering menyebutnya sebagai metode. Properti dapat diakses dan dimodifikasi menggunakan notasi titik atau notasi kurung siku.

// Accessing properties
console.log(car.make);  // Output: "Tesla"
console.log(car["color"]);  // Output: "red"

// Modifying properties
car.make = "BMW";
car["color"] = "blue";

// Calling methods
car.drive();  // Output: "The car is driving"

Objek dan Referensi

Dalam JavaScript, objek adalah tipe referensi, yang berarti ketika kita menugaskan sebuah objek ke variabel baru, kita tidak membuat salinan baru dari objek tersebut, tetapi membuat referensi baru ke objek yang sama.

let car1 = car;
car1.model = "Model S";
console.log(car.model);  // Output: "Model S"

Meskipun kita mengubah car1.model, car.model juga berubah karena keduanya menunjuk ke objek yang sama.

Objek Bawaan

JavaScript menyediakan sejumlah objek bawaan yang kaya, seperti Array, Date, dan Math, yang menawarkan berbagai fungsionalitas. Objek-objek ini memiliki properti dan metode yang dapat digunakan untuk memanipulasi data yang mereka simpan atau melakukan operasi kompleks.

let now = new Date();
console.log(now.getFullYear());  // Output: The current year

let numbers = [1, 2, 3];
console.log(numbers.length);  // Output: 3

console.log(Math.sqrt(16));  // Output: 4

Prototipe dalam JavaScript

Setiap objek dalam JavaScript memiliki properti tersembunyi yang disebut prototipe, yang merupakan objek lain yang mewarisi properti dan metode dari objek tersebut. Objek prototipe ini sendiri memiliki prototipe sendiri, membentuk rantai hingga mencapai objek dengan prototipe null, yang merupakan akhir rantai prototipe.

Pewarisan Berbasis Prototipe

Dalam JavaScript, pewarisan dicapai melalui prototipe. Ketika kita mencoba mengakses properti atau metode pada suatu objek, JavaScript akan mencari objek itu sendiri terlebih dahulu. Jika tidak ditemukan di sana, JavaScript akan mencari di rantai prototipe sampai menemukan properti yang diminta atau mencapai akhir rantai.

Berikut adalah contohnya:

let vehicle = {
    wheels: 4,
    start: function() {
        console.log("The engine is starting");
    }
};

let car = Object.create(vehicle);
console.log(car.wheels);  // Output: 4
car.start();  // Output: "The engine is starting"

Dalam kasus ini, car tidak memiliki properti wheels atau metode start sendiri. Tetapi ia dapat mengakses properti dan metode ini melalui prototipenya, yaitu vehicle.

Rantai Prototipe

Rantai prototipe adalah istilah yang mengacu pada rantai objek yang terhubung melalui properti prototipe. Rantai dimulai dari sebuah objek tertentu, bergerak ke prototipenya, dan melanjutkan ke prototipe-prototipe hingga mencapai null.

let vehicle = {
    wheels: 4
};

let car = Object.create(vehicle);
car.make = "Tesla";

let myCar = Object.create(car);
myCar.owner = "John Doe";

console.log(myCar.wheels);  // Output: 4
console.log(myCar.make);  // Output: "Tesla"
console.log(myCar.owner);  // Output: "John Doe"

Dalam kasus ini, objek myCar mewarisi properti dari car dan vehicle melalui rantai prototipe.

Properti Proto

Prototipe suatu objek dapat diakses melalui properti __proto__. Properti ini tidak disarankan untuk digunakan dalam kode produksi karena tidak didukung di semua lingkungan JavaScript dan telah usang digantikan oleh Object.getPrototypeOf().

console.log(car.__proto__ === vehicle);  // Output: true
console.log(Object.getPrototypeOf(car) === vehicle);  // Output: true

Prototipe Bawaan

Konstruktor JavaScript bawaan seperti Array, Object, Function, dan lainnya memiliki prototipe yang mencakup metode dan properti yang relevan dengan instance mereka. Misalnya, Array.prototype mencakup metode seperti push(), pop(), map(), filter(), dan banyak lainnya.

let arr = [1, 2, 3];
console.log(arr.__proto__ === Array.prototype);  // Output: true

Kelas dalam JavaScript

Dalam JavaScript, kelas adalah jenis fungsi yang diperkenalkan di ES6 untuk menawarkan cara yang lebih mirip dengan penulisan tradisional untuk mendefinisikan fungsi konstruktor dan metode prototipe. Mereka menyediakan sintaks yang bersih dan elegan untuk membuat objek dan menangani pewarisan.

Membuat Kelas

Untuk mendefinisikan sebuah kelas, kita menggunakan kata kunci class diikuti dengan nama kelas tersebut. Di dalam kelas, kita dapat mendefinisikan fungsi constructor, yang merupakan metode khusus untuk membuat dan menginisialisasi objek yang dibuat dengan kelas tersebut.

class Car {
    constructor(make, model) {
        this.make = make;
        this.model = model;
    }
    startEngine() {
        console.log(`${this.make} ${this.model}'s engine is starting`);
    }
}

let myCar = new Car("Tesla", "Model 3");
myCar.startEngine();  // Output: "Tesla Model 3's engine is starting"

Pewarisan Kelas

Pewarisan dapat diimplementasikan dalam kelas menggunakan kata kunci extends. Sebuah kelas yang dibuat dengan extends mewarisi semua metode dari kelas induk.

class ElectricCar extends Car {
    constructor(make, model, batteryCapacity) {
        super(make, model);
        this.batteryCapacity = batteryCapacity;
    }
    chargeBattery() {
        console.log(`${this.make} ${this.model}'s battery is charging`);
    }
}

let myElectricCar = new ElectricCar("Tesla", "Model S", 100);
myElectricCar.startEngine();  // Output: "Tesla Model S's engine is starting"
myElectricCar.chargeBattery();  // Output: "Tesla Model S's battery is charging"

Properti dan Metode Kelas Pribadi dan Publik

Secara default, semua properti dan metode dalam sebuah kelas JavaScript adalah publik. Namun, ES2020 memperkenalkan cara untuk membuat properti kelas pribadi menggunakan awalan tanda pagar #.

class Car {
    #speed = 0;
    accelerate() {
        this.#speed += 10;
        console.log(`Speed: ${this.#speed}`);
    }
}

let myCar = new Car();
myCar.accelerate();  // Output: "Speed: 10"
console.log(myCar.#speed);  // Throws an error: Property '#speed' is private and only accessible within class 'Car'.

Metode dan Properti Statis

Metode dan properti statis adalah metode dan properti yang dimiliki oleh kelas itu sendiri, bukan instance dari kelas tersebut. Anda dapat mendeklarasikan metode atau properti statis menggunakan kata kunci static.

class Car {
    static numberOfWheels = 4;
    static displayNumberOfWheels() {
        console.log(`A car typically has ${this.numberOfWheels} wheels`);
    }
}

Car.displayNumberOfWheels();  // Output: "A car typically has 4 wheels"