Mengenal Fungsi dalam JavaScript

Fungsi (function) adalah blok kode yang dapat digunakan kembali untuk menjalankan tugas tertentu. Dengan fungsi, kamu bisa mengelompokkan logika program agar lebih terstruktur, efisien, dan mudah dibaca. Untuk itu dalam tutorial kali ini kita akan belajar apa itu fungsi dalam JavaScript.

Analogi sederhana:
Daripada menulis kode “buat kopi” berulang kali, cukup buat satu fungsi buatKopi() dan panggil kapan saja kamu butuh.

1. Deklarasi dan Pemanggilan Fungsi

Fungsi bisa dibuat menggunakan kata kunci function, diikuti dengan nama fungsi dan tanda kurung ().

function sapa() {
  console.log("Halo, selamat datang di JavaScript!");
}

Untuk menjalankan fungsi tersebut, cukup panggil namanya:

sapa();

Hasil di console:

Halo, selamat datang di JavaScript!

Dengan cara ini, kamu bisa memanggil fungsi sebanyak yang kamu mau tanpa menulis ulang kodenya.

2. Parameter dan Nilai Balik (return)

Fungsi juga bisa menerima parameter — yaitu data yang dikirim saat fungsi dipanggil.

Contoh dengan parameter:

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

sapaPengguna("Andi");
sapaPengguna("Dewi");

Hasil:

Halo, Andi!
Halo, Dewi!

Mengembalikan nilai dengan return

Kadang kita butuh fungsi mengirimkan hasil perhitungan ke luar fungsi. Gunakan kata kunci return.

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

let hasil = tambah(5, 3);
console.log("Hasil penjumlahan: " + hasil);

Hasil:

Hasil penjumlahan: 8

Fungsi tambah() menerima dua angka dan mengembalikan hasil penjumlahan melalui return.

3. Fungsi Anonim (Anonymous Function)

Fungsi anonim adalah fungsi tanpa nama, biasanya disimpan di dalam variabel atau digunakan sebagai callback.

Contoh:

let kali = function(x, y) {
  return x * y;
};

console.log(kali(4, 5)); // 20

Kapan digunakan?

Biasanya saat fungsi dipakai sekali saja atau sebagai parameter fungsi lain seperti event handler.

Contoh pada event:

document.getElementById("tombol").onclick = function() {
  alert("Tombol diklik!");
};

4. Arrow Function

Arrow function adalah bentuk singkat dari fungsi anonim yang diperkenalkan di JavaScript ES6.
Lebih ringkas dan mudah dibaca.

Contoh bentuk dasarnya:

const sapa = (nama) => {
  return "Halo, " + nama + "!";
};

console.log(sapa("Budi"));

Hasil:

Halo, Budi!

Untuk fungsi sederhana dengan satu baris return, tanda kurung kurawal dan return bisa dihilangkan:

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

console.log(tambah(2, 3)); // 5

Contoh Studi Kasus: Menghitung Diskon Produk

function hitungDiskon(harga, persen) {
  let potongan = (harga * persen) / 100;
  let total = harga - potongan;
  return total;
}

let hargaAkhir = hitungDiskon(100000, 20);
console.log("Harga setelah diskon: Rp" + hargaAkhir);

Hasil:

Harga setelah diskon: Rp80000

Dengan fungsi seperti ini, kamu bisa menghitung diskon untuk ratusan produk hanya dengan satu baris pemanggilan.

Kesimpulan

Fungsi adalah jantung logika program dalam JavaScript. Dengan fungsi, kamu bisa:

• Menghemat kode (tidak menulis ulang perintah yang sama).

• Menggunakan parameter dan return untuk fleksibilitas.

• Menulis kode lebih ringkas menggunakan fungsi anonim atau arrow function.

Setelah memahami fungsi, langkah berikutnya adalah manipulasi DOM (Document Object Model), agar kamu bisa berinteraksi langsung dengan elemen di halaman web seperti tombol, teks, dan gambar.