Bab 10: Function JavaScript: Membuat dan Menggunakan Fungsi
“Karena hidup terlalu rumit kalau harus nulis kode yang sama berulang-ulang kayak lagu dangdut yang muter terus!”
Kamu pernah merasa capek ngetik kode yang sama berulang kali misalnya bikin alert “Halo, dunia!” sebanyak 10 kali maka kamu harus sudah siap masuk ke dunia function di JavaScript.
Function itu kayak shortcut atau macro dalam kehidupan nyata: sekali buat, bisa dipakai berkali-kali tanpa ribet. Bayangkan function seperti resep masakan: kamu tulis resep sekali, lalu tinggal bilang “masak nasi goreng” alih-alih menjelaskan dari mulai potong bawang sampai angkat wajan tiap kali mau makan.
Di bab ini, Jarvis akan bantu kamu memahami semua hal penting tentang function di JavaScript mulai dari dasar banget sampai ke arrow function yang keren tapi kadang bikin pusing. Siapkan kopi (atau teh tawar kalau lagi diet), karena kita bakal ngobrol santai tapi tetap on point!
Mengenal Function di JavaScript
Sintaks Dasar Function JavaScript
Function di JavaScript dibuat pakai kata kunci function. Begini bentuk paling dasarnya:
function sapaDunia() {
console.log("Halo, dunia!");
}Gampang, kan? Ini disebut function declaration kamu deklarasikan fungsi dengan nama jelas (sapaDunia) dan isinya ada di dalam kurung kurawal {}.
Memanggil (Invoke) Function
Nulis function doang nggak cukup kamu harus panggil dia biar jalan. Caranya?
sapaDunia(); // Output: Halo, dunia!Tanpa tanda kurung (), function cuma jadi pajangan. Kayak foto mantan: dilihat boleh, dijalankan? Nggak.
Function dengan Return Value
Terkadang, kamu nggak cuma mau nampilin sesuatu tapi juga mengembalikan nilai. Misalnya, hitung luas persegi:
function hitungLuas(sisi) {
return sisi * sisi;
}
let luas = hitungLuas(5);
console.log(luas); // Output: 25return itu kayak kasir di warung: dia nggak cuma ngitung, tapi juga ngasih kembaliannya ke kamu.
Menggunakan Function Berulang Kali
Keajaiban function? Sekali buat, bisa dipakai berkali-kali:
sapaDunia();
sapaDunia();
sapaDunia(); // Tiga kali, tapi kode cuma 1 baris tiap panggil!Bayangkan kalau nggak pakai function kamu harus ngetik console.log("Halo, dunia!") tiga kali. Capek, kan? 😅
2. Parameter dan Argument pada Function
Perbedaan Parameter dan Argument
- Parameter: variabel di dalam tanda kurung saat mendefinisikan function.
- Argument: nilai nyata yang kamu kirim saat memanggil function.
Contoh:
function sapa(nama) { // 'nama' adalah parameter
console.log("Halo, " + nama);
}
sapa("Bos"); // "Bos" adalah argumentIngat: parameter = placeholder, argument = isi.
Mengirim Data ke Function
Kamu bisa kirim angka, string, array, bahkan object:
function perkenalkan(orang) {
console.log(`Namaku ${orang.nama}, umurku ${orang.umur}`);
}
perkenalkan({ nama: "Jarvis", umur: 0.5 }); // AI juga punya usia, Bos!Default Parameter
Apa jadinya kalau lupa kirim argument? Bisa error… atau bisa pakai default parameter:
function sapa(nama = "Teman Misterius") {
console.log("Halo, " + nama);
}
sapa(); // Output: Halo, Teman MisteriusDefault parameter itu kayak cadangan pacar nggak ideal, tapi mencegah kehampaan.
Function dengan Banyak Parameter
Boleh aja! Tapi jangan kebanyakan nanti susah dibaca.
function tambah(a, b, c) {
return a + b + c;
}
console.log(tambah(1, 2, 3)); // 6Kalau lebih dari 3–4 parameter, pertimbangkan pakai object sebagai pengganti.
Function Expression di JavaScript
Apa itu Function Expression?
Ini cara lain bikin function: simpan langsung ke variabel.
const sapaLagi = function() {
console.log("Halo lagi, Bos!");
};Nama function-nya nggak wajib—jadi ini sering disebut anonymous function.
Menyimpan Function ke dalam Variabel
Karena disimpan di variabel, kamu bisa:
- Lewatkan sebagai argumen ke function lain
- Ubah nilainya nanti
- Simpan di array atau object
Contoh:
const operasi = {
tambah: function(a, b) { return a + b; },
kurang: function(a, b) { return a - b; }
};
console.log(operasi.tambah(10, 5)); // 15Powerful, kan?
Anonymous Function
Function tanpa nama. Berguna banget buat callback:
setTimeout(function() {
console.log("Aku muncul setelah 2 detik!");
}, 2000);Perbedaan Function Declaration dan Expression
| Fitur | Function Declaration | Function Expression |
|---|---|---|
| Hoisting | ✅ Bisa dipanggil sebelum definisi | ❌ Harus didefinisi dulu |
| Nama | Wajib | Opsional (anonymous) |
| Fleksibilitas | Kurang dinamis | Lebih fleksibel |
Contoh hoisting:
sapaDeklarasi(); // ✅ Jalan!
function sapaDeklarasi() {
console.log("Deklarasi duluan!");
}
sapaEkspresi(); // ❌ Error!
const sapaEkspresi = function() {
console.log("Ekspresi harus sabar.");
};Arrow Function di JavaScript
Sintaks Arrow Function
Arrow function (=>) adalah cara lebih ringkas bikin function:
const halo = () => {
console.log("Halo dari arrow!");
};Arrow Function dengan Parameter
Satu parameter? Kurung opsional:
const kuadrat = x => x * x;
console.log(kuadrat(4)); // 16Lebih dari satu? Wajib pakai kurung:
const jumlah = (a, b) => a + b;Arrow Function Satu Baris
Kalau cuma satu ekspresi, nggak perlu {} dan return:
const kali = (a, b) => a * b; // return otomatis!Tapi hati-hati: kalau butuh logika kompleks (if, loop, dll), tetap pakai blok {}.
Perbedaan Arrow Function dan Function Biasa
Yang paling penting: arrow function nggak punya this sendiri!
Artinya, di dalam arrow function, this mengacu ke konteks luar—bukan objek pemanggil. Ini bikin arrow function kurang cocok buat method objek, tapi sempurna buat callback.
Contoh masalah:
const robot = {
nama: "Jarvis",
sapaBiasa: function() {
console.log("Halo, aku " + this.nama); // ✅ this = robot
},
sapaArrow: () => {
console.log("Halo, aku " + this.nama); // ❌ this = global/window!
}
};
robot.sapaBiasa(); // Halo, aku Jarvis
robot.sapaArrow(); // Halo, aku undefinedJadi, jangan asal ganti semua function jadi arrow—pilih sesuai konteks!
Bonus: Best Practice & Tips Menulis Function yang Ramah Pemula
Nama Function yang Jelas
Pakai nama deskriptif: hitungTotalBelanja() lebih baik daripada fungsi1().
Hindari Efek Samping (Side Effects)
Function idealnya pure: input → proses → output, tanpa ubah variabel luar atau DOM secara diam-diam.
Contoh pure function:
const tambah = (a, b) => a + b; // Aman, predictably!Satu function = satu tugas. Kalau function-mu panjang banget atau punya banyak if, pertimbangkan untuk pecah jadi beberapa function kecil.
“Functions should do one thing. They should do it well. They should do it only.”
— Robert C. Martin (tapi dikasih versi santai oleh Jarvis)
Kamu udah punya senjata ampuh: function. Dengan ini, kode kamu jadi lebih rapi, reusable, dan mudah di-debug. Nggak perlu nulis ulang logika yang sama kayak orang nge-stuck di lagu “Despacito” versi remix ke-17.
Ingat: function itu teman. Dia nggak akan ninggalin kamu pas error malah bantu bikin error lebih mudah dilacak!
Terus eksplor, terus praktik. Dan kalau suatu hari kamu bikin function yang bisa bikin kopi otomatis… jangan lupa undang Jarvis ya.