Arrow Function vs Fungsi Tradisional di JavaScript: Panduan Cepat
1
min read .
Updated on
Kadang saya masih bingung milih antara arrow function dan fungsi tradisional di JS, padahal keduanya punya kelebihan masing-masing. Gini deh, mari kita bedah dengan cepat.
1. Ringkasan Cara Definisi Fungsi
- Deklarasi Fungsi
function greet(name) { return `Hello, ${name}!`; }- Ekspresi Fungsi
const greet = function(name) { return `Hello, ${name}!`; };- Arrow Function (ES6)
const greet = (name) => `Hello, ${name}!`;2. Perbedaan Penting
-
Sintaks: Arrow function lebih ringkas. Cocok buat fungsi pendek atau inline.
-
this:- Tradisional punya
thissendiri. - Arrow mewarisi
thisdari konteks sesayarnya.
- Tradisional punya
function Trad() { this.val=42; setTimeout(function(){ console.log(this.val); },1000); }
function Arrow() { this.val=42; setTimeout(()=>{ console.log(this.val); },1000); }
new Trad(); // undefined
new Arrow(); // 42
arguments: Arrow nggak punya.
function trad() { console.log(arguments); }
const arrow = () => console.log(arguments); // error
trad(1,2,3);
arrow(1,2,3);- Konstruktor: Arrow nggak bisa dipakai dengan
new.
3. Kapan Pakai Mana
| Gunakan Arrow | Gunakan Tradisional |
|---|---|
| Fungsi pendek, inline | Butuh this sendiri |
Pertahankan this leksikal |
Butuh arguments |
Tidak perlu new |
Perlu sebagai konstruktor |
4. Tips Praktis
- Konsisten dengan gaya kode.
- Jangan mengorbankan keterbacaan cuma karena arrow lebih pendek.
- Hati-hati dengan
thisdanarguments.
Kesimpulan
Pada akhirnya, paham konteks arrow function vs tradisional bikin kode lebih jelas dan aman. Gunakan arrow buat fungsi simpel dan callback, gunakan tradisional saat butuh fleksibilitas this atau konstruktor. Snippet di atas siap dicoba, jadi tinggal eksperimen aja.
