Menguasai Fungsi dan Arrow Function di JavaScript

Pendahuluan

Halo rekan developer! Senang sekali bisa bertemu kembali di seri belajar JavaScript kita. Pada artikel sebelumnya, kita sudah membahas tentang tipe data dan operator. Kamu sudah tahu bagaimana cara menyimpan nama pengguna seperti “Budi” atau menghitung skor menggunakan operator aritmatika. Namun, ada satu masalah besar: jika kamu hanya menggunakan variabel dan operator secara berderet, kode kamu akan menjadi sangat panjang, berantakan, dan sulit dikelola.

Bayangkan jika kamu sedang membangun Aplikasi Kuis Interaktif. Setiap kali pengguna menjawab pertanyaan, kamu perlu mengecek apakah jawabannya benar, menambah skor, dan memperbarui tampilan layar. Jika kamu menulis logika yang sama berulang-ulang untuk setiap pertanyaan, kode kamu akan menjadi mimpi buruk bagi developer lain (dan bagi dirimu sendiri di masa depan!).

Di sinilah kita membutuhkan Function (fungsi). Di artikel ini, kita akan mempelajari bagaimana cara membungkus sekumpulan instruksi ke dalam sebuah unit yang bisa dipanggil kapan saja. Kita juga akan mengenal Arrow Function, fitur modern (ES6) yang membuat penulinitan kode JavaScript menjadi jauh lebih ringkas dan elegan. Dengan menguasai topik ini, kamu akan siap menulis logika inti untuk aplikasi kuis kita.

Function Declaration: Cara Klasik yang Powerfull

Konsep paling dasar dalam JavaScript adalah Function Declaration. Secara sederhana, fungsi adalah sebuah “kotak” yang berisi instruksi. Kamu bisa memberi nama pada kotak tersebut, dan kapan pun kamu membutuhkan instruksi di dalamnya, kamu cukup memanggil namanya.

Mari kita lihat contoh sederhana. Bayangkan kita ingin membuat fungsi untuk menghitung sisa saldo Budi setelah dia membeli pulsa di aplikasi seperti Gojek.

// Ini adalah Function Declaration
function hitungSisaSaldo(saldoAwal, hargaPulsa) {
  // Logika di dalam fungsi
  const sisaSaldo = saldoAwal - hargaPulsa;
  
  // Mengembalikan hasil perhitungan
  return sisaSaldo;
}

// Cara memanggil fungsi (invoking)
const saldoBudi = 50000; // Rp 50.000
const hargaPulsa = 15000; // Rp 15.000

const sisaSaldoBudi = hitungSisaSaldo(saldoBudi, hargaPulsa);

console.log("Saldo Budi sekarang adalah: Rp" + sisaSaldoBudi);
// Output: Saldo Budi sekarang adalah: Rp35000

Dalam kode di atas, ada beberapa komponen penting yang perlu kamu pahami:

function keyword: Kata kunci wajib untuk menandakan kita sedang membuat fungsi.
hitungSisaSaldo: Nama fungsi. Gunakan nama yang deskriptif agar rekan timmu paham apa isi fungsinya.
Parameter (saldoAwal, hargaPulsa): Variabel “penampung” yang menerima input saat fungsi dipeluki.
return: Kata kunci yang sangat krusial. return digunakan untuk mengirimkan hasil dari dalam fungsi keluar, sehingga hasilnya bisa disimpan ke dalam variabel lain. Tanpa return, fungsi akan menghasilkan undefined.

Function Expression: Fungsi sebagai Variabel

Selain cara klasik di atas, JavaScript juga memungkinkan kita untuk menyimpan fungsi ke dalam sebuah variabel. Inilah yang disebut dengan Function Expression.

Mengapa ini berguna? Karena dengan cara ini, kita memperlakukan fungsi sama seperti kita memperlakukan angka atau string. Kita bisa mengirim fungsi ke dalam fungsi lain (ini akan kita bahas lebih dalam di seri berikutnya).

// Fungsi disimpan ke dalam variabel 'cekDiskon'
const cekDiskon = function(totalBelanja) {
  if (totalBelanja > 100000) {
    return "Kamu dapat diskon 10%!";
  } else {
    return "Belanja lebih banyak untuk dapat diskon.";
  }
};

// Menggunakan fungsi expression
const belanjaSiti = 150000; // Rp 150.0cap
console.log(cekDiskon(belanjaSiti)); 
// Output: Kamu dapat diskon 10%!

Perbedaan utama dengan Function Declaration adalah masalah hoisting. Function Declaration bisa dipanggil bahkan sebelum baris kodenya ditulis, sedangkan Function Expression harus didefinisikan terlebih dahulu sebelum bisa digunakan. Sebagai developer profesional, disarankan untuk selalu mendefinisikan fungsi sebelum memanggilnya agar kode lebih mudah dibaca.

Arrow Function: Menulis Kode Lebih Ringkas

Sejak rilis ES6, JavaScript memperkenalkan cara penulisan fungsi yang jauh lebih singkat, yaitu Arrow Function. Jika kamu sering melihat kode di repositori GitHub populer atau dokumentasi library modern, kamu akan sering menemui sintaks ini.

Arrow function menghilangkan kata kunci function dan menggantinya dengan tanda panah (=>).

Mari kita bandingkan fungsi tradisional dengan Arrow Function:

// 1. Function Declaration (Tradisional)
function tambah(a, b) {
  return a + b;
}

// 2. Arrow Function (Modern & Ringkas)
// Jika hanya satu baris, kita bisa menghilangkan kurung kurung kurawal {} dan kata 'return'
const tambahModern = (a, b) => a + b;

// 3. Contoh dengan logika lebih kompleks
const hitungPajak = (harga) => {
  const pajak = harga * 0.11; // Pajak 11% seperti PPN di Indonesia
  return harga + pajak;
};

console.log(tambahModern(10, 5)); // Output: 15
console.log(hitungPajak(100000)); // Output: 111000

Kapan menggunakan Arrow Function?

Gunakan untuk fungsi sederhana yang hanya berisi satu baris logika (implicit return).
Gunakan saat kamu bekerja dengan callback (fungsi yang dijalankan di dalam fungsi lain) agar kode terlihat bersih.
Namun, perlu diingat bahwa Arrow Function memiliki perilaku berbeda terkait kata kunci this (tapi jangan khawatir, kita akan membahasnya di level intermediate nanti).

Implementasi dalam Proyek: Aplikasi Kuis Interaktif

Sekarang, mari kita terapkan ilmu yang baru saja kita pelargi ke dalam proyek utama kita: Aplikasi Kuis Interaktif. Kita akan membuat sebuah fungsi yang bertugas untuk memvalidasi jawaban pengguna.

Di dalam file script.js proyek kuis kita, kita akan membutuhkan logika untuk mengecek apakah pilihan yang diklik oleh pengguna (misalnya Andi) sama dengan kunci jawaban yang benar.

// Data soal (sebagai gambaran)
const soal = {
  pertanyaan: "Apa ibu kota Indonesia?",
  pilihan: ["Jakarta", "Bandung", "Surabaya", "Medan"],
  jawabanBenar: "Jakarta"
};

// State aplikasi
let skor = 0;

/**
 * Fungsi untuk mengecek jawaban
 * @param {string} jawabanUser - Jawaban yang dipilih pengguna
 * @param {string} jawabanKunci - Jawaban yang benar dari sistem
 * @returns {boolean} - true jika benar, false jika salah
 */
const cekJawaban = (jawabanUser, jawabanKunci) => {
  if (jawabanUser === jawabanKunci) {
    console.log("Mantap! Jawaban kamu benar.");
    return true;
  } else {
    console.log("Yah, jawaban kamu salah. Coba lagi ya!");
    return false;
  }
};

// Fungsi untuk memperbarui skor
function updateSkor(poin) {
  skor += poin;
  console.log("Skor terbaru kamu: " + skor);
}

// --- SIMULASI LOGIKA KUIS ---

// Simulasi Andi menjawab dengan benar
const jawabanAndi = "Jakarta";
const isBenar = cekJawaban(jawabanAndi, soal.jawabanBenar);

if (isBenar) {
  updateSkor(10); // Tambah 10 poin jika benar
}

// Simulasi Budi menjawab salah
const jawabanBudi = "Bandung";
const isBudiBenar = cekJawaban(jawabanBudi, soal.jawabanBenber); 
// Note: (Sengaja error untuk simulasi)

Dengan memisahkan logika pengecekan ke dalam fungsi cekJawaban, kode kita menjadi sangat rapi. Jika di masa depan kita ingin mengubah cara penilaian (misalnya memberi poin 20 alih-alih 10), kita cukup mengubah satu baris di dalam fungsi, tanpa harus mengotak-atik seluruh alur program.

Kesimpulan

Hari ini kita telah mempelajari:

Function Declaration: Cara standar membuat fungsi.
Function Expression: Membuat fungsi dan menyimpannya dalam variabel.
Arrow Function: Cara modern dan ringkas untuk menulis fungsi.
Return Value: Pentingnya mengembalikan nilai agar fungsi bisa digunakan dalam logika program lainnya.

Pemahaman tentang fungsi adalah fondasi terpenting dalam pemrograman. Tanpa fungsi, kode Anda hanya akan menjadi tumpukan instruksi yang panjang dan sulit dikelola.

Langkah berikutnya: Belajar Manipulasi DOM JavaScript untuk Pemula — hubungkan logika JavaScript ke elemen HTML untuk membuat halaman yang benar-benar interaktif.