Cara Membuat Instance Class JavaScript: Panduan Lengkap untuk Pemula

Dalam artikel ini, kita akan membahas cara membuat instance class JavaScript dengan lengkap dan praktis untuk pemula yang baru mengenal konsep pemrograman berorientasi objek (OOP) di JavaScript modern (ES6). Banyak pemula yang sudah paham cara mendefinisikan class, tetapi masih bingung bagaimana menciptakan objek yang benar-benar bisa digunakan dari class tersebut untuk membangun aplikasi nyata. Padahal, konsep instance class JavaScript menjadi fondasi penting dalam memisahkan blueprint dari objek nyata, sehingga kode lebih terstruktur, reusable, dan mudah dirawat. Instance adalah objek yang memiliki properti dan method sesuai blueprint class, dan proses pembuatannya bergantung pada keyword new dan method constructor yang tepat.

Apa Itu Instance dalam JavaScript?

Dalam paradigma pemrograman berorientasi objek, class dapat diibaratkan sebagai cetak biru atau blueprint. Blueprint tidak bisa langsung digunakan sebagai objek; ia hanya berisi deskripsi properti dan method. Untuk membuat objek yang bisa dipakai, kamu perlu membuat instance dari class tersebut.

Instance adalah objek konkret yang telah memiliki nilai properti dan dapat menjalankan method yang didefinisikan oleh class. Sebagai contoh, jika class Car memiliki properti manufacture dan color, maka setiap instance mobil akan memiliki nilai yang berbeda-beda meskipun berasal dari class yang sama.

class Car {
 constructor(manufacture, color) {
 this.manufacture = manufacture;
 this.color = color;
 }
}

const johnCar = new Car("Honda", "Red");
console.log(johnCar.manufacture); // Honda
console.log(johnCar.color); // Red

Pada kode di atas, johnCar adalah salah satu instance dari class Car. Ia memiliki properti manufacture dengan nilai "Honda" dan properti color dengan nilai "Red". Nilai-nilai tersebut dikirimkan melalui constructor saat instance dibuat.

Mengenal Constructor pada Class

Constructor adalah method khusus yang otomatis dipanggil ketika sebuah instance dibuat. Di dalam constructor, kamu bisa menyiapkan properti awal atau melakukan validasi terhadap data yang masuk. Constructor menjadi tempat paling umum untuk mengisi nilai properti instance.

class User {
 constructor(name, email) {
 this.name = name;
 this.email = email;
 this.createdAt = new Date();
 }
}

const firstUser = new User("Budi", "budi@example.com");
console.log(firstUser.name); // Budi
console.log(firstUser.createdAt); // Tanggal saat instance dibuat

Parameter Constructor

Constructor dapat menerima parameter dari luar. Parameter ini biasanya digunakan untuk membedakan setiap instance. Misalnya, dua instance dari class User bisa memiliki nama dan email yang berbeda.

const secondUser = new User("Ani", "ani@example.com");
console.log(secondUser.name); // Ani

Dengan cara ini, kamu tidak perlu menulis ulang struktur objek berulang kali. Cukup definisikan class sekali, lalu panggil constructor setiap kali membutuhkan objek baru.

Cara Membuat Instance Class JavaScript dengan Keyword new

Untuk membuat instance dari class pada JavaScript, kata kunci new wajib digunakan. Syntax dasar pembuatan instance adalah:

const instanceName = new ClassName(argument1, argument2);

Ketika new digunakan, JavaScript melakukan beberapa hal secara berurutan:

1. Membuat objek kosong yang akan menjadi instance.
2. Menghubungkan objek tersebut dengan prototype class.
3. Mengikat nilai this ke objek baru tersebut.
4. Memanggil constructor jika ada.
5. Mengembalikan objek sebagai hasil akhir.

Kesalahan paling umum yang dilakukan pemula adalah lupa menambahkan new saat membuat instance class.

const johnCar = Car("Honda", "Red");
// TypeError: Class constructor cannot be invoked without 'new'

Kode di atas akan menghasilkan error karena class di JavaScript tidak bisa dipanggil seperti fungsi biasa. Hal ini berbeda dengan fungsi biasa yang masih bisa dipanggil tanpa new, meskipun hasilnya mungkin tidak sesuai harapan.

Memahami Error TypeError: Class Constructor Cannot Be Invoked Without New

Error TypeError: Class constructor cannot be invoked without new muncul ketika kamu memanggil class tanpa keyword new. JavaScript memang sengaja dirancang seperti ini untuk mencegah kesalahan pemrograman yang bisa menyebabkan this menunjuk ke objek yang salah.

Pada class, this di dalam constructor harus merujuk ke instance yang sedang dibuat. Jika class dipanggil sebagai fungsi biasa, this akan mengacu pada objek global, atau bahkan menjadi undefined dalam mode strict. Ini akan menghasilkan perilaku yang tidak dapat diprediksi.

Beberapa hal yang perlu diperhatikan saat menghadapi error ini:

• Periksa apakah kamu sudah menuliskan new sebelum nama class.
• Pastikan nama class dikapitalisasi agar mudah membedakan dengan fungsi biasa.
• Jika menggunakan transpiler, periksa hasil kompilasi kode untuk memastikan proses pemanggilan class tetap menggunakan new.

Error ini sebenarnya membantu developer menulis kode yang lebih aman. Dengan memaksa penggunaan new, JavaScript memastikan bahwa objek yang dibuat selalu memiliki hubungan prototype yang benar terhadap class-nya.

Membuat Banyak Instance dari Class yang Sama

Salah satu keuntungan utama menggunakan class adalah kamu bisa membuat banyak instance hanya dengan satu blueprint. Setiap instance memiliki properti yang independent satu sama lain. Mengubah nilai properti pada satu instance tidak akan memengaruhi instance lainnya.

class Car {
 constructor(manufacture, color) {
 this.manufacture = manufacture;
 this.color = color;
 }

 startEngine() {
 console.log(`${this.manufacture} engine started!`);
 }
}

const budiCar = new Car("Honda", "Red");
const aniCar = new Car("Toyota", "Black");
const citraCar = new Car("Suzuki", "White");

console.log(budiCar.manufacture); // Honda
console.log(aniCar.manufacture); // Toyota
console.log(citraCar.manufacture); // Suzuki

Pada contoh di atas, budiCar, aniCar, dan citraCar adalah tiga instance yang berbeda. Ketiganya memiliki method yang sama, tetapi nilai propertinya masing-masing. Ini adalah wujud nyata dari konsep reuse dan modularitas dalam pemrograman berorientasi objek.

Method di dalam Class dan Perilaku this Binding

Selain properti, class juga dapat memiliki method. Method adalah fungsi yang menjadi perilaku dari setiap instance. Ketika method dipanggil melalui instance, nilai this di dalam method akan merujuk pada instance tersebut.

class Car {
 constructor(manufacture, color) {
 this.manufacture = manufacture;
 this.color = color;
 }

 getInfo() {
 return `Mobil ${this.color} produksi ${this.manufacture}`;
 }
}

const johnCar = new Car("Honda", "Red");
console.log(johnCar.getInfo()); // Mobil Red produksi Honda

Berhati-hatilah saat Mengambil Method dari Instance

Jika kamu menyimpan method ke dalam variabel lalu memanggilnya tanpa melalui instance, nilai this bisa berubah. Ini adalah salah satu sumber bug yang sering membingungkan developer.

const getCarInfo = johnCar.getInfo;
console.log(getCarInfo());
// TypeError: Cannot read properties of undefined

Dalam mode strict, this akan menjadi undefined. Untuk mengatasi masalah ini, kamu bisa mengikat method ke instance menggunakan bind di dalam constructor.

class Car {
 constructor(manufacture, color) {
 this.manufacture = manufacture;
 this.color = color;
 this.getInfo = this.getInfo.bind(this);
 }

 getInfo() {
 return `Mobil ${this.color} produksi ${this.manufacture}`;
 }
}

Cara lain adalah menggunakan arrow function sebagai class field, tetapi fitur ini membutuhkan dukungan JavaScript modern atau transpiler. Yang paling penting, pahami bahwa this bersifat dinamis tergantung cara method dipanggil.

Menggunakan instanceof untuk Memeriksa Instance

Untuk memastikan bahwa suatu objek benar-benar merupakan instance dari sebuah class, kamu bisa menggunakan operator instanceof. Operator ini mengembalikan nilai true jika objek memiliki class tersebut di dalam prototype chain-nya.

class Car {}

const johnCar = new Car();

console.log(johnCar instanceof Car); // true
console.log(johnCar instanceof Object); // true

Pemeriksaan seperti ini berguna dalam kode yang menerima input objek dari luar, misalnya pada fungsi validasi data atau pada pengelolaan koleksi objek yang beragam.

function printCarInfo(car) {
 if (!(car instanceof Car)) {
 throw new Error("Parameter harus instance dari Car");
 }

 console.log(car.getInfo());
}

Dengan menggunakan instanceof, kamu bisa melindungi program dari kesalahan tipe data yang dapat menyebabkan error lebih rumit di kemudian hari.

Object Literal vs Instance Class

Sebelum class hadir di ES6, banyak developer JavaScript membuat objek menggunakan object literal. Kedua cara tersebut dapat menghasilkan objek, tetapi memiliki perbedaan fundamental.

• Object literal adalah objek tunggal yang langsung dibuat tanpa blueprint. Jika ingin membuat objek lain dengan bentuk sama, kamu harus menduplikasi kodenya.
• Instance class dibuat dari blueprint yang bisa digunakan berulang kali untuk membuat banyak objek.
• Pada object literal, method biasanya didefinisikan langsung di dalam objek. Pada class, method didefinisikan di prototype sehingga lebih hemat memori.
• Instance class dapat menggunakan fitur pewarisan atau inheritance, sedangkan object literal tidak memiliki mekanisme bawaan yang sama.

const carLiteral = {
 manufacture: "Honda",
 color: "Red",
 startEngine() {
 console.log("Engine started");
 }
};

class Car {
 constructor(manufacture, color) {
 this.manufacture = manufacture;
 this.color = color;
 }

 startEngine() {
 console.log("Engine started");
 }
}

const carInstance = new Car("Honda", "Red");

Object literal sangat cocok untuk objek sederhana yang hanya dibutuhkan satu kali. Namun, jika kamu ingin membuat banyak objek dengan struktur yang sama, class dan instance adalah pilihan yang lebih baik.

Best Practices dalam Membuat Instance Class JavaScript

Supaya kode kamu lebih rapi dan mudah dipelihara, ikuti beberapa best practice berikut:

1. Selalu gunakan huruf kapital di awal nama class agar mudah dibedakan dari fungsi atau variabel biasa.
2. Gunakan konstruktor untuk menginisialisasi properti penting dari instance.
3. Jangan membuat properti di luar constructor jika bisa diinisialisasi di constructor.
4. Hindari memanggil class tanpa new. Meskipun kamu menggunakan helper, pastikan helper tersebut mengembalikan hasil new ClassName().
5. Gunakan method class untuk perilaku, bukan menyimpan fungsi di setiap instance kecuali diperlukan.
6. Pertimbangkan untuk memvalidasi argumen constructor agar objek yang diciptakan selalu dalam kondisi valid.

Best practice tersebut membantu mengurangi bug dan membuat kode lebih mudah diuji menggunakan unit testing.

Debugging Tips Seputar Instance dan Constructor

Ketika kamu menghadapi masalah pada pembuatan instance, coba lakukan langkah-langkah berikut:

• Periksa kembali apakah keyword new benar-benar ada.
• Log nilai instance menggunakan console.log untuk melihat properti yang dimilikinya.
• Gunakan Object.getOwnPropertyNames(instance) untuk melihat daftar properti milik instance.
• Periksa prototype instance menggunakan Object.getPrototypeOf(instance).
• Cek apakah method yang dipanggil benar-benar ada pada class.
• Jika error berkaitan dengan this, perhatikan bagaimana method dipanggil.

const johnCar = new Car("Honda", "Red");

console.log(Object.getOwnPropertyNames(johnCar));
// ["manufacture", "color"]

console.log(Object.getPrototypeOf(johnCar));
// Car { constructor, startEngine, getInfo }

Dengan memeriksa struktur objek, kamu bisa memahami apa yang sudah dimiliki oleh instance dan membedakan antara properti yang berasal dari constructor dengan method yang berasal dari prototype.

Studi Kasus: Vehicle Rental

Untuk memperjelas semua konsep di atas, mari kita buat studi kasus sederhana berupa aplikasi penyewaan kendaraan. Dalam kasus ini, class Vehicle akan menjadi blueprint untuk setiap kendaraan, dan class RentalAgency digunakan untuk mengelola kumpulan kendaraan.

class Vehicle {
 constructor(manufacture, color, type) {
 this.manufacture = manufacture;
 this.color = color;
 this.type = type;
 this.available = true;
 }

 getInfo() {
 return `${this.type} ${this.manufacture} berwarna ${this.color}`;
 }

 rent() {
 if (!this.available) {
 throw new Error(`${this.getInfo()} sudah disewa.`);
 }

 this.available = false;
 return `${this.getInfo()} berhasil disewa.`;
 }

 returnVehicle() {
 this.available = true;
 return `${this.getInfo()} sudah dikembalikan.`;
 }
}

class RentalAgency {
 constructor(name) {
 this.name = name;
 this.vehicles = [];
 }

 addVehicle(vehicle) {
 if (!(vehicle instanceof Vehicle)) {
 throw new Error("Hanya instance Vehicle yang bisa ditambahkan.");
 }

 this.vehicles.push(vehicle);
 }

 rentVehicle(index) {
 const vehicle = this.vehicles[index];
 return vehicle.rent();
 }
}

Sekarang kita dapat membuat beberapa instance kendaraan dan mendaftarkannya ke dalam satu agency.

const hondaCar = new Vehicle("Honda", "Red", "Sedan");
const toyotaCar = new Vehicle("Toyota", "Black", "SUV");
const suzukiCar = new Vehicle("Suzuki", "White", "MPV");

const budiRental = new RentalAgency("Budi Rental");

budiRental.addVehicle(hondaCar);
budiRental.addVehicle(toyotaCar);
budiRental.addVehicle(suzukiCar);

console.log(budiRental.rentVehicle(0));
// Sedan Honda berwarna Red berhasil disewa.

console.log(hondaCar.available);
// false

console.log(hondaCar instanceof Vehicle);
// true

console.log(toyotaCar instanceof Vehicle);
// true

Studi kasus ini menunjukkan bagaimana class dan instance bekerja sama. Setiap kendaraan adalah instance dari Vehicle yang memiliki kondisi available sendiri. Ketika hondaCar disewa, nilai available pada instance tersebut berubah, tetapi tidak mengubah toyotaCar atau suzukiCar.

Class RentalAgency juga menggunakan instanceof untuk memastikan bahwa hanya objek yang benar-benar instance dari Vehicle yang bisa ditambahkan ke dalam daftar. Ini adalah contoh nyata bagaimana cara membuat instance class JavaScript diintegrasikan dalam aplikasi sehari-hari.

Kesimpulan

Membuat instance class JavaScript adalah keterampilan dasar yang wajib dikuasai oleh setiap developer yang ingin bekerja dengan konsep object-oriented. Berikut adalah rangkuman poin penting dari artikel ini:

1. Instance adalah objek konkret yang dibuat dari class dan memiliki properti serta method sesuai blueprint class.
2. Keyword new wajib digunakan saat membuat instance; tanpa new, JavaScript akan memunculkan TypeError.
3. Constructor adalah method khusus yang bertugas menginisialisasi properti awal setiap instance.
4. Setiap instance bersifat independent, sehingga perubahan pada satu instance tidak memengaruhi instance lainnya.
5. Gunakan instanceof untuk memastikan sebuah objek benar-benar dibuat dari class tertentu, dan terapkan best practice agar kode lebih aman dan mudah dipelihara.

Referensi

• MDN Web Docs: JavaScript Classes
• MDN Web Docs: operator new
• MDN Web Docs: instanceof
• Constructor di dalam JavaScript — Infanthree

Hal yang sering ditanyakan seputar Cara Membuat Instance Class JavaScript: Panduan Lengkap untuk Pemula