30 Hari Belajar JavaScript:Hari ke — 10

Source : Dokumentasi Pribadi

Halo! Semuanya selamat datang kembali di series 30 hari belajar JavaScript. Pada hari ke 10 ini kita akan mempelajari beberapa hal keren berikut ini 😎.

1. Arrow Function pada JavaScript
2. Closure pada JavaScript
3. Object Method pada JavaScript
4. This Keyword pada JavaScript
5. Arrow Function di Object pada JavaScript

Langsung saja kita ke pembahasannya!

Arrow Function pada JavaScript

Pada JavaScript kita dapat membuat function menjadi lebih sederhana dengan menggunakan arrow function. Perlu diketahui bahwa arrow function ini tidak dapat digunakan disemua keadaan. Dinamakan arrow function karena menggunakan tanda => (seperti panah). Walaupun arrow function terlihat menarik, namun ada beberapa kekurangan ketika kita menggunakan arrow function yaitu sebagai berikut 🙄.

Tidak memiliki fitur arguments object

Tidak bisa menggunakan function generator

Tidak bisa mengakses this

Tidak bisa mengakses super

 let userProfile = (id, username) => {
     document.writeln(`Your User ID is ${id} and Your username is ${username}`)
 }

 userProfile(100, "Rozak")

Arrow Function

Jika arrow function hanya berisi satu baris saja atau lebih sederhana, kita bisa membuatnya tanpa menggunakan block 🥱.

 let saySalam = (name) => document.writeln(`Assalamualaikum! ${name}`)

 saySalam("Rozak")

Arrow Function tanpa block

Selain itu arrow function juga dapat mereturn value, return value secara sederhana yaitu mengembalikan nilai, misalkan 5 + 5 maka return valuenya adalah? 10 bukan min? Tepat sekali! 😎. Akan tetapi Jika menggunakan block, maka kita perlu menggunakan kata kunci return. Jika tidak menggunakan block, kita tidak perlu menggunakan kata kunci return 😍.

let totalResult = (firstNumber, secondNumber) => document.writeln(firstNumber + secondNumber);
 
totalResult(5, 5)

Tanpa block tidak perlu kata kunci return

let simpleCalculator = (firstNumber, secondNumber) => {
    let addition = document.writeln(firstNumber + secondNumber)
    return addition
}

simpleCalculator(10, 5)

Menggunakan Block maka gunakan kata kunci return

Arrow function juga bisa digunakan sebagai parameter. Jadi kita juga bisa menggunakan arrow function sebagai parameter di function lain 🙂.

function giveMeName(callback) {
         callback("Budi")
}

giveMeName((name) => document.writeln(`Hello! ${name}`))

Arrow Function as Param

Closure pada JavaScript

Pada materi scope, kita sudah tahu bahwa local scope itu tidak bisa diakses dari luar scopenya. Kemudian apakah ada solusi? 🤔. Tentu! Kita bisa menggunakan closure. Dengan kemampuan closure, kita bisa membuat sebuah function di local scope dan referensi ke data di sekitar local scope tersebut, keluar dari scope nya 🤗.

 function createAdder(value) {
          const user = "James"

          function add(param) {
                   document.writeln(user)
                   return value + param
          }

           return add

  }

   const addTwo = createAdder(2)
   document.writeln(addTwo(10))
   document.writeln(addTwo(20))

Closure

Object Method pada JavaScript

Pada materi tipe data object, kita sudah membahas tentang property pada object. Karena sebenarnya function juga merupakan salah satu tipe data, jadi function pun sebenarnya bisa ditambahkan sebagai property di object Function di object kadang disebut juga sebagai Object Method. Cara pembuatannya pun sama dengan function sebagai value 🤐.

const animals = {
      name: "Tiger",
      voice: function (name) {
              alert(`${name} sound is meow meow`)
      }
 }
 animals.voice("Cat")

Membuat Object dengan method animals sekaligus

 const animals = {
       name: "Tiger"
  }

 animals.voice = function (name) {
         alert(`${name} sound is meow meow meow`)
 }

 animals.voice("Cat")

Menambahkan method ke object animals

This Keyword pada JavaScript

Kata kunci “This” merujuk pada objek yang menjalankan bagian kode saat ini. Kata kunci ini merujuk pada objek yang menjalankan fungsi saat ini. Jika fungsi yang direferensikan adalah fungsi biasa, “this” mereferensikan objek global. Jika fungsi yang direferensikan adalah method dalam sebuah objek, “this” mereferensikan objek itu sendiri. Kata kunci JavaScript “this” adalah salah satu kata kunci yang paling banyak digunakan. Pada awalnya mungkin terlihat rumit, namun setelah kita mulai menggunakan kata kunci “this”, semuanya akan menjadi jelas 😏.

 const person = {
       names: "John",
       saySalam: function (name) {
                 alert(`Assamualaikum ${name}, my name is ${this.names}`)
       }
  }

  person.saySalam("Budi")

Pada contoh di atas “this” akan mereferensikan objectnya sendiri yaitu person (names) karena “this” berada di dalam method. Sehingga code yang dijalankan akan seperti berikut.

this keyword

Arrow Function di Object pada JavaScript

Pada JavaScript, ternyata Arrow function dapat kita gunakan sebagai object 😲. Akan tetapi …….., apa hayo? 😂 Ternyata! Arrow Function tidak bisa kita gunakan untuk mengakses arguments pada object, function generator, kata kunci this dan kata kunci super. Oleh karena itu, gunakanlah selalu #eh maksudnya gunakanlah Arrow Function hanya memang ketika kita tidak butuh fitur-fitur diatas.

  const daftarOlahanNasi = {
        namaOlahan: "Nasi Uduk",
        hargaMenu: "Rp.10.000",
        sayaPesan: (name) => {
                  document.writeln(`${name} memesan ${daftarOlahanNasi.namaOlahan} dengan harga ${daftarOlahanNasi.hargaMenu}`)
        }
   }

  daftarOlahanNasi.sayaPesan("Budi")

Arrow function di object pada JavaScript

Halo! perkenalkan nama saya Bahrul Rozak, saya adalah seorang mahasiswa dari Universitas Muhammadiyah Prof. DR. HAMKA. Selain sebagai mahasiswa saya juga memiliki pengalaman dalam bidang web developer disebuah institusi dan di berikan amanat untuk membuat sebuah aplikasi internal menggunakan bahasa pemrograman JavasScript, PHP dan menggunakan framework PHP seperti Laravel, codeigniter dan Juga Vue Js, tidak hanya membuat aplikasi saya juga diberikan amanat untuk mengembangkan aplikasi yang sudah ada dan selain itu saya jugamemiliki sedikit pengalaman dalam memimpin sebuah team project yang terdiri dari divisi Front End dan Back End sewaktu saya di institusi tersebut. Di sana saya banyak mendapatkan pelajaran yang berharga terutama tentang kolaborasi antar anggota team. Saya memiliki hobi terkait web design dan technical writter aau copy writter seputar teknologi dan sangat menyukai hal-hal yang menambah dan memicu adrenaline karena saya memegang teguh prinsip “more complex, more adrenalie” . Jika ingin mengetahui informasi saya lebih lanjut atau berkolaborasi. Silahkan hubungi saya di alamat email bahrulrozak02@gmail.com atau follow social media saya 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