Function dan arrow function

Idenya

Function adalah potongan logika yang diberi nama dan bisa dipakai ulang: beri input, ia memberikan output. Kamu sudah memakai yang bawaan (console.log, Math.round, Number). Menulis function sendiri adalah cara berhenti mengulang kode dan mulai membangun program dari potongan-potongan kecil yang mudah dipahami, persis seperti function di Python.

Mendeklarasikan dan memanggil

Toko Kita menampilkan harga dengan PPN 11% sudah termasuk, dan perhitungan itu dibutuhkan di halaman produk, di keranjang, dan saat checkout. Daripada menulis price * 1.11 di ketiga tempat itu, kamu memberi nama pada perhitungannya sekali, lalu memakainya di mana pun dibutuhkan:

function addVat(price) {
  return Math.round(price * 1.11);
}

console.log(addVat(95000));
console.log(addVat(250000));

105450
277500

• function name(parameters) { ... } mendeklarasikannya.
• return mengirim balik sebuah nilai dan mengakhiri function. Tanpa return, function mengembalikan undefined.
• Memanggilnya dengan addVat(95000) menjalankan isinya dengan price bernilai 95000.

Parameter dan nilai default

Ongkos kirim untuk sebagian besar pesanan adalah 12000 per kilo, tapi kadang berlaku tarif lain, seperti pengiriman ekspres. Nilai default membuat function memakai tarif biasa kecuali kamu menyebutkan yang lain:

function shippingCost(weightKg, perKg = 12000) {
  return weightKg * perKg;
}

console.log(shippingCost(2));
console.log(shippingCost(2, 15000));
console.log(shippingCost());

24000
30000
NaN

• Default (perKg = 12000) dipakai saat argumennya tidak ada.
• JavaScript tidak protes soal argumen yang hilang: nilainya cukup undefined. undefined * 12000 adalah NaN (Not a Number), yang lalu menyebar diam-diam ke setiap perhitungan. Tidak seperti Python, tidak ada error yang memperingatkanmu, jadi berhati-hatilah dengan input.

Arrow function

Banyak function berupa satu baris yang sangat pendek, dan menulis function, kurung kurawal, dan return untuk masing-masing jadi bertele-tele. JavaScript modern punya cara yang lebih pendek untuk menulisnya, disebut arrow function, dan kamu akan melihatnya di mana-mana:

const addVat = (price) => Math.round(price * 1.11);
const formatRupiah = (amount) => "Rp " + amount.toLocaleString("id-ID");
const greet = () => "Selamat datang!";
const lineTotal = (price, qty) => {
  const subtotal = price * qty;
  return subtotal > 500000 ? subtotal * 0.95 : subtotal;
};

console.log(formatRupiah(addVat(95000)));
console.log(greet());
console.log(lineTotal(200000, 3));

Rp 105.450
Selamat datang!
570000

• (params) => expression mengembalikan ekspresi itu secara otomatis (implicit return).
• Dengan kurung kurawal, kamu butuh return eksplisit, seperti function biasa.
• Tanpa parameter: tanda kurung kosong (). Satu parameter: tanda kurungnya opsional (price => ...), tetapi banyak tim tetap memakainya demi konsistensi.
• toLocaleString("id-ID") memformat angka dengan cara Indonesia, dengan titik untuk ribuan.

Arrow function dan deklarasi function berperilaku sama untuk pemakaian sehari-hari. Perbedaannya (this dan hoisting) muncul di modul 9; untuk sekarang, pakai arrow untuk helper pendek dan callback, dan gaya mana pun untuk function bernama.

Function adalah nilai

Function bisa disimpan di variabel, dimasukkan ke objek, atau dioper ke function lain. Yang terakhir itu ada di mana-mana di JavaScript:

const prices = [95000, 120000, 45000];

function applyToAll(values, fn) {
  const result = [];
  for (const value of values) {
    result.push(fn(value));
  }
  return result;
}

console.log(applyToAll(prices, addVatTo));

function addVatTo(price) {
  return Math.round(price * 1.11);
}

console.log(applyToAll(prices, (p) => p / 1000 + "k"));

[105450, 133200, 49950]
["95k", "120k", "45k"]

Function yang dioper ke function lain disebut callback. Event handler (modul 6), method array seperti map dan filter (modul 8), dan timer semuanya menerima callback.

Perhatikan bahwa addVatTo dipakai sebelum deklarasinya. Deklarasi function di-hoist: JavaScript membuatnya tersedia di seluruh scope-nya. Arrow function yang disimpan di const tidak: memakainya sebelum barisnya akan menimbulkan error.

Rest parameter

Kadang kamu tidak tahu sebelumnya berapa banyak nilai yang akan diterima sebuah function. Total keranjang bisa dua barang atau dua puluh. Rest parameter mengumpulkan argumen sebanyak apa pun yang diberikan ke dalam satu array:

function total(...amounts) {
  let sum = 0;
  for (const amount of amounts) sum += amount;
  return sum;
}

console.log(total(95000, 120000, 45000));
console.log(total());

260000
0

...amounts mengumpulkan semua argumen ke dalam sebuah array, seperti *args di Python.

Mengapa ini penting untuk kode yang bersih

Function yang baik itu kecil, dinamai sesuai fungsinya, dan murni sebisa mungkin: input yang sama, output yang sama, tanpa efek samping tersembunyi. addVat(price) bisa dites dalam satu baris dan dipakai ulang di mana saja. Event handler 200 baris yang menghitung PPN di dalamnya tidak bisa. Sebagian besar sisa track ini membahas pemecahan kode menjadi function-function seperti ini.

Rangkuman

• function name(a, b = 1) { return ...; }; tanpa return berarti undefined.
• Argumen yang hilang bernilai undefined (tanpa error); undefined dalam perhitungan menghasilkan NaN.
• Arrow function: (a, b) => expression atau (a) => { ...; return x; }.
• Function adalah nilai; callback adalah function yang dioper ke function.
• Deklarasi function di-hoist; arrow function const tidak.
• ...rest mengumpulkan sisa argumen ke dalam array.