30 Hari Belajar JavaScript : Hari ke — 16

Halo! Semuanya selamat datang kembali di series 30 hari belajar JavaScript. Kali ini saya akan share kembali beberapa materi pembahasan yang cukup menarik, untuk kita simak 🧀.

Source : Dokumentasi Pribadi

1. Method di Class pada JavaScript
2. Class Inheritance pada JavaScript
3. Super Constructor pada JavaScript
4. Super Method pada JavaScript
5. Getter dan Setter di Class pada JavaScript

Langsung saja, mari kita simak satu per satu 🥗.

Method di Class pada JavaScript

Sama halnya seperti pada constructor function, di dalam class kita juga bisa menambahkan method. Contohnya seperti ini 🥙.

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

      kemampuanKucing() {
               console.log("Makan, Minum, Meow Meow Meow")
      }
 }

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

Method

Ketika kita lihat dengan cara seksama, maka method kemampuanKucing berada pada prototype, hal dikarenakan pada JavaScript modern, ketika kita menambahkan method ke dalam class, maka secara otomatis akan ditambahkan ke dalam prototype 🥪.

Class Inheritance pada JavaScript

Keuntungan lain yang didapatkan ketika kita menggunakan class, adalah kita cukup membuat satu blueprint, maka otomatis dari blueprint tersebut dapat kita cetak menjadi class-class baru. Hal ini dikarenakan class mendukung inherintance atau pewarisan. Sebuah class bisa melakukan pewarisan dari class lainnya dengan menggunakan kata kunci extends. Di JavaScript, class inheritance sama seperti prototype inheritance, hanya bisa memiliki satu parent class 🌮.

Class Inheritance

Pada diagram diatas, kita memiliki sebuah blueprint dari object Kucing, maka properties atau method yang berada pada blueprint tersebut, dapat kita turunkan pada class-class lainnya 🌯.

class Kucing {
      kemampuanKucing(kemampuan) {
               console.log(`Kemampuan kucing yaitu ${kemampuan}`)
      }
}

 class KucingPutih extends Kucing {
       kemampuanKucing(kemampuan) {
                console.log(`Kemampuan kucing yaitu ${kemampuan}`)
        }
  }

  const kucing = new Kucing()
  kucing.kemampuanKucing("Makan, Minum, Meow Meow Meow")

  const kucingputih = new KucingPutih()
  console.log(kucingputih)

Pada kasus ini kita menurunkan method kemampuanKucing, kepada class object yang lain yaitu KucingPutih, jika kita lihat maka method tersebut akan terwarisi (inherintace) pada class baru yaitu KucingPutih, mantap 🥫.

Class Inheritance

Super Constructor pada JavaScript

Sebenarnya Constructor Inheritance hanyalah melakukan eksekusi constructor lain dengan tujuan agar property di constructor lain bisa ditambahkan ke instance object. Dalam kasus ini, jika kita ingin mencapai hasil yang sama, kita bisa menggunakan kata kunci super di dalam constructor. Kata kunci super digunakan untuk memanggil constructor super class. Jika di child class kita membuat constructor, maka kita wajib memanggil parent constructor, walaupun di parent tidak ada constructor 🍖.

class User {
      constructor(id, email) {
                  this.id = id
                  this.email = email
      }

      getUser() {
           console.log(`Your Id is ${this.id} Your Email is ${this.email}`)
      }
}

class NewUser extends User {
      constructor(id, email, role) {
            super(id, email)
                  this.role = role
       }

       getNewUser() {
                 console.log(`Welcome ${this.role} Your Id is ${this.id} Your Email is ${this.email}`)
             }
 }



 const newUserResult = new NewUser(1, "bahrulrozak@uhamka.ac.id", "Student")
 newUserResult.getNewUser()

Super Constructor

Super Method Pada JavaScript

Selain digunakan untuk memanggil constructor milih parent class, kata kunci super juga bisa digunakan untuk mengakses method parent class. Caranya bisa menggunakan super titik nama function nya 🍗.

 class User {
        constructor(id, email) {
               this.id = id
               this.email = email
        }

        getUser() {
             console.log(`Your Id is ${this.id} Your Email is ${this.email}`)
        }
 }

  class NewUser extends User {
        constructor(id, email, role) {
              super(id, email)
              this.role = role
         }

         getNewUser() {
         super.getUser()
               console.log(`Welcome ${this.role} Your Id is ${this.id} Your Email is ${this.email}`)
          }
  }



  const newUserResult = new NewUser(1, "bahrulrozak@uhamka.ac.id", "Student")
  newUserResult.getNewUser()

Super Method

Getter dan Setter di Class pada JavaScript

Pada Class kita juga bisa melakukan Getter dan Setter. Getter dan Setter adalah kemampuan untuk membuat function yang berbeda untuk mengambil data (Getter) dan mengubah data (Setter) pada sebuah property di Object 🥩.

  class User {
        constructor(id, email) {
             this.id = id
             this.email = email
         }

          get userProfile() {
              return `${this.id} ${this.email}`
          }

          set userProfile(value) {
               const userRole = value.split("")
               this.id = userRole[0]
               this.email = userRole[0]
           }
   }

   const result = new User(1, "gmail", "admin")
   console.log(result);

Getter and Setter at 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