Kelas JavaScript: Panduan untuk Pemula
Hai sana, para ahli JavaScript masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia kelas-kelas JavaScript. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya – saya akan menjadi panduan ramah Anda, dan kita akan berjalan langkah demi langkah. Pada akhir tutorial ini, Anda akan dapat membuat kelas Anda sendiri seperti seorang pro!
Apa Itu Kelas JavaScript?
Bayangkan Anda sedang membangun kebun binatang virtual. Anda tentu tidak ingin mendeskripsikan setiap hewan secara individual, kan? Itulah tempat kelas berguna. Kelas adalah seperti blueprint untuk membuat objek. Itu mendefinisikan properti dan perilaku apa saja yang harus dimiliki semua objek jenis itu.
Mari kita mulai dengan contoh sederhana:
class Animal {
constructor(name, species) {
this.name = name;
this.species = species;
}
makeSound() {
console.log("The animal makes a sound");
}
}
Dalam contoh ini, Animal
adalah kelas kita. Itu seperti mengatakan, "Setiap hewan di kebun binatang kita akan memiliki nama, jenis, dan kemampuan untuk membuat suara."
Mendefinisikan Kelas JavaScript
Untuk mendefinisikan kelas di JavaScript, kita gunakan kata kunci class
diikuti dengan nama kelas. Nama kelas biasanya dimulai dengan huruf kapital – itu tidak diperlukan, tetapi itu adalah konvensi umum yang membantu membedakan kelas dari jenis kode lain.
Metode constructor()
Metode constructor()
adalah metode khusus untuk membuat dan menginisialisasi objek yang dibuat dengan kelas. Itu dipanggil secara otomatis ketika kita membuat objek baru dari kelas ini.
class Book {
constructor(title, author, year) {
this.title = title;
this.author = author;
this.year = year;
}
}
Di sini, title
, author
, dan year
adalah properti yang akan dimiliki setiap objek Book
. Kata kunci this
mengacu pada objek yang sedang diciptakan.
Membuat Objek JavaScript
Sekarang kita memiliki kelas kita, mari kita buat beberapa objek!
let myBook = new Book("The Great Gatsby", "F. Scott Fitzgerald", 1925);
console.log(myBook.title); // Keluaran: The Great Gatsby
Kata kunci new
digunakan untuk membuat instance baru dari kelas Book
. Itu seperti mengatakan, "Hey JavaScript, silakan buat buku baru untukku menggunakan blueprint ini!"
Metode Kelas JavaScript
Metode adalah fungsi yang milik kelas. Mereka mendefinisikan perilaku apa saja yang dapat dilakukan objek kelas.
class Dog {
constructor(name) {
this.name = name;
}
bark() {
console.log(`${this.name} says: Woof woof!`);
}
fetch(item) {
console.log(`${this.name} fetches the ${item}`);
}
}
let myDog = new Dog("Buddy");
myDog.bark(); // Keluaran: Buddy says: Woof woof!
myDog.fetch("ball"); // Keluaran: Buddy fetches the ball
Dalam contoh ini, bark()
dan fetch()
adalah metode kelas Dog
. Setiap objek Dog
yang kita buat akan memiliki kemampuan ini.
Jenis Kelas JavaScript
JavaScript mendukung dua jenis utama kelas:
-
Deklarasi: Ini adalah apa yang kita gunakan sejauh ini.
class Rectangle { // body kelas }
-
Ekspresi: Kelas juga dapat didefinisikan dalam ekspresi.
let Rectangle = class { // body kelas };
Kedua-duanya mencapai hasil yang sama, tetapi deklarasi kelas lebih umum dan mudah dibaca.
Hoisting Kelas JavaScript
Tak seperti deklarasi fungsi, deklarasi kelas tidak dihoist. Ini berarti Anda tidak dapat menggunakan kelas sebelum itu didefinisikan dalam kode Anda.
// Ini akan melempar kesalahan
let p = new Rectangle(); // ReferenceError
class Rectangle {}
Selalu definisikan kelas Anda sebelum Anda menggunakannya!
Mode Ketat dengan Kelas
Ini adalah fakta menarik: tubuh kelas selalu dieksekusi dalam mode ketat. Apa artinya itu? Well, itu seperti memiliki guru ketat yang tidak membiarkan Anda melakukan kode kotor. Misalnya:
class StrictClass {
method() {
undeclaredVariable = 5; // Ini akan melempar kesalahan
}
}
Dalam mode ketat, Anda harus mendeklarasikan variabel Anda sebelum menggunakannya. Itu membantu menangkap kesalahan pemrograman umum dan menjaga kode Anda bersih!
Tabel Metode Kelas
Ini adalah tabel praktis dari beberapa metode kelas umum:
Metode | Deskripsi |
---|---|
constructor() |
Menginisialisasi instance baru kelas |
static |
Mendefinisikan metode statis untuk kelas |
extends |
Membuat kelas sebagai anak kelas lain |
super |
Memanggil kontruktur kelas induk |
get |
Mendefinisikan metode pengambilan |
set |
Mendefinisikan metode pengaturan |
Kesimpulan
Selamat! Anda baru saja mengambil langkah pertama ke dunia kelas-kelas JavaScript. Ingat, seperti belajar keterampilan baru, latihan membuat sempurna. Cobalah membuat kelas Anda sendiri – mungkin kelas Car
dengan metode seperti startEngine()
dan drive()
, atau kelas Superhero
dengan metode useSpecialPower()
.
Kelas adalah alat kuat di JavaScript, memungkinkan Anda membuat kode yang terorganisir dan dapat digunakan kembali. Mereka seperti blok Lego pemrograman – sederhana sendiri, tetapi mampu membangun hal yang menakjubkan saat digabungkan.
Terus coding, terus belajar, dan sebelum Anda sadari, Anda akan dapat membuat aplikasi kompleks dengan mudah. Selamat coding, para pengembang masa depan!
Credits: Image by storyset