Function Declaration & Expression

Function Declaration & Expression 🔧

Fungsi adalah blok kode yang dapat digunakan ulang — kumpulkan logika dalam satu nama, lalu panggil sebanyak yang dibutuhkan. Fungsi adalah fondasi dari kode yang terorganisir.


Mengapa Fungsi?

Tanpa fungsi, kode yang sama harus ditulis berulang kali:

// ❌ Tanpa fungsi — repetitif dan rawan salah
console.log('Nama: Budi, Umur: 25');
console.log('Nama: Sari, Umur: 23');
console.log('Nama: Joko, Umur: 30');

// ✅ Dengan fungsi — tulis sekali, pakai berkali-kali
function tampilkanOrang(nama, umur) {
  console.log(`Nama: ${nama}, Umur: ${umur}`);
}

tampilkanOrang('Budi', 25);
tampilkanOrang('Sari', 23);
tampilkanOrang('Joko', 30);

Function Declaration

Cara paling umum dan klasik untuk mendefinisikan fungsi:

function sapa(nama) {
  return `Halo, ${nama}!`;
}

let pesan = sapa('Budi');
console.log(pesan); // "Halo, Budi!"

// Fungsi tanpa parameter
function tampilkanWaktu() {
  let sekarang = new Date();
  console.log(`Waktu sekarang: ${sekarang.toLocaleTimeString('id-ID')}`);
}

tampilkanWaktu();

Hoisting: Function declaration bisa dipanggil sebelum didefinisikan:

sapa('Budi'); // ✅ Bekerja meski sapa() didefinisikan di bawah!

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

Function Expression

Fungsi disimpan dalam variabel. Sangat fleksibel — bisa dikirim sebagai argumen atau dikembalikan dari fungsi lain:

const sapa = function(nama) {
  return `Halo, ${nama}!`;
};

console.log(sapa('Budi')); // "Halo, Budi!"

// Tidak bisa dipanggil sebelum didefinisikan
// console.log(hitung(5)); // ❌ Error!
const hitung = function(x) { return x * 2; };

Fungsi sebagai First-Class Citizen

Di JavaScript, fungsi adalah nilai — bisa disimpan, dikirim, dan dikembalikan:

// Fungsi disimpan dalam variabel
const kali2 = function(x) { return x * 2; };

// Fungsi dikirim sebagai argumen (callback)
function terapkan(angka, operasi) {
  return operasi(angka);
}

console.log(terapkan(5, kali2));          // 10
console.log(terapkan(5, x => x + 10));   // 15

// Fungsi dikembalikan dari fungsi lain (higher-order function)
function buatPenambah(jumlah) {
  return function(angka) {
    return angka + jumlah;
  };
}

const tambah10 = buatPenambah(10);
const tambah5  = buatPenambah(5);

console.log(tambah10(3));  // 13
console.log(tambah5(3));   // 8

Perbedaan Declaration vs Expression

Aspek Function Declaration Function Expression
Sintaks function nama() {} const nama = function() {}
Hoisting Ya — bisa dipanggil sebelum didefinisikan Tidak
Nama Wajib Opsional
Penggunaan umum Fungsi utama/publik Callback, fungsi yang dikirim

💡 Tips: Gunakan function declaration untuk fungsi-fungsi utama di program kamu — lebih mudah dibaca dan bisa dipanggil di mana saja. Gunakan function expression (atau arrow function) untuk callback dan fungsi yang perlu dikirim ke fungsi lain. 🎯

Selanjutnya

Informasi Kursus

Kursus

JavaScript Dasar

Kategori

Fungsi

Durasi Pelajaran

20 menit

Pelajaran dalam Kategori Ini