Fungsi: resep yang bisa dipakai ulang

Bayangkan kamu butuh menghitung harga setelah diskon di sepuluh tempat berbeda. Menulis rumus yang sama sepuluh kali itu melelahkan, dan kalau rumusnya berubah, sepuluh tempat harus diedit.

Solusinya: tulis sekali, beri nama, panggil kapan saja. Itulah fungsiFungsiSekumpulan instruksi yang dibungkus jadi satu paket, supaya bisa dijalankan kapan pun dibutuhkan.Penjelasan lengkap →.

Membuat dan memanggil fungsi

function sapa() {
  console.log('Halo!');
}

sapa();
sapa();

Dua tahap yang berbeda:

1. Membuat (mendefinisikan): function sapa() { ... }. Di tahap ini belum ada yang jalan, resepnya baru ditulis.
2. Memanggil: sapa();. Kurung kecil di belakang nama itu yang menyuruh fungsinya bekerja.

Panggil dua kali, jalan dua kali.

Parameter: bahan yang bisa diganti

Biar fungsinya fleksibel, ia boleh menerima bahan yang ditulis di dalam kurung. Bahan ini disebut parameter:

function sapa(nama) {
  console.log(`Halo, ${nama}!`);
}

sapa('Rani');
sapa('Budi');

Hasilnya Halo, Rani! lalu Halo, Budi!. Fungsi yang sama, bahan berbeda. Parameter boleh lebih dari satu, dipisah koma: function tambah(a, b).

return: hasil yang dikembalikan

Sering kita tidak ingin fungsi mencetak sesuatu, melainkan menghasilkan nilai yang bisa dipakai lagi. Untuk itu ada return:

function hargaSetelahDiskon(harga, persen) {
  return harga - harga * persen / 100;
}

const bayar = hargaSetelahDiskon(50000, 20);
console.log(bayar); // 40000

return itu seperti kasir yang menyerahkan struk: nilainya keluar dari fungsi dan bisa kamu simpan ke variabel. Begitu return dijalankan, fungsi langsung selesai, baris di bawahnya dilewati.

Fungsi panah (arrow function)

Kamu akan sering melihat bentuk lain yang lebih singkat. Dua tulisan ini maksudnya sama:

function kali(a, b) {
  return a * b;
}

const kaliPanah = (a, b) => a * b;

Tanda => dibaca “menjadi”. Untuk sekarang cukup kenali bentuknya. Kita pakai function biasa karena lebih mudah dibaca pemula.

Coba sendiri

Fungsi hargaSetelahDiskon sudah ada, tapi isinya belum selesai.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Hitung diskon</title>
</head>
<body>
  <p>Lihat panel Console di bawah.</p>
  <script>
    function hargaSetelahDiskon(harga, persen) {
      // Tantangan 1: ganti 0 dengan rumus: harga - harga * persen / 100
      return 0;
    }

    console.log(hargaSetelahDiskon(50000, 20)); // harus 40000

    // Tantangan 2: panggil fungsi sekali lagi dengan angka pilihanmu
    // Tantangan 3: buat fungsi luasPersegiPanjang(panjang, lebar) yang me-return hasil kalinya
  </script>
</body>
</html>

Tantangannya:

1. Lengkapi baris return di hargaSetelahDiskon supaya hasil 50000 dengan diskon 20 persen adalah 40000.
2. Panggil fungsi itu sekali lagi dengan harga dan diskon pilihanmu, lalu cetak hasilnya.
3. Buat fungsi baru luasPersegiPanjang(panjang, lebar) yang me-return hasil kalinya.