Arrow Function JavaScript
catatan ngoding sederhana
Beberapa waktu lalu, saya buka kembali kode JavaScript lama yang pernah saya tulis.
Saat itu saya sadar, banyak fungsi yang sebenarnya bisa dibuat lebih ringkas.
Bukan salah, kodenya tetap jalan.
Tapi setelah mengenal arrow function, cara saya menulis JavaScript jadi sedikit berubah.
Lebih sederhana, lebih rapi, dan lebih enak dibaca.
Apa Itu Arrow Function?
Arrow function adalah cara menulis function yang lebih singkat di JavaScript modern (ES6).
Contoh function biasa:
Dengan arrow function:
JavaScript
function halo() {
return "Halo JavaScript";
}
JavaScript
const halo = () => "Halo JavaScript";
Secara fungsi sama, tapi penulisannya lebih ringkas.
Kenapa Arrow Function Banyak Dipakai?
Dari pengalaman ngoding sehari-hari, arrow function sering dipakai karena:
- Kode jadi lebih pendek
- Mudah dibaca
- Cocok untuk fungsi sederhana
- Sangat pas untuk callback dan event
Bukan berarti function biasa itu buruk, hanya saja arrow function sering lebih praktis.
Bentuk Dasar Arrow Function
Tanpa Parameter
JavaScript
const pesan = () => {
console.log("Belajar JavaScript pelan-pelan");
};
Satu Parameter
Jika hanya satu parameter, tanda kurung boleh dihilangkan.
JavaScript
const sapa = nama => {
return `Halo ${nama}`;
};
Atau versi lebih ringkas:
Lebih dari Satu Parameter
Biasanya dipakai untuk fungsi kecil yang sering digunakan.
Arrow Function dan Array
Arrow function sangat nyaman digunakan saat bekerja dengan array.
Kode seperti ini mudah dipahami, bahkan saat dibaca ulang beberapa hari kemudian.
Contoh Penggunaan di DOM
Kasus yang sering ditemui saat membuat halaman interaktif.
Sederhana dan jelas.
Catatan Penting Tentang this
Ini bagian yang sering membingungkan, terutama untuk pemula.
Arrow function tidak memiliki this sendiri.
Contoh yang sering menimbulkan kebingungan:
Hasilnya undefined, karena this tidak mengarah ke object user.
Jika membuat method di dalam object dan membutuhkan this, gunakan function biasa:
Kapan Arrow Function Sebaiknya Digunakan?
JavaScript
const sapa = nama => `Halo ${nama}`;
JavaScript
const tambah = (a, b) => a + b;
JavaScript
const angka = [1, 2, 3, 4];
const hasil = angka.map(n => n * 2);
console.log(hasil);
Html
<button id="btn">Klik</button>
JavaScript
document.getElementById("btn").addEventListener("click", () => {
alert("Tombol diklik");
});
JavaScript
const user = {
nama: "Budi",
sapa: () => {
console.log(this.nama);
}
};
JavaScript
const user = {
nama: "Budi",
sapa: function () {
console.log(this.nama);
}
};
Berdasarkan pengalaman, arrow function cocok digunakan untuk:
Callback
Event handler
Array method
Fungsi singkat
Dan sebaiknya dihindari untuk:
Method object
Kasus yang membutuhkan this
Penutup
Arrow function bukan sekadar gaya penulisan, tapi alat untuk membuat kode lebih nyaman dibaca dan dirawat.
Bagi pemula, tidak perlu memaksakan diri menggunakannya di semua tempat.
Gunakan seperlunya, pahami pelan-pelan, dan praktikkan sesering mungkin.
