INI ADALAH LINK JavaScript Study IV : https://progate.com/es6/study/4/
Class JavaScript
Dalam pelajaran ini, Anda akan mempelajari tentang class. Class adalah fitur baru dari JavaScript ES6,
dan merupakan pengetahuan yang penting sebelum Anda mulai mempelajari library JavaScript (React, Vue.js, dll).
Review Object
Me-review Object
Sebelum kita belajar tentang class, mari kita review objects yang telah dibahas dalam JavaScript (ES6) Study Ⅱ. Objects adalah struktur yang memungkinkan Anda untuk mengelola data dengan pasangan properti dan nilai.
Review Object
Object dan Function (1)
Nilai object juga dapat berupa function. Cara menuliskannya ditunjukkan gambar dibawah ini. Selain itu, cara untuk memanggil function, tulis constantName.propertyName(). Perhatikan bahwa Anda memerlukan tanda () setelah nama property untuk mengindikasikan bahwa nilai adalah function.
Review Object
Object dan Function (2)
Mari kita lihat contohnya! Digambar kiri bawah, arrow function digunakan untuk memanggil greet property milik object user. Dengan menuliskan user.greet(), Anda dapat memanggil function tersebut dan mem-print nilainya ke console.
Ayo terapkan ilmu yang baru dipelajari!
CONTOH KODINGAN:
// Definisikan constant animal
const animal = {
name: “Leo”,
age: 3,
greet: () => {
console.log(“Halo”);
}
};
// Print property name milik constant animal
console.log(animal.name);
// Panggil greet method property milik animal
animal.greet();
Apa yang dimaksud dengan Class?
Membuat Object
secara Efisien
Object, seperti yang kita buat sebelumnya, biasanya digunakan saat membuat situs web. Misalnya, layanan web yang memerlukan fungsi log in, seperti Progate, menggunakan object untuk membuat data pengguna. Bayangkan jika kita harus membuat ini dari awal setiap permintaan login, tidak efisien kan? Oleh sebab itu, Anda akan mempelajari cara membuat data yang serupa dengan mudah.
Apa yang dimaksud dengan Class?
Blueprint Object
Untuk membuat object secara efisien, kita harus membuat “blueprint” (kerangka) object tersebut. Misalnya, saat membuat data pengguna, data dapat dibuat dan disusun berdasarkan “blueprint pengguna” yang telah disiapkan sebelumnya.
Apa yang dimaksud dengan Class?
Class
Blueprint yang disebut dalam slide sebelumnya disebut class dalam JavaScript. Dengan menulis class ClassName, seperti yang ditunjukkan di bawah ini, class baru dapat dibuat. Nama class biasanya diawali dengan huruf kapital.
Ayo terapkan ilmu yang baru dipelajari!
CONTOH KODINGAN:
// Definisikan class Animal
class Animal {
}
Membuat Instance
Membuat Instance
Karena kita sudah menyiapkan blueprint object, mari kita coba untuk membuat object dari blueprint tersebut. Untuk membuat object dari class, tulis new ClassName(), seperti yang ditunjukkan dibawah ini. Object dibuat dari class yang disebut instance. Instance dari class “Animal” disebut “instance Animal”.
Membuat Instance
Memeriksa Instance
Dipelajaran ini, mari kita print instance Animal yang dibuat dari class Animal ke console, untuk memastikan bahwa instance adalah object kosong seperti yang ditunjukkan di bawah ini. Jangan khawatir tentang nama class “Animal” yang di-print sebelum tanda kurung kurawal {}.
Ayo terapkan ilmu yang baru dipelajari!
CONTOH KODINGAN:
class Animal {
}
// Tetapkan instance class Animal ke constant animal
const animal = new Animal();
// Tampilkan nilai milik constant animal
console.log(animal);
Constructor (1)
Menambahkan Konten
ke Blueprint
Sejauh ini, Anda telah mempelajari cara membuat instance berdasarkan blueprint (class). Namun, karena kita belum menambahkan konten apa pun ke class, blueprint ini masih kosong. Selanjutnya, kita akan menambahkan konten ke blueprint.
Constructor (1)
Apa yang dimaksud dengan Constructor?
Class sering memiliki method khusus yang disebut constructor. constructor digunakan untuk memberikan nilai awal ke instance baru. Untuk menambahkan constructor ke class, tulis constructor() { } di dalam tanda kurung kurawal {} class Animal
Constructor (1)
Code di Dalam Constructor
Seperti yang ditunjukkan digambar dibawah ini, instruksi dan code juga dapat ditulis didalam {} constructor. Code yang ditulis disana akan dipanggil saat instance dibuat. Hal penting untuk diingat adalah code akan dipanggil untuk setiap instance. Karena new Animal()
Constructor (2)
Menambahkan
Property & Nilai
Dalam constructor, mari kita tambahkan informasi terkait instance yang dibuat. Untuk menambahkan property dan nilai kedalam constructor, tulis this.property = nilai.
Constructor (2)
Instance dan Property
Seperti yang dijelaskan di awal, instance adalah object. Jadi, dengan menulis instance.property, nilai yang ditambahkan dalam constructor dapat digunakan diluar class tersebut.
Constructor (3)
Mengubah Nilai untuk Semua Instance
Dengan menambahkan constructor, instance baru akan diberi nilai awal saat dibuat. Namun, code di bawah ini akan memberi semua instance nilai yang sama, yakni, “Leo” dan “3”, saat instance tersebut dibuat. Mari kita pelajari cara mengubah nilai untuk setiap instance secara bebas di slide berikutnya!
Constructor (3)
Argument Constructor (1)
Sama seperti function, constructor juga dapat menerima argument. Dengan menulis nama argument di dalam tanda kurung () setelah constructor, argument yang ditetapkan dapat digunakan didalam proses pemanggilan constructor terkait.
Method (1)
Apa yang dimaksud
dengan Method?
Function yang berada didalam sebuah class disebut Method. Method bisa dibilang seperti “aksi” milik sebuah instance. Jika data seperti name dan age dapat ditambahkan menggunakan property, method dapat mengekspresikan seluruh kumpulan instruksi seperti memberikan salam dan menghitung nilai.
Method (1)
Mendefinisikan Method
Method dideklarasikan dalam class dengan menulis methodName() { }.
Sama seperti function, code dalam method harus dituliskan didalam {}.
Method (1)
Cara menggunakan Method
Method dipanggil untuk instance yang dibuat didalam class. Misalnya, dengan menuliskan instance.methodName() seperti contoh di bawah ini, method greet didalam object Animal, akan dipanggil dan dijalankan untuk instance animal.
DLL
Bukan Selebf Blog 