Coba bayangin masak bakso: cuci bahan, potong, didihin, taro mie, masukin bakso, sajiin. Lima langkah yang harus diulang tiap mau masak. Daripada nulis ulang langkah satu-satu setiap kali, kamu kasih nama "buatBakso" — sekali manggil nama itu, semua langkah otomatis jalan. Itu fungsi di JavaScript: blok kode yang bisa dipanggil berulang kali, kasih input (parameter), terima output (return). Tanpa fungsi, kode kamu jadi spaghetti panjang yang ngulang-ngulang. Dengan fungsi, kode jadi rapi dan reusable.

🤔 Filosofi penting. Fungsi bagus = ngerjain SATU hal dengan jelas. hitungTotal() bagus. hitungTotalDanPrintInvoiceDanKirimEmail() jelek — itu 3 fungsi disamarin jadi 1. Aturan ini namanya "Single Responsibility Principle", filosofi ribuan tahun yang masih relevan di kode modern.

function sapa(nama) {
  return "Halo, " + nama + "!";
}

console.log(sapa("Budi")); // "Halo, Budi!"

Fungsi membantu kita menghindari pengulangan kode dan membuat program lebih terstruktur.

💡 Di lesson berikutnya (Arrow Functions), kamu akan lihat sintaks singkat modern: const sapa = (nama) => "Halo, " + nama + "!" — fungsi yang sama, ditulis lebih ringkas.

🎭 Analogi sehari-hari

Fungsi = mesin di dapur warung:

• Parameter = bahan yang kamu masukkan (kopi, gula, air)
• Body fungsi = proses memasaknya
• Return = hasil yang keluar (gelas kopi siap saji)

Mesin yang sama bisa dipakai berkali-kali dengan bahan berbeda — kasih ekstra gula, hasil kopi manis. Kasih sedikit gula, kopi pahit. Mesinnya satu, hasilnya tergantung input.

⚠️ Jebakan yang sering ditemui

• Lupa return = function return undefined diam-diam. Tidak ada error, tapi pemanggil dapat undefined yang bingungin.
• Function declaration vs expression punya hoisting beda. function f(){} bisa dipanggil sebelum baris deklarasi, const f = function(){} tidak bisa (TDZ).
• Parameter tidak strict — kalau function mau 2 param tapi dikasih 1, sisa = undefined (tidak error). Kasih default: function f(a, b = 0) {}.
• Argument primitive di-pass by VALUE, object by REFERENCE. Modify object di dalam function = modify aslinya. Modify number = aman.
• return dan baris baru jangan terpisah karena Automatic Semicolon Insertion: return\n { x: 1 } jadi return; { x: 1 }; (return undefined!). Tulis return { di baris yang sama.

🎯 function vs arrow => — pilih yang mana?

• Top-level helper, named utility → function nama() {} (hoisted, stack trace pake nama)
• Callback singkat satu-baris (di map, filter, event handler) → arrow =>
• Method dalam object literal → method shorthand { namaMethod() {} } (BUKAN arrow — this salah)
• Method dalam class → method biasa (BUKAN arrow di prototype, kecuali class field arrow)
• Butuh this dari scope luar (callback dalam class method) → arrow (lexical this)
• Butuh arguments object → function (arrow gak punya)

Aturan praktis: arrow buat callback inline. function buat top-level + method. Sisanya tergantung this mau dari mana.

TL;DR: Function = blok kode reusable: terima parameter, return output. Sintaks: function nama(param) { return ... }. Single Responsibility — satu function, satu tugas. Lupa return = output undefined diam-diam. Object passed by reference (modify = ubah asli), primitive by value. Default param: function f(a, b = 0). Arrow => untuk callback inline, function untuk top-level/method. Hindari return di baris terpisah (ASI bug).