Blok Logika yang Dapat Digunakan Ulang

Kenapa ini penting

Bayangkan kamu menulis kode menghitung pajak di sepuluh tempat berbeda. Suatu hari tarif pajaknya berubah, dan kamu harus mencari dan mengganti kesepuluhnya. Satu saja terlewat, muncul bug. Function menyelesaikan masalah ini: kamu menulis logika sekali, memberinya nama, lalu memanggilnya kapan pun dibutuhkan. Function adalah pondasi hampir semua kode JavaScript, dari tombol di website sampai server. Prinsip yang dipegang programmer adalah DRY (Don't Repeat Yourself): kalau kamu menyalin-tempel kode yang sama, itu tanda kode itu sebaiknya dijadikan function.

Konsep inti

Anatomi function

Analogi: function itu seperti mesin jus. Kamu memasukkan bahan (parameter), mesin memproses (badan function), lalu keluar jus (return value). Mesin yang sama bisa dipakai untuk jeruk, apel, atau mangga.

Parameter: nama variabel di definisi function, misalnya function luas(p, l).
Argument: nilai nyata yang dikirim saat memanggil, misalnya luas(5, 3).
return: mengembalikan nilai ke pemanggil dan langsung menghentikan function. Tanpa return, function mengembalikan undefined.

Mendefinisikan function belum menjalankannya. Function baru jalan saat dipanggil dengan tanda kurung: luas(5, 3).

Tiga cara menulis function

Bentuk	Contoh	Ciri
Function declaration	`function sapa(n) { return "Hai " + n; }`	Di-hoist: bisa dipanggil sebelum baris definisinya
Function expression	`const sapa = function (n) { return "Hai " + n; };`	Disimpan di variabel, tidak bisa dipanggil sebelum didefinisikan
Arrow function	`const sapa = (n) => "Hai " + n;`	Ringkas. Kalau badannya satu ekspresi, `return` otomatis

Aturan arrow function:

Satu parameter boleh tanpa kurung: n => n * 2. Nol atau lebih dari satu parameter wajib pakai kurung: () => 1, (a, b) => a + b.
Badan tanpa { } langsung me-return hasil ekspresi. Kalau memakai { }, kamu wajib menulis return sendiri.
Untuk me-return object secara ringkas, bungkus dengan kurung: () => ({ ok: true }).
Arrow function tidak punya this sendiri. Ini penting di materi object dan class nanti.

Kapan pakai yang mana? Banyak tim memakai declaration untuk function utama yang bernama, dan arrow untuk function kecil yang dikirim ke function lain (callback, dibahas di modul berikutnya).

Parameter default dan rest

Default parameter: function sapa(nama = "Tamu"). Nilai default dipakai kalau argument tidak dikirim atau bernilai undefined.
Rest parameter: function jumlah(...angka) mengumpulkan semua argument tersisa ke dalam array.
JavaScript tidak protes kalau jumlah argument tidak cocok. Argument yang kurang menjadi undefined, argument yang lebih diabaikan.

Scope: di mana variabel bisa diakses

Scope adalah wilayah tempat sebuah variabel "terlihat".

Global scope: variabel di luar semua function dan blok. Bisa diakses di mana saja. Hindari terlalu banyak variabel global karena rawan bentrok nama.
Function scope: variabel yang dibuat di dalam function hanya ada di dalam function itu.
Block scope: let dan const di dalam { } (if, for, dan sebagainya) hanya ada di dalam blok itu.

Aturan pencarian: JavaScript mencari variabel dari scope paling dalam ke luar. Function di dalam bisa melihat variabel luar, tapi tidak sebaliknya. Analogi rumah: dari dalam kamar kamu bisa mengambil barang di ruang tamu, tapi tamu di ruang tamu tidak bisa melihat isi lemarimu di kamar.

Shadowing: kalau variabel di dalam punya nama sama dengan variabel di luar, yang dalam "menutupi" yang luar selama di dalam scope itu.

Pure function

Function yang hasilnya hanya bergantung pada parameternya dan tidak mengubah apa pun di luar dirinya disebut pure function. Function seperti ini mudah diuji dan diprediksi. Usahakan sebagian besar function-mu pure.

Contoh kode

// Function declaration
function hitungLuas(panjang, lebar) {
  return panjang * lebar;
}
console.log(hitungLuas(5, 3)); // → 15
console.log(hitungLuas(2, 8)); // → 16

// Hoisting: declaration bisa dipanggil sebelum didefinisikan
console.log(kuadrat(4)); // → 16
function kuadrat(x) {
  return x * x;
}

// Function expression
const kubik = function (x) {
  return x ** 3;
};
console.log(kubik(3)); // → 27

// Arrow function: bentuk ringkas dan bentuk blok
const tambahPajak = (harga) => harga * 1.1;
const formatRupiah = (angka) => {
  const teks = angka.toLocaleString("id-ID");
  return `Rp${teks}`;
};
console.log(formatRupiah(tambahPajak(100000))); // → Rp110.000

// Return object dengan arrow: bungkus dengan kurung
const buatUser = (nama) => ({ nama, aktif: true });
console.log(buatUser("Rudi")); // → { nama: 'Rudi', aktif: true }

// Tanpa return: hasilnya undefined
function cetakSaja(x) {
  console.log("Nilai:", x);
}
const hasil = cetakSaja(5); // → Nilai: 5
console.log(hasil);         // → undefined

// return menghentikan function
function cekUmur(umur) {
  if (umur < 0) return "Umur tidak valid";
  return umur >= 17 ? "Dewasa" : "Anak";
  // baris di bawah return tidak pernah dijalankan
}
console.log(cekUmur(-1), cekUmur(20)); // → Umur tidak valid Dewasa

Parameter default, rest, dan scope:

// Default parameter
function sapa(nama = "Tamu", salam = "Halo") {
  return `${salam}, ${nama}!`;
}
console.log(sapa());                  // → Halo, Tamu!
console.log(sapa("Ayu"));             // → Halo, Ayu!
console.log(sapa(undefined, "Hai"));  // → Hai, Tamu!

// Rest parameter
function jumlahkan(...angka) {
  let total = 0;
  for (const n of angka) total += n;
  return total;
}
console.log(jumlahkan(1, 2, 3));      // → 6
console.log(jumlahkan(10, 20, 30, 40)); // → 100

// Scope
const aplikasi = "KodingUp";          // global
function tampilkan() {
  const pesan = "Belajar di";         // function scope
  if (true) {
    const tahun = 2026;               // block scope
    console.log(pesan, aplikasi, tahun); // → Belajar di KodingUp 2026
  }
  // console.log(tahun); // → ReferenceError: tahun is not defined
}
tampilkan();
// console.log(pesan); // → ReferenceError: pesan is not defined

// Shadowing
const warna = "merah";
function cat() {
  const warna = "biru"; // menutupi warna global di dalam function ini
  return warna;
}
console.log(cat(), warna); // → biru merah

Kesalahan umum

Lupa return. Function menghitung dengan benar tapi hasilnya undefined di pemanggil. Khususnya di arrow function yang memakai { }: (x) => { x * 2 } mengembalikan undefined.
Lupa tanda kurung saat memanggil. console.log(hitungLuas) mencetak function-nya, bukan hasilnya. Yang benar hitungLuas(5, 3).
Mengira console.log sama dengan return. console.log hanya menampilkan ke layar. Nilai yang bisa dipakai lagi harus di-return.
Memanggil function expression sebelum didefinisikan. Hanya function declaration yang di-hoist. const f = ... belum bisa dipakai di baris atasnya.
Mengubah variabel global dari dalam function. Ini membuat bug sulit dilacak. Kirim data lewat parameter dan kembalikan hasil lewat return.

Latihan

Mudah, Buat arrow function celsiusKeFahrenheit(c) dengan rumus c × 9/5 + 32. Uji dengan 0, 37, dan 100.
Sedang, Buat function hitungTotal(harga, jumlah, diskonPersen = 0) yang mengembalikan total setelah diskon. Tolak input tidak valid (harga atau jumlah ≤ 0) dengan me-return null.
Menantang, Buat function statistik(...angka) yang mengembalikan object { min, max, rata } (rata-rata dibulatkan 2 angka desimal sebagai number). Kalau tidak ada argument, kembalikan null. Jangan pakai Math.min/Math.max, pakai loop.

Lihat solusi

const celsiusKeFahrenheit = (c) => (c * 9) / 5 + 32;
console.log(celsiusKeFahrenheit(0));   // → 32
console.log(celsiusKeFahrenheit(37));  // → 98.6
console.log(celsiusKeFahrenheit(100)); // → 212

function hitungTotal(harga, jumlah, diskonPersen = 0) {
  if (harga <= 0 || jumlah <= 0) return null;
  const kotor = harga * jumlah;
  return kotor - (kotor * diskonPersen) / 100;
}
console.log(hitungTotal(20000, 3));     // → 60000
console.log(hitungTotal(20000, 3, 10)); // → 54000
console.log(hitungTotal(-5, 3));        // → null

function statistik(...angka) {
  if (angka.length === 0) return null;
  let min = angka[0];
  let max = angka[0];
  let jumlah = 0;
  for (const n of angka) {
    if (n < min) min = n;
    if (n > max) max = n;
    jumlah += n;
  }
  const rata = Number((jumlah / angka.length).toFixed(2));
  return { min, max, rata };
}
console.log(statistik(4, 9, 1, 7)); // → { min: 1, max: 9, rata: 5.25 }
console.log(statistik(10, 20, 25)); // → { min: 10, max: 25, rata: 18.33 }
console.log(statistik());           // → null

Ringkasan

Function membungkus logika supaya bisa dipakai ulang (DRY). Parameter adalah input, return adalah output.
Tiga bentuk: declaration (di-hoist), expression, dan arrow (ringkas, return otomatis tanpa { }).
Default parameter memberi nilai cadangan. Rest parameter (...args) mengumpulkan argument ke array.
Scope: global, function, block. Variabel dicari dari dalam ke luar.
Usahakan function bersifat pure: hasil hanya bergantung pada input dan tidak mengubah apa pun di luar.