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.
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);
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}!`);
}
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; };
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
| 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. 🎯
Kursus
JavaScript Dasar
Kategori
Fungsi
Durasi Pelajaran
20 menit