Fungsi JavaScript: Menulis Blok Kode yang Bisa Dipakai Ulang

Bayangkan kamu sudah menulis sepuluh baris kode untuk menghitung total harga pesanan beserta pajaknya. Lalu ternyata perhitungan yang sama itu kamu butuhkan lagi di lima tempat berbeda dalam programmu. Masa iya kamu salin-tempel sepuluh baris itu lima kali? Jangan, itu cuma bikin repot sendiri pas mau diperbaiki nanti. Yang benar, kamu bungkus kode itu jadi satu fungsi: blok kode yang diberi nama, bisa kamu pakai ulang, dan bisa kamu jalankan kapan saja, sesering yang kamu mau.

Fungsi termasuk salah satu konsep terpenting dalam pemrograman. Dengan fungsi, kodemu jadi lebih rapi, kamu nggak perlu menulis hal yang sama berulang-ulang, dan masalah besar bisa kamu pecah menjadi potongan-potongan kecil yang gampang ditangani. Yuk, kita lihat cara kerjanya.

Fungsi itu apa

Fungsi adalah blok kode yang punya nama. Kamu cukup mendefinisikannya sekali, lalu memanggilnya (menjalankannya) kapan pun kamu butuh. Ini contoh fungsi yang paling sederhana:

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

sapa();   // menjalankan fungsinya — mencetak "Halo!"
sapa();   // jalankan lagi — mencetak "Halo!" lagi

Ada dua langkah yang sebenarnya berbeda di sini:

• Mendefinisikan fungsi: function sapa() { ... } membuat fungsinya dan memberinya nama, tapi kode di dalamnya belum dijalankan.
• Memanggil fungsi: sapa() — nama yang diikuti tanda kurung — inilah yang benar-benar menjalankan kodenya.

Coba perhatikan, kita memanggil sapa() dua kali dan keduanya jalan. Nah, itulah inti dari fungsi: tulis kodenya sekali, jalankan sesering yang kamu mau. Tanda kurung ()-lah yang menjadi pemicu fungsi untuk berjalan.

Parameter: memberi masukan ke fungsi

Fungsi jadi jauh lebih berguna kalau kamu bisa memberinya informasi yang berbeda-beda setiap kali dipanggil. Masukan semacam ini disebut parameter, dan tempatnya di dalam tanda kurung:

function sapa(nama) {
  console.log("Halo, " + nama + "!");
}

sapa("John Doe");   // "Halo, John Doe!"
sapa("Jane Doe");   // "Halo, Jane Doe!"

Di sini nama berperan sebagai parameter — semacam tempat kosong yang nantinya kamu isi dengan nilai saat memanggil fungsinya. Begitu kamu memanggil sapa("John Doe"), nilai "John Doe" masuk ke dalam, dan nama bernilai "John Doe" selama fungsi itu berjalan. Fungsi yang sama bisa menghasilkan keluaran yang berbeda, tergantung nilai apa yang kamu berikan. Keluwesan seperti inilah yang membuat fungsi begitu berguna.

Satu fungsi juga bisa menerima beberapa parameter sekaligus, cukup dipisahkan dengan koma:

function tambah(a, b) {
  console.log(a + b);
}

tambah(5, 3);   // mencetak 8

Nilai kembalian: mendapatkan hasil dari fungsi

Sampai sini, fungsi kita baru sebatas mencetak sesuatu. Padahal sering kali kamu ingin fungsi menghitung sebuah hasil, lalu menyerahkan hasil itu balik ke kamu supaya bisa kamu pakai lagi. Di sinilah peran kata kunci return:

function tambah(a, b) {
  return a + b;
}

const jumlah = tambah(5, 3);   // jumlah sekarang bernilai 8
console.log(jumlah);           // mencetak 8

Perbedaannya penting. Kalau tadi hasilnya langsung dicetak di dalam fungsi, sekarang tambah justru mengembalikan hasilnya, lalu kita tampung ke variabel jumlah. Fungsi yang mengembalikan nilai itu ibarat mesin kecil: kamu masukkan beberapa nilai (argumennya), lalu mesin itu mengeluarkan satu nilai (hasil kembaliannya) yang bisa kamu simpan, kamu olah lagi dalam perhitungan lain, atau kamu oper ke fungsi berikutnya.

Ada dua hal penting soal return:

• return mengirim sebuah nilai kembali ke tempat fungsi itu dipanggil.
• return juga langsung menghentikan fungsi — baris kode apa pun setelah return tidak akan dijalankan.

Fungsi yang tidak punya return otomatis mengembalikan undefined. Jadi, pakailah return setiap kali kamu ingin fungsi menghasilkan sebuah nilai, bukan sekadar melakukan suatu aksi.

Kenapa fungsi itu penting: jangan menulis hal yang sama berulang-ulang

Manfaat fungsi yang sebenarnya baru terasa lewat contoh nyata. Misalkan kamu perlu menghitung harga setelah pajak di beberapa tempat sekaligus:

function hargaDenganPajak(harga) {
  return harga * 1.11;   // tambah pajak 11%
}

const buku = hargaDenganPajak(50000);    // 55500
const pena = hargaDenganPajak(10000);    // 11100
const total = hargaDenganPajak(200000);  // 222000

Perhitungan pajaknya cukup ada di satu tempat saja. Kalau suatu saat tarif pajaknya berubah, kamu tinggal mengubah satu baris, dan semua perhitungan di seluruh programmu langsung ikut benar. Tanpa fungsi, kamu harus mencari satu per satu setiap * 1.11 lalu menggantinya manual — melelahkan dan rawan salah. Prinsip ini bahkan punya nama: DRY — Don’t Repeat Yourself (jangan menulis hal yang sama berulang kali). Fungsi adalah cara utama untuk menjalankan prinsip ini.

Arrow function: cara penulisan yang lebih ringkas

JavaScript modern punya cara yang lebih singkat untuk menulis fungsi, namanya arrow function. Bentuk ini muncul di mana-mana pada kode masa kini, jadi penting buat kamu mengenalinya. Ini fungsi tambah yang tadi, ditulis dalam dua gaya:

// Fungsi tradisional
function tambah(a, b) {
  return a + b;
}

// Arrow function — fungsinya sama, tulisannya lebih pendek
const tambah = (a, b) => {
  return a + b;
};

Arrow function memakai tanda => (si “panah”) sebagai pengganti kata kunci function, lalu hasilnya disimpan ke dalam sebuah variabel. Untuk fungsi sederhana yang isinya cuma mengembalikan sebuah nilai, kamu bahkan bisa memangkasnya lebih jauh — hilangkan kurung kurawal dan kata return-nya:

const tambah = (a, b) => a + b;

Satu baris itu hasilnya sama persis dengan dua versi sebelumnya. Arrow function paling sering dipakai saat kamu mengoper sebuah fungsi ke dalam fungsi lain (hal yang nanti bakal sering kamu lakukan dengan array, yang akan kita bahas setelah ini). Untuk sekarang, cukup ingat bahwa => itu menandakan sebuah fungsi — begitu kamu melihatnya, bacalah sebagai “fungsi yang menerima masukan ini, lalu mengembalikan ini.”

Contoh lengkap

Sekarang mari kita rangkai semuanya lewat satu fungsi kecil yang cukup realistis — memakai parameter, sebuah kondisi, dan sebuah nilai kembalian:

function ambilDiskon(harga, anggota) {
  if (anggota) {
    return harga * 0.9;   // anggota dapat potongan 10%
  }
  return harga;           // non-anggota bayar harga penuh
}

console.log(ambilDiskon(100000, true));    // 90000
console.log(ambilDiskon(100000, false));   // 100000

Fungsi ini menerima dua masukan, mengambil keputusan berdasarkan salah satunya, lalu mengembalikan hasil yang sesuai. Di sini semua hal dari beberapa artikel sebelumnya berkumpul — variabel, percabangan kondisi, dan sekarang fungsi — menjadi satu potongan kode yang berguna dan bisa dipakai ulang. Beginilah kira-kira wujud pemrograman yang sesungguhnya mulai terlihat.

Penutup

Fungsi adalah cara kamu merapikan dan memakai ulang kode, dan sekarang dasar-dasarnya sudah kamu pegang:

• Sebuah fungsi adalah blok kode bernama yang bisa dipakai ulang. Kamu mendefinisikannya sekali, lalu memanggilnya (dengan ()) sesering yang kamu mau.
• Parameter (di dalam tanda kurung) membuat kamu bisa mengoper masukan yang berbeda setiap kali, sehingga satu fungsi sanggup menangani banyak situasi.
• return mengirim sebuah nilai balik ke pemanggil sekaligus menghentikan fungsinya — pakai ini saat kamu ingin fungsi menghasilkan sesuatu.
• Fungsi menjaga kodemu tetap DRY (Don’t Repeat Yourself): tulis logikanya sekali, pakai di mana-mana, dan ubah cukup di satu tempat.
• Arrow function ((a, b) => a + b) adalah bentuk ringkas modern yang akan terus kamu temui di JavaScript masa kini.

Dengan bekal fungsi, kamu sudah bisa menyusun program yang benar-benar berukuran dan rumit. Berikutnya, kita akan melihat bagaimana JavaScript menyimpan sekumpulan nilai — array dan objek — yang kalau digabungkan dengan fungsi, akan membuka sebagian besar hal yang nanti kamu bangun sehari-hari.