JavaScript: Bahasanya · 5/12

Function: alat utamanya

Declaration, expression, arrow, parameter, return — dan function sebagai nilai yang bisa dikirim ke mana-mana.

Baca 30 menit

Setelah pelajaran ini kamu bisa

Menulis function sebagai declaration, expression, dan arrow, serta memilih di antaranya
Memakai parameter default, rest, dan destructured
Mengirim sebuah function ke function lain sebagai argument
Menjelaskan apa yang membuat function itu pure dan kenapa itu layak diinginkan

Function adalah blok pekerjaan yang bisa dipakai ulang, punya nama, beberapa input, dan satu output. Di JavaScript ia juga sebuah value — bisa kamu simpan di variable, taruh di array, dan kirim ke function lain. Sifat terakhir itulah yang membuat React mungkin ada.

Tiga cara menulisnya

// 1. Declaration — hoisted, so it can be called before this line.
function add(a, b) {
  return a + b;
}

// 2. Expression — a function stored in a variable. Not hoisted.
const subtract = function (a, b) {
  return a - b;
};

// 3. Arrow — shorter, and treats `this` differently (a later lesson).
const multiply = (a, b) => a * b;

// An arrow with a body needs an explicit return:
const divide = (a, b) => {
  if (b === 0) return null;
  return a / b;
};

Pakai yang mana? Declaration untuk function bernama di level atas, arrow untuk callback singkat yang dikirim langsung. Itu konvensi di sebagian besar codebase, termasuk yang ini.

Parameter yang bekerja lebih

Coba sendiri

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Function sebagai value

Function yang dikirim ke function lain disebut callback. Kamu sudah memakainya: array.map(fn) menerima sebuah function dan memanggilnya untukmu. React melakukan hal yang sama dengan onClick.

Coba sendiri

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Pure function

Sebuah function disebut pure kalau ia hanya bergantung pada argument-nya dan tidak mengubah apa pun di luar dirinya. Input sama, output sama, setiap kali. Pure function sangat mudah diuji, aman dipindahkan, dan tidak mungkin rusak karena kecelakaan dari kejauhan.

Coba sendiri

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Tugas praktik

Tulis pure function formatPrice(cents, currency = "Rp") yang mengubah 1999 jadi "Rp 19.99". Lalu tulis applyDiscount(cents, percent) yang mengembalikan harga baru, dibulatkan ke bilangan bulat sen. Keduanya tidak boleh memakai variable yang dideklarasikan di luarnya.

Hasil yang diharapkan

"Rp 19.99" dan 1799 untuk diskon 10% dari 1999

Tampilkan contoh solusi

Coba dulu minimal sepuluh menit sebelum membuka ini. Bagian yang terasa susah itu justru yang mengajari kamu.

function formatPrice(cents, currency = "Rp") {
  const whole = Math.floor(cents / 100);
  const fraction = String(cents % 100).padStart(2, "0");
  return currency + " " + whole + "." + fraction;
}

function applyDiscount(cents, percent) {
  return Math.round(cents * (1 - percent / 100));
}

console.log(formatPrice(1999));            // Rp 19.99
console.log(applyDiscount(1999, 10));      // 1799
console.log(formatPrice(applyDiscount(1999, 10)));