30 Hari Belajar JavaScript : Hari ke — 15

Halo! semuanya selamat datang kembali di series 30 hari belajar JavaScript. Pada module hari ke 15, kita akan mempelajari beberapa konsep JavaScript berikut: 🍟

1. Mengenal Prototype pada JavaScript
2. Prototype Inheritance pada JavaScript
3. Keyword Class pada JavaScript
4. Constructor di Class pada JavaScript
5. Property di Class pada JavaScript

Tanpa berlama-lama, mari kita gas kan 🍕

Mengenal Prototype pada JavaScript

Pada pembahasan-pembahasan sebelumnya, kita sudah mengetahui secara singkat bahwa JavaScript merupakan bahasa protype based. Namun prototype based itu apaan sih? 🍔. Nah prototype based ini merupakan suatu mekanisme yang cukup unique dari JavaScript. Bagaimana tidak unique? 🍿

Expresi para pembaca saat ini

Ketika kita membuat sebuah object dari constructor function, atau bahasa kerennya yaitu object instance. Semua property yang berada di dalam object instance tersebut yakni value dan methodnya, akan secara otomatis membuat prototype pada object instance nya atau bisa kita sebut sebagai prototype inheritance 🧂.

Misalkan, kita membuat constructor function yaitu Kucing, maka kita secara tidak langsung akan membuat prototype yaitu, Kucing.prototype🥓.

 function Kucing() {

 }

 const kucingPutih = new Kucing();
 console.info(kucingPutih)

Prototype

Kemudian untuk mengakses prototype tersebut kita bisa menggunakan keyword __proto__ 🥚.

 function Kucing() {
          this.warnaBulu = "Putih"
 }

 const kucingPutih = new Kucing();
 console.log(kucingPutih.__proto__);

Memang mantap

Kemudian, bisakah kita menambahkan nilai ke dalam prototype? Tentu saja bisa dengan cara namaObject.prototype.propertyBaru 🍳.

 function Kucing() {
          this.warnaBulu = "Putih"
 }

 Kucing.prototype.kemampuanKucing = function () {
        console.log("Meow Meow")
 }

 const kucingPutih = new Kucing();
 console.info(kucingPutih)

Adding value to prototype

Expresi pembaca saat ini

Prototype Inheritance

Pada bahasan di atas, kita sudah sedikit membahas prototype inheritance. Namun mari kita bahas lebih detail disini. kita sudah tahu, bahwa prototype selalu memiliki parent, artinya dia adalah turunan, parent tertinggi adalah Object prototype. Pertanyaannya bagaimana jika kita ingin melakukan inheritance ke Prototype lain? 🧇.

Hal ini juga bisa dilakukan, namun agak sedikit tricky, karena hal ini, sebenarnya untuk JavaScript modern, tidak direkomendasikan lagi praktek OOP menggunakan Prototype, karena di ES6 sudah dikenalkan kata kunci class yang akan kita bahas nanti 🥞.

 function BapakRT(name) {
          this.name = name
 }

 function Warga(name) {
          this.name = name
 }

 Warga.prototype = Object.create(BapakRT.prototype)
 Warga.prototype.sayHello = function (name) {
            console.log(`Assalamualaikum! pak RT ${BapakRT} saya ${this.name} apa kabarnya?`);
 }
 BapakRT.prototype.sayHello = function (name) {
            console.log(`Waalaikumussalam, alhamdulillah saya baik-baik saja, nak ${this.name}`);
 }

 const bapakRT = new BapakRT("Budi");
 bapakRT.sayHello("John")

Prototype Inheritance

Keyword Class pada JavaScript

Membuat class dengan constructor function, merupakan hal yang sangat-sangat tricky. Namun semenjak kehadiran JavaScript versi modern, untuk membuat class pada JavaScript, kita bisa menggunakan kata kunci class 🧈.

Oke

class Kucing {

}

const kucingPutih = new Kucing()
console.info(kucingPutih)

Class

Constructor di Class pada JavaScript

Karena bentuk constructor function mirip dengan function, jadi kita bisa menambah parameter pada constructor function, lantas bagaimana dengan class? Pada class juga kita bisa menambah constructor, dimana dengan menggunakan constructor, kita juga bisa menambah parameter saat pertama kali membuat object nya. Untuk membuat constructor di class, kita bisa menggunakan kata kunci constructor 🥐.

 class Kucing {
       constructor(warnaBulu) {

       }
}

const kucingPutih = new Kucing("Putih")
console.info(kucingPutih)

Property di Class pada JavaScript

Sama seperti pada constructor function, dalam class pun kita bisa menambahkan property. Karena hasil akhirnya adalah sebuah object, jadi menambahkan property di class bisa juga dilakukan di instance object 🥨.

class Kucing {
      constructor(warnaBulu) {
        this.warnaBulu = warnaBulu
    }
}

const kucingPutih = new Kucing("Putih")
console.info(kucingPutih)

Property

Dengan adanya keyword class, ini sangat membantu kita, ketika ingin membuat object baru dari class nya (instance) sebanyak-banyaknya, tanpa harus melakukan hal yang sama berulang-ulang 🥯.

class Kucing {
      constructor(warnaBulu) {
            this.warnaBulu = warnaBulu
      }
}

const kucingPutih = new Kucing("Putih")
console.info(kucingPutih)

const kucingOrange = new Kucing("Orange")
console.info(kucingOrange)

const kucingHitam = new Kucing("Hitam")
console.info(kucingHitam)

Make many instance with class

Halo! Saya Bahrul Rozak, seorang mahasiswa dari Universitas Muhammadiyah Prof. DR. HAMKA. Saya memiliki pengalaman sebagai web developer di sebuah institusi dan telah membuat serta mengembangkan aplikasi internal menggunakan bahasa pemrograman JavasScript dan PHP, serta menggunakan framework PHP seperti Laravel, codeigniter, dan Vue Js. Saya juga pernah memimpin sebuah tim proyek yang terdiri dari divisi Front End dan Back End, di sana saya belajar banyak hal, terutama tentang kolaborasi dalam tim. Selain itu, saya memiliki hobi terkait desain web dan menulis artikel tentang teknologi. Saya sangat suka tantangan yang memacu adrenalin karena saya percaya bahwa more complex more adrenaline. Jika Anda ingin tahu lebih banyak tentang saya atau ingin berkolaborasi, silakan hubungi saya melalui email di bahrulrozak02@gmail.com atau follow media sosial saya untuk mendapatkan insight terbaru dalam perduniawian di.

Instagram : https://instagram.com/rozak.dexamethasone

Linkedin : https://linkedin.com/in/bahrul-rozak

Stackoverflow : https://stackoverflow.com/users/20835639/bahrul-rozak

Github : https://github.com/Bahrul-Rozak