Halo! Kembali lagi di seri tutorial JavaScript. Kali ini kita akan membahas tentang functions — salah satu konsep paling penting dalam JavaScript.
Pernah nggak sih kamu nulis kode yang sama berulang-ulang? Misalnya, kode untuk menghitung diskon di beberapa tempat yang berbeda. Kalau harus copy-paste terus, capek kan? Belum lagi kalau ada error, harus edit di banyak tempat.
Nah, function adalah solusinya! Dengan function, kamu bisa membuat kode yang bisa dipakai berulang kali tanpa harus nulis ulang. Prinsipnya DRY banget — Don’t Repeat Yourself.
Yuk, kita bedah satu per satu!
Apa Itu Function?
Secara simpel, function adalah blok kode yang bisa dipanggil berulang kali. Kamu bisa memberikan input (parameter) dan function akan menghasilkan output (return value).
Bayangin function itu kayak mesin vending machine:
- Input: kamu masukkan uang dan pilih nomor
- Proses: mesin memproses pesanan kamu
- Output: makanan atau minuman keluar
Begitu juga dengan function — kamu kasih data masuk, function proses, dan hasilnya keluar.
Function Declaration
Cara paling dasar membuat function di JavaScript pakai function declaration:
function sapaPengguna(nama) {
console.log("Halo, " + nama + "! Selamat datang di belajar JavaScript!");
}
// Memanggil function
sapaPengguna("Andika");
// Output: Halo, Andika! Selamat datang di belajar JavaScript!
Ada beberapa bagian penting di sini:
function: keyword untuk mendeklarasikan functionsapaPengguna: nama function (usahakan deskriptif ya!)(nama): parameter — variabel yang diterima function{...}: body function — kode yang akan dijalankan
Hoisting pada Function Declaration
Yang menarik, function declaration itu di-hoisted — artinya bisa dipanggil sebelum didefinisikan:
// Bisa dipanggil dulu, baru didefinisikan di bawah
hitungLuasPersegi(5);
function hitungLuasPersegi(sisi) {
console.log("Luas persegi: " + (sisi * sisi));
}
// Output: Luas persegi: 25
Tapi ingat, ini cuma berlaku untuk function declaration ya. Kalau pakai expression (kita bahas sebentar lagi), nggak bisa.
Function Expression
Selain declaration, kamu juga bisa membuat function pakai expression — yaitu menyimpan function di dalam variabel:
const kaliDua = function(angka) {
return angka * 2;
};
console.log(kaliDua(5)); // Output: 10
console.log(kaliDua(10)); // Output: 20
Perbedaan utama dengan declaration:
// ❌ Error! Function expression nggak di-hoisted
cetakPesan("Hello");
const cetakPesan = function(pesan) {
console.log(pesan);
};
// ✅ Ini baru benar
cetakPesan("Hello"); // Output: Hello
Jadi kalau pakai expression, pastikan function sudah didefinisikan sebelum dipanggil ya.
Arrow Function
ES6 (ECMAScript 2015) mengenalkan arrow function — cara yang lebih ringkas untuk menulis function:
// Syntax lama (function expression)
const tambahLama = function(a, b) {
return a + b;
};
// Syntax baru (arrow function)
const tambah = (a, b) => a + b;
console.log(tambah(3, 4)); // Output: 7
Arrow function punya beberapa shorthand:
// Satu parameter — tanda kurung bisa dihilangkan
const kuadrat = angka => angka * angka;
console.log(kuadrat(5)); // Output: 25
// Body lebih dari satu baris — pakai kurung kurawal
const proses = (nilai) => {
const doubled = nilai * 2;
const result = doubled + 10;
return result;
};
console.log(proses(3)); // Output: 16
// Return object — pakai kurung tambahan
const buatUser = (nama, usia) => ({ nama, usia });
console.log(buatUser("Budi", 25));
// Output: { nama: "Budi", usia: 25 }
Kapan Pakai Arrow Function?
Gunakan arrow function saat:
- Butuh syntax yang ringkas
- Membuat callback function
- Butuh implicitly return (tanpa tulis
return)
Tapi jangan pakai arrow function untuk:
- Method pada object (karena
this-nya beda) - Constructor function
- Function yang butuh
thisdari konteks pemanggil
Parameters dan Arguments
Seringkali istilah parameter dan argument dipakai bergantian, tapi sebenarnya beda:
- Parameter: variabel di definisi function (daftar input)
- Argument: nilai aktual yang dikirim saat memanggil function
function hitungTotal(harga, jumlah) { // harga dan jumlah = parameter
return harga * jumlah;
}
const totalBelanja = hitungTotal(50000, 3); // 50000 dan 3 = argument
console.log(totalBelanja); // Output: 150000
Default Parameters
JavaScript memungkinkan kamu memberikan nilai default untuk parameter:
function sapa(nama = "Teman", ucapan = "Selamat pagi") {
console.log(ucapan + ", " + nama + "!");
}
sapa(); // Output: Selamat pagi, teman!
sapa("Rina"); // Output: Selamat pagi, Rina!
sapa("Rina", "Halo"); // Output: Halo, Rina!
Kalau argument nggak dikirim, function akan pakai nilai default. Super praktis!
Rest Parameters
Kadang kamu nggak tahu berapa banyak argument yang akan dikirim. Pakai rest parameter (...) untuk menangkap semua argument:
function jumlahkanSemua(...angka) {
let total = 0;
for (const angka_item of angka) {
total += angka_item;
}
return total;
}
console.log(jumlahkanSemua(1, 2, 3)); // Output: 6
console.log(jumlahkanSemua(10, 20, 30, 40)); // Output: 100
Return Value
Function bisa mengembalikan nilai pakai keyword return:
function hitungLuasLingkaran(jariJari) {
const phi = 3.14159;
return phi * jariJari * jariJari;
}
const luas = hitungLuasLingkaran(7);
console.log("Luas lingkaran: " + luas.toFixed(2));
// Output: Luas lingkaran: 153.94
Beberapa hal penting tentang return:
// Function tanpa return akan mengembalikan undefined
function cetakPesan(pesan) {
console.log(pesan);
}
const hasil = cetakPesan("Halo");
console.log(hasil); // Output: undefined
// Bisa return multiple values pakai array atau object
function getMinMax(arr) {
return {
min: Math.min(...arr),
max: Math.max(...arr)
};
}
const data = [5, 2, 8, 1, 9, 3];
const stats = getMinMax(data);
console.log(stats); // Output: { min: 1, max: 9 }
Scope
Scope menentukan di mana variabel bisa diakses. Ada tiga jenis scope di JavaScript:
Local Scope
Variabel yang didefinisikan di dalam function hanya bisa diakses di dalam function tersebut:
function hitungDisc(harga) {
const diskon = 0.1; // ini local scope
const hargaSetelahDiskon = harga - (harga * diskon);
return hargaSetelahDiskon;
}
const hargaBarang = 100000;
const hargaFinal = hitungDisc(hargaBarang);
console.log(hargaFinal); // Output: 90000
console.log(diskon); // ❌ Error! diskon is not defined
Global Scope
Variabel yang didefinisikan di luar function bisa diakses di mana saja:
const mataUang = "IDR"; // global scope
function tampilHarga(harga) {
console.log(mataUang + " " + harga);
}
tampilHarga(50000); // Output: IDR 50000
console.log(mataUang); // Output: IDR
Tapi hati-hati — terlalu banyak global variable bisa bikin kode sulit di-maintain. Lebih baik pakai local scope kalau memungkinkan.
Block Scope (ES6)
Dengan let dan const, variabel punya block scope:
function prosesData() {
for (let i = 0; i < 5; i++) {
const status = i % 2 === 0 ? "genap" : "ganjil";
console.log(i + " adalah " + status);
}
// console.log(i); // ❌ Error! i tidak bisa diakses di luar
// console.log(status); // ❌ Error! status juga tidak bisa diakses
}
prosesData();
Callback Function
Callback adalah function yang dikirim sebagai argument ke function lain, dan dipanggil (di-callback) oleh function tersebut:
function prosesData(data, callback) {
console.log("Memproses data...");
callback(data);
}
function tampilkanData(data) {
console.log("Data diterima:", data);
}
// Menggunakan callback
prosesData([1, 2, 3], tampilkanData);
// Output:
// Memproses data...
// Data diterima: [1, 2, 3]
Contoh Real-World: Event Handler
Dalam JavaScript modern, callback sering dipakai untuk event handling:
// Fungsi yang akan dijalankan saat tombol diklik
function handleKlik(event) {
console.log("Tombol diklik!");
console.log("Target:", event.target.textContent);
}
// Menggunakan callback pada event listener
document.getElementById("myButton").addEventListener("click", handleKlik);
Contoh: Sorting dengan Callback
Array method seperti sort() menerima callback untuk menentukan cara pengurutan:
const produk = [
{ nama: "Laptop", harga: 10000000 },
{ nama: "Mouse", harga: 150000 },
{ nama: "Keyboard", harga: 350000 },
{ nama: "Monitor", harga: 2500000 }
];
// Sort berdasarkan harga (ascending)
const sortedByHarga = [...produk].sort((a, b) => a.harga - b.harga);
console.log("Termurah ke Termahal:");
sortedByHarga.forEach(item => {
console.log(`${item.nama}: Rp ${item.harga.toLocaleString()}`);
});
Tips Menulis Function yang Baik
Berikut beberapa tips supaya function-mu rapi dan mudah dipahami:
1. Satu Function, Satu Tugas
// ❌ Buruk — function melakukan terlalu banyak hal
function prosesPesanan(pesanan) {
// validasi, hitung total, simpan ke database, kirim email...
}
// ✅ Bagus — pisahkan tanggung jawab
function validasiPesanan(pesanan) { /* ... */ }
function hitungTotal(pesanan) { /* ... */ }
function simpanPesanan(pesanan) { /* ... */ }
function kirimKonfirmasi(email) { /* ... */ }
2. Gunakan Nama yang Deskriptif
// ❌ Kurang jelas
function f(x) { return x * 2; }
// ✅ Jelas dan mudah dipahami
function kalikanDua(angka) { return angka * 2; }
3. Jangan Terlalu Panjang
Kalau function sudah lebih dari 30-40 baris, pertimbangkan untuk memecahnya jadi function-function kecil.
4. Hindari Side Effects yang Tidak Perlu
// ❌ Side effect — mengubah variabel di luar function
let total = 0;
function tambahKeTotal(nilai) {
total += nilai;
}
// ✅ Pure function — tidak mengubah state luar
function tambah(a, b) {
return a + b;
}
Ringkasan
| Konsep | Fungsi | Contoh |
|---|---|---|
| Function Declaration | Definisi function | function nama() { } |
| Function Expression | Simpan function di variabel | const nama = function() { } |
| Arrow Function | Syntax ringkas | const nama = () => { } |
| Parameter | Input function | function test(a, b) |
| Return | Output function | return hasil |
| Scope | Jangkauan variabel | Local, Global, Block |
| Callback | Function sebagai argument | forEach(callback) |
Kesimpulan
Functions adalah pondasi penting dalam JavaScript. Dengan memahami function, Anda bisa menulis kode yang reusable, terorganisir, dan mudah di-maintain.
Di artikel selanjutnya, kita akan belajar tentang Arrays & Objects — dua tipe data yang sangat penting di JavaScript.
