Coba bandingin dua cara nulis fungsi yang sama:

function kaliDua(n) { return n * 2; }
const kaliDua = n => n * 2;

Hasil identik. Yang kedua jauh lebih ringkas — gak perlu kata kunci function, gak perlu return, gak perlu kurung kurawal kalau cuma 1 ekspresi. Itu arrow function — sintaks modern yang dirilis di ES6 (2015) dan langsung jadi default cara nulis fungsi anonim di JavaScript modern.

🤔 Bukan cuma sekadar shortcut. Arrow function punya satu perbedaan KUNCI dari function biasa: dia gak punya this sendiri, dia minjem this dari scope luar (lexical). Ini yang bikin arrow function jadi favorit di callback — gak ada lagi drama "this hilang di setTimeout" yang dulu bikin developer frustasi.

// Fungsi biasa
function tambah(a, b) {
  return a + b;
}

// Arrow function
const tambah = (a, b) => {
  return a + b;
};

// Lebih singkat (implicit return)
const tambah = (a, b) => a + b;

Aturan penulisan:

• Satu parameter — kurung boleh dihilangkan: const kaliDua = n => n * 2;
• Tanpa parameter — kurung wajib: const sapa = () => "Halo!";
• Satu baris — return dan {} bisa dihilangkan (implicit return)
• Multi-baris — perlu {} dan return eksplisit

// Array methods + arrow function
const angka = [1, 2, 3, 4, 5];
const genap = angka.filter(n => n % 2 === 0);
const kaliTiga = angka.map(n => n * 3);

🎭 Analogi sehari-hari

Arrow function = order di tukang kopi keliling. Cara biasa: "Selamat siang Pak, mohon maaf mengganggu, saya ingin memesan satu cangkir kopi dengan tambahan gula." Cara arrow: "Bang, kopi gula." Dua-duanya dapat kopi sama enaknya — beda cuma berapa kata yang kamu buang waktu nulisnya. Pas kamu lagi ngolah array 1000 elemen pake .map(), kamu mau tiap operasi ditulis kayak surat dinas atau cukup "kopi gula"?

⚠️ Jebakan yang sering ditemui

1. Implicit return cuma jalan kalau TIDAK pakai {}.

const f = n => n * 2;        // ✅ return n * 2
const f = n => { n * 2; };   // ❌ return undefined
const f = n => { return n * 2; }; // ✅ explicit return

2. Return object literal harus dibungkus (...).

const buat = (n) => { nama: n };       // ❌ {} dianggap block
const buat = (n) => ({ nama: n });     // ✅ () bilang ke JS: ini object

3. Arrow function TIDAK punya this sendiri — meminjam dari luar.

const obj = {
  nama: "Budi",
  sapa: () => `Halo ${this.nama}`,  // ❌ this = window, undefined
  sapa2: function() { return `Halo ${this.nama}`; }, // ✅ this = obj
};

4. Tidak bisa jadi constructor.

const F = () => {};
new F();   // ❌ TypeError: F is not a constructor

🧪 Tebakan cepat — this di arrow vs function. Tanpa run, tebak output:

const obj = {
  nama: "Budi",
  sapaArrow: () => `Halo ${this.nama}`,
  sapaBiasa: function() { return `Halo ${this.nama}`; },
  sapaDelayed: function() {
    setTimeout(function() { console.log(this.nama); }, 0);
  },
  sapaDelayedArrow: function() {
    setTimeout(() => console.log(this.nama), 0);
  }
};
obj.sapaArrow();           // ???
obj.sapaBiasa();           // ???
obj.sapaDelayed();         // ???
obj.sapaDelayedArrow();    // ???

Jawaban:

• sapaArrow() → "Halo undefined" (arrow inherit this dari module scope, bukan dari obj)
• sapaBiasa() → "Halo Budi" ✓ (function biasa pas dipanggil method, this = obj)
• sapaDelayed() → undefined (function biasa di setTimeout, this lost)
• sapaDelayedArrow() → "Budi" ✓ (arrow inherit this dari sapaDelayedArrow-nya yang punya this = obj)

Pelajaran: arrow function = "kantongin this dari scope luar". Function biasa = "this decided saat dipanggil". Inilah kenapa arrow paling cocok di callback yang butuh akses this luar (event handler dalam class, setTimeout dalam method).

TL;DR: Arrow function (n => n * 2) = sintaks ringkas + this lexical (inherit dari scope luar, gak punya this sendiri). Implicit return cuma kalau TIDAK pakai {}. Return object literal wajib bungkus (...). Gak bisa jadi constructor (new F() error). Cocok untuk callback inline (map/filter/setTimeout). Hindari sebagai method object — this salah. Hindari di prototype method.