JavaScript - Fungsi

Agenda

• Intro Fungsi
• Cara Penulisan Fungsi
• QnA
• Tantangan

Intro Fungsi

Mari kita lihat cuplikan kode berikut

const arrPertama = ["cuma", "ingin", "nulis"];
const arrKedua = ["halo", "dunia", "javascript"];

for (let counter = 0; counter < arrPertama.length; counter++) {
  console.log(arrPertama[counter]);
}

for (let counter = 0; counter < arrKedua.length; counter++) {
  console.log(arrKedua[counter]);
}

Intro Fungsi (ii)

Lalu solusinya bagaimana?

Intro Fungsi (iii)

Fungsi adalah suatu cara untuk menuliskan kode yang bisa dipakai berulang-ulang sehingga membuat kode kita menjadi lebih DRY

DRY (Don't Repeat Yourself)

Prinsip dalam pemrograman yang bertujuan untuk mengurangi perulangan dari pola penulisan kode

• Biasanya menggunakan suatu abstraksi atau normalisasi data
• Diformulasikan oleh Andy Hunt dan Dave Thomas
• Abstraksi yang akan dipelajari sekarang ini bernama Fungsi (Function)

Cara Penulisan Fungsi

• Deklarasi Fungsi
• Fungsi sebagai Ekspresi
• Parameter dan Argumen
• Arrow Function
• IIFE

Deklarasi Fungsi

Fungsi dapat dideklarasikan dengan menggunakan keyword function

Notasi penulisan fungsi

function namaFungsi() {
  // Kode di sini
  // ...
}

// Cara memanggil atau menjalankan fungsi
// bahasa kerennya: meng-invoke fungsi
namaFungsi();

Deklarasi Fungsi (ii)

Contoh Deklarasi Fungsi

// deklarasi
function cetakHaloLimaKali() {
  for (let counter = 0; counter < 5; counter++) {
    console.log("Halo");
  }
}

// invoke
cetakHaloLimaKali();

Fungsi sebagai Ekspresi

• Dalam js, fungsi adalah sebuah Object
• Karena itu kita bisa memasukkannya ke dalam sebuah variabel

Fungsi sebagai Ekspresi (ii)

Notasi penulisan fungsi sebagai ekspresi

// Di sini kita menuliskan fungsi ke dalam variabel
// Di sebelah kiri kita menuliskan nama variabel
// Di sebelah kanan kita menuliskan fungsi yang akan didefinisikan
// tanpa nama (anonim) - anonymous function
const namaFungsi = function() {
  // Kode di sini
  // ...
}

// invoke fungsi
namaFungsi();

Fungsi sebagai Ekspresi (iii)

Contoh Fungsi sebagai eskpresi

// karena fungsi tidak akan berubah
// gunakan const untuk menyimpan fungsi
const fungsiPenjumlahan = function() {
  let bilanganPertama = 10; let bilanganKedua = 20;
  let jumlah = bilanganPertama + bilanganKedua;

  // mengembalikan angka hasil penjumlahan
  return jumlah;
}

// invoke fungsi
// fungsiPenjumlahan() akan mengembalikan jumlah
// langsung cetak jumlah melalui console.log
console.log(fungsiPenjumlahan());

Parameter dan Argumen

• Loh, katanya fungsi itu demi DRY bukan?
• Kita ambil contoh sebelumnya:
• Bagaimana bila ternyata kita ingin mengubah angkanya?
• Apakah kita harus membuat fungsi baru lagi?
• Tydaque !, kita bisa memanfaatkan parameter dan argumen.

Parameter dan Argumen (ii)

Parameter adalah nama variabel yang dilempar ke dalam suatu fungsi, sedangkan Argumen adalah nilai asli yang dimasukkan ke dalam fungsi

Parameter dan Argumen (iii)

Notasi Parameter dan Argumen

// jumlah parameter bisa banyak tergantung "koma"-nya
// di sini dideklarasikan dengan nama
// param1 dan param2
const namaFungsi = function(param1, param2) {
  // Kode di sini
  // ...
}

// invoke fungsi dan lempar (passing) arguments (args)
namaFungsi('arg1', 'arg2');

Parameter dan Argumen (iv)

Contoh Parameter dan Argumen

// membuat fungsi pengurangan
const fungsiPengurangan = function(angkaSatu, angkaDua) {
  // langsung dihitung pengurangannya
  // dan dikembalikan
  return angkaSatu - angkaDua;
}

// simpan hasil dan invoke fungsi dengan argumen
// untuk parameter angkaSatu dan angkaDua
// di sini berarti: angkaSatu = 10 dan angkaDua = 20
const hasil = fungsiPengurangan(10, 5);

// cetak hasil-nya
console.log(hasil);

Arrow Function

• Diperkenalkan pada ES6
• Cara penulisan fungsi yang lebih singkat dan "modern"
• (Untuk Profesional) Hati hati dengan penggunaan this di dalam arrow function

Arrow Function (ii)

Notasi arrow function

// cara penulisan arrow function
const arrowFunction = (param1, param2) => {
  // kode di sini
  // ...
}

// invoke fungsi
arrowFunction('arg1', 'arg2');

Arrow Function (iii)

Contoh arrow function

// cara penulisan arrow function
const fungsiPerkalian = (angkaSatu, angkaDua) => {
  return angkaSatu * angkaDua;
}

// cara penulisan arrow function yang singkat
// cara baca:
// fungsi ini menerima dua parameter - satu dan dua
// fungsi akan mengembalikan - satu dikali dua
const fungsiPerkalianSingkat = (satu, dua) => satu * dua;

// invoke fungsi seperti biasa
console.log(fungsiPerkalian(10, 5));
console.log(fungsiPerkalianSingkat(20,10));

IIFE

• Immediately Invoked Function Expression
• Cara menulis fungsi yang akan langsung dijalankan
• Umumnya fungsi anonim yang langsung dibuat dan dijalankan
• Bisa menggunakan deklarasi fungsi biasa ataupun arrow function

IIFE (ii)

Notasi IIFE

// bungkus fungsi anonim dalam ()
// dan langsung diinvoke ()
// double kurung atau ()()
(function () {
  // Kode di sini
  // ...
})();

// tidak perlu di-invoke lagi
// sudah diinvoke

IIFE (iii)

Contoh IIFE

// Misalnya fungsi untuk pembagian
(function () {
  let a = 30;
  let b = 5;

  console.log('Hasilnya adalah ' + a / b);
})();

// tidak perlu di-invoke lagi
// sudah diinvoke

IIFE (iv)

Apa sih kegunaan dari IIFE?

• Untuk menghindari polusi variabel global
• Dipelajari Nanti Mengeksekusi fungsi async

QnA

Waktunya Tantangan

Referensi

• https://en.wikipedia.org/wiki/Don%27t_repeat_yourself
• https://www.learncpp.com/cpp-tutorial/why-functions-are-useful-and-how-to-use-them-effectively/
• https://developer.mozilla.org/en-US/docs/Glossary/IIFE