Pabrik Kode Daur Ulang: Function
Prinsip paling diagungkan oleh para Software Engineer di seluruh dunia adalah DRY (Don't Repeat
Yourself) — Jangan Mengulang Dirimu Sendiri.
Jika kamu menulis logika menghitung diskon yang sama di 10 halaman berbeda, lalu aturannya berubah, kamu
harus mencarinya dan mengubahnya 10 kali! Sangat tidak masuk akal.
Function (Fungsi) diciptakan sebagai "Pabrik Mini" tempat kamu menuliskan logika satu kali
saja, memberikan nama pada pabrik tersebut, dan memanggilnya ribuan kali di mana pun kamu butuhkan.
🏛️ 1. Pakem Klasik: Function Declaration
Ini adalah cara paling purba dan paling jelas dalam mendeklarasikan sebuah fungsi. Menggunakan kata kunci baku `function` dan sebuah nama yang mendeskripsikan kerjanya.
// 1. Membangun Pabrik (Deklarasi)
function sapaPengguna(nama) {
console.log(`Halo ${nama}, selamat datang di Fullstack Talent!`);
}
// 2. Menjalankan Pabrik (Pemanggilan / Invocation)
sapaPengguna("Andi"); // Membantu Andi
sapaPengguna("Budi"); // Membantu Budi (Tanpa menulis coding ulang!)
Konsep Bahan Baku (Parameter)
Variabel dalam kurung (nama) disebut
Parameter. Ia berperan sebagai "Bahan Baku" yang wajib disetorkan dari luar saat
memanggil fungsi, agar pabrik mini tersebut bisa mengolah nama yang berbeda-beda secara dinamis.
🎭 2. Sang Penyusup: Function Expression (Anonymous)
Bagi JavaScript, fungsi itu First-Class Citizen (Warga Negara Kelas Satu). Artinya, Fungsi diperlakukan **sama persis** layaknya Tipe Data `String` atau `Number`. Jika `Number` bisa dimasukkan ke dalam keranjang Variabel, maka **sebuah Fungsi utuh pun bisa dimasukkan ke dalam Variabel**. Inilah yang disebut Function Expression.
// Fungsi ini BUKAN bernama 'hitungPajak', melainkan...
// Ia 'TIDAK BERNAMA' (Anonymous), lalu dilempar ke dalam variabel 'hitungPajak'.
const hitungPajak = function(harga) {
let total = harga + (harga * 0.11);
return total;
};
console.log( hitungPajak(50000) ); // => 55500
Sangat Penting Konsep RETURN (Pengembalian Nilai)
Fungsi yang baik **tidak** mencetak hasil ke Layar (Terminal/Console) secara langsung. Fungsi ibarat
karyawan bawahan yang kamu bayar: Dia menerima bahan bahan (harga), menghitung pajaknya secara rahasia,
lalu menyerahkan (return) hasil jadinya kembali kepadamu. Jika karyawan
pabrik lupa di-setting return, hasil pabriknya akan menguap (undefined),
seolah-olah pabrik itu memakan bahan baku tetapi tidak pernah menyerahkan produk akhirnya ke bos.
🏹 3. Kasta Tertinggi Modern: Arrow Function
Bagaimana jika saya katakan bahwa kata `function` itu sendiri terlalu panjang dan kuno mengetiknya? Pada zaman modern (ES6), JavaScript mengenalkan panah cinta Arrow Function (`=>`). Sintaks ini sangat tajam, ramping, dan wajib kamu kuasai karena React.js dibangun di atas pondasi ini!
Sebelum (Bertele-tele)
const kuadrat = function(x) {
return x * x;
};
Sesudah (1 Baris!) 🏹
const kuadrat = (x) => x * x;
Luar biasa bukan? Kata function dibuang. Kata return dibuang! Kurung
kurawal {} pun dibuang!
Sang Panah => sudah mewakili semuanya secara implisit jika prosesnya hanya 1 baris.
⭐ Best Practice: Arrow Function Multi-baris
Sihir membuang "return" dan "kurung kurawal" hanya berlaku jika logikamu muat 1 baris (langsung tamat). Jika fungsi logikamu butuh berbaris-baris kalkulasi di tengah jalan, kamu WAJIB menggunakan kurung kurawal lagi dan menulis kata `return` secara manual!
const hitungDiskon = (harga, member) => {
// Butuh banyak baris kalkulasi dulu...
let potongan = 0;
if (member === "VIP") potongan = 0.5;
else if (member === "REG") potongan = 0.1;
// Maka WAJIB memakai kata return eksplisit!
return harga - (harga * potongan);
};