30 Hari Belajar JavaScript : Hari ke — 9

Source : Dokumentasi Pribadi

Halo semuanya! Selamat datang kembali di series 30 hari belajar JavaScript! Pada hari ke 9 ini kita akan mempelajari beberapa hal menarik berikut, hmm kira-kira apa saja? Yuk simak! 🍔

1. Anonymous Function pada JavaScript
2. Function di dalam Function pada JavaScript
3. Scope pada JavaScript
4. Recursive Function pada JavaScript
5. Function Generator pada JavaScript

Langsung saja kita masuk ke pembahasannya!

Anonymous Function pada JavaScript

Pada materi-materi function sebelumnya, untuk membuat function kita harus memberikan nama functionnya. Namun semenjak hadirnya JavaScript versi modern, maka untuk membuat function kita tidak harus menggunakan nama function. Function tanpa nama ini disebut sebagai anonymous function. Kita bisa buat anonymous function dalam sebuah variable atau bisa juga kita buat ketika mengisi parameter.

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

 saySalam("John")

Anonymous Function dalam sebuah variabel

function getResult(product) {
         product(100);
}

getResult(function (totalProduct) {
         document.writeln(`Total Product is ${totalProduct}`);
 })

Anonymous Function dalam sebuah parameter

Function di dalam Function pada JavaScript

Pada JavaScript untuk membuat function tidak ada batasan. Kita bisa dengan sesuka hati membuat function di manapun kita mau. Tidak hanya itu di JavaScript kita juga dapat membuat function di dalam function atau istilah kerennya mah inner function. Akan tetapi inner function ini hanya hanya bisa diakses di tempat kita membuat function nya, tidak bisa diakses dari luar function nya 🥗.

let outer = function () {
            document.writeln(`Outer Function`)

            let inner = function () {
                        console.log(`Inner Function`);
             }

             inner()
 }

 outer()
 inner()

Hanya outer function yang bisa diakses dari luar function, sedangkan inner tidak bisa

Scope pada JavaScript

Saat kita membuat function, otomatis dan secara default maka kita akan membuat local scope untuk function tersebut. Scope secara sederhana adalah sebuah area yang dapat di akses data atau nilainya. Scope dibagi menjadi dua yaitu local scope dan global scope. Data di global scope bisa diakses dari local scope, namun data di local scope hanya bisa di akses dilocal scope tersebut atau di scope local dibawahnya (dalam kasus function dalam function) atau inner function yang sudah kita bahas sebelumnya 🍥.

 let fullName = "Bahrul Rozak";

 function sayHello() {
          document.writeln(`Hai! Mr. ${fullName}`)
  }

 function localScope() {
          let fullNameFromLocal = "John"
 }

 sayHello()
 localScope()

 // Ketika kita akses localscope, tentu tidak bisa
 document.writeln(`Hai! ${fullNameFromLocal}`)

Kita tidak bisa akses local scope pada global scope

 function fruits() {
          let nameOfFruits = ["🍉", "🍊", "🍅"]

          function localFruits() {
          // Kita tidak bisa akses nameOfFruits karena dia local scope
          console.log(nameOfFruits);
    }

  }

  fruits()
  localFruits()

Recursive Function pada JavaScript

Kemampuan function untuk memanggil dirinya sendiri disebut dengan istilah recursive function. Pada contoh ini kita akan menerapkan recursive function pada factorial 🧀.

 let factorialRecursive = function (value) {
     if (value === 1) {
         return 1;
     } else {
        return value * factorialRecursive(value - 1)
        }


 }
 document.writeln(factorialRecursive(10))

Recursive Function

Function Generator pada JavaScript

Function generator adalah function yang digunakan untuk membuat data generator. Generator adalah data yang bisa di interasi seperti Array. Untuk membuat function generator, kita perlu menggunakan tanda * (bintang) setelah kata function. Dan untuk mengembalikan data di tiap iterasi, kita bisa gunakan kata kunci yield diikuti datanya 🧆.

 let createUser = function* () {
     yield "Budi"
     yield "Bambang"
     yield "Nugraha"
  }

  const generateUser = createUser();
  for (const user of generateUser) {
        document.writeln(`<p>${user}</p>`)
  }

function generator

  let createAngkaGanjil = function* (value) {
      for (let i = 1; i <= value; i++) {
           if (i % 2 === 1) {
               yield i;
            }
        }
   }

   const generateAngkaGanjil = createAngkaGanjil(15);
   for (const angkaGanjil of generateAngkaGanjil) {
   document.writeln(`<p>${angkaGanjil}</p>`)
   }

Function Generator dengan contoh kompleks

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. 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