Arrow function adalah cara ringkas menulis fungsi di JavaScript menggunakan tanda panah => (disebut “arrow” atau “fat arrow”). Diperkenalkan sejak ES6 (tahun 2015), arrow function memungkinkan kamu menulis fungsi yang sama dengan sintaks yang jauh lebih pendek, dan ia juga memperlakukan kata kunci this secara berbeda dari fungsi biasa. Karena ringkas dan cocok dijadikan argumen untuk fungsi lain, arrow function sekarang jadi salah satu sintaks paling sering kamu temui di kode JavaScript modern, terutama di React, Vue, dan saat memakai array methods seperti map atau filter.

Di panduan ini kamu akan belajar apa itu arrow function, bagaimana cara membacanya, langkah demi langkah menyingkat fungsi biasa menjadi arrow, perbedaan this yang sering bikin bingung, sampai kapan sebaiknya kamu memakainya dan kapan sebaiknya tidak. Semuanya dengan contoh kode berkomentar bahasa Indonesia supaya mudah diikuti dari nol.

Apa Itu Arrow Function?

Arrow function adalah bentuk alternatif untuk menulis fungsi yang lebih singkat. Sebelum ES6, satu-satunya cara membuat fungsi adalah dengan kata kunci function. Arrow function menawarkan sintaks yang lebih padat untuk melakukan hal yang sama, dengan mengganti kata function menjadi tanda panah => yang diletakkan setelah daftar parameter.

Lihat perbandingan paling dasarnya:

// Fungsi biasa
function sapa(nama) {
  return "Halo, " + nama
}

// Arrow function, hasilnya sama persis
const sapa = (nama) => {
  return "Halo, " + nama
}

console.log(sapa("Budi")) // "Halo, Budi"

Perhatikan strukturnya: (nama) adalah parameter, lalu => menggantikan kata function, dan { ... } adalah badan fungsi (isi kode yang dijalankan). Karena arrow function tidak punya nama sendiri (ia anonymous), kita biasanya menyimpannya ke dalam sebuah variabel, di contoh ini variabel sapa, supaya bisa dipanggil lagi nanti.

Kalau kamu belum begitu paham konsep fungsi secara umum, apa itu parameter, return, dan bagaimana fungsi dipanggil, sebaiknya baca dulu bagian fungsi di panduan JavaScript untuk pemula supaya fondasinya kuat sebelum lanjut.

Perbedaan Arrow Function dan Function Biasa

Ini bagian yang paling sering dicari, jadi mari kita bedah tuntas. Meski keduanya sama-sama membuat fungsi, arrow function dan function biasa punya empat perbedaan utama yang perlu kamu tahu:

Aspek	Function biasa	Arrow function
Sintaks	Pakai kata kunci `function`	Pakai tanda panah `=>`, lebih ringkas
Kata kunci `this`	Punya `this` sendiri	Mewarisi `this` dari sekitarnya
Hoisting	Deklarasi `function` di-hoist (bisa dipanggil sebelum ditulis)	Tidak di-hoist (harus dibuat dulu, baru dipakai)
`arguments` object	Punya object `arguments` otomatis	Tidak punya `arguments`

Dua perbedaan pertama adalah yang paling penting dalam praktik. Perbedaan sintaks membuat kodemu lebih pendek dan enak dibaca, ini alasan paling umum orang memakainya. Perbedaan this adalah alasan teknis yang lebih dalam, dan justru sering jadi sumber bug kalau kamu memakai arrow function di tempat yang salah. Kita akan bahas keduanya secara terpisah di bawah.

Menyingkat Fungsi Langkah demi Langkah

Kekuatan utama arrow function adalah kemampuannya dipangkas menjadi sangat pendek. Ada dua aturan penyingkatan yang perlu kamu ingat:

Implicit return, kalau badan fungsi cuma satu ekspresi return, kamu boleh membuang kurung kurawal {} dan kata return. Nilainya otomatis dikembalikan.
Kurung parameter opsional, kalau parameternya tepat satu, tanda kurung di sekelilingnya boleh dihilangkan.

Diagram di bawah menunjukkan bagaimana sebuah fungsi biasa dipangkas bertahap menjadi arrow function paling ringkas. Perhatikan bagian yang disorot oranye di setiap langkah, itulah yang berubah:

function biasaarrow function

1
Fungsi biasaTitik awal, pakai kata kunci function.
```
const kuadrat = function (x) {
  return x * x;
}
```
2
Ganti jadi arrowHapus function, tambahkan => setelah tanda kurung.
```
const kuadrat = (x) => {
  return x * x;
}
```
3
Hapus kurung kurawalKalau isinya satu baris return, {} dan return boleh dibuang (implicit return).
```
const kuadrat = (x) => x * x;
```
4
Hapus kurung parameterKalau parameter cuma satu, tanda kurungnya opsional.
```
const kuadrat = x => x * x;
```

Perbedaan penting: this

function biasa

Punya this sendiri, nilainya tergantung siapa yang memanggil.

arrow function

Tidak punya this sendiri, mewarisi this dari sekitarnya.

Perhatikan langkah ketiga tadi: x * x langsung dikembalikan tanpa menulis return. Ini yang disebut implicit return, dan ia hanya bekerja kalau tidak ada kurung kurawal. Begitu kamu menambahkan {}, kamu wajib menulis return lagi secara eksplisit, sama seperti fungsi biasa:

// Implicit return, TANPA {} dan TANPA return
const kuadrat = (x) => x * x

// Explicit return, DENGAN {}, WAJIB tulis return
const kuadrat = (x) => {
  return x * x
}

// SALAH, ada {} tapi lupa return, hasilnya undefined!
const kuadrat = (x) => {
  x * x
}

Untuk fungsi tanpa parameter, kurungnya tetap harus ditulis (kosong). Dan untuk lebih dari satu parameter, kurungnya juga wajib:

// Tanpa parameter, kurung kosong tetap wajib
const sekarang = () => Date.now()

// Satu parameter, kurung boleh dibuang
const dobel = n => n * 2

// Dua parameter atau lebih, kurung WAJIB
const tambah = (a, b) => a + b

Kenapa Arrow Function Populer di Array Methods

Alasan kamu akan sering melihat arrow function adalah karena ia sangat pas dijadikan argumen untuk fungsi lain, terutama array methods seperti map, filter, dan reduce. Bandingkan versi lama dan versi arrow ini:

const angka = [1, 2, 3, 4]

// Cara lama dengan function biasa
const dobel = angka.map(function (n) {
  return n * 2
})

// Cara modern dengan arrow function, jauh lebih ringkas
const dobel = angka.map(n => n * 2)
// [2, 4, 6, 8]

Perhatikan betapa versi arrow menghilangkan kata function, kurung kurawal, dan return sekaligus, dari tiga baris jadi satu yang bersih dan mudah dibaca. Inilah kenapa arrow function jadi standar tak tertulis saat bekerja dengan data berbentuk array. Kalau kamu ingin memahami array methods ini lebih dalam, pelajaran arrow functions interaktif di Hyper Sheets menyediakan latihan langsung di browser tanpa perlu setup apa pun.

Soal `this`: Perbedaan yang Paling Penting

Di luar soal sintaks, ada satu perbedaan perilaku yang wajib kamu pahami: arrow function tidak punya this sendiri. Fungsi biasa membuat this baru tergantung bagaimana ia dipanggil, sedangkan arrow function “meminjam” this dari lingkungan tempat ia ditulis (disebut lexical this). Perbedaan ini sering menyelamatkan, tapi juga bisa menjebak.

Contoh klasik di mana arrow function justru menyelamatkan, di dalam sebuah method yang punya callback:

const timer = {
  detik: 0,
  mulai() {
    setInterval(() => {
      this.detik++   // "this" tetap merujuk ke object timer
      console.log(this.detik)
    }, 1000)
  }
}

timer.mulai() // 1, 2, 3, ... (berjalan benar)

Kalau callback di dalam setInterval di atas ditulis dengan function biasa, this di dalamnya tidak lagi merujuk ke timer dan this.detik akan menjadi undefined. Arrow function mewarisi this dari method mulai, sehingga tetap menunjuk ke object yang benar.

Tapi sifat yang sama juga bisa menjebak. Jangan pakai arrow function untuk mendefinisikan method langsung di dalam object:

const user = {
  nama: "Sari",
  // SALAH, arrow function tidak punya "this" sendiri
  sapa: () => {
    return "Halo, " + this.nama  // this.nama = undefined!
  }
}

console.log(user.sapa()) // "Halo, undefined"

Di sini this tidak menunjuk ke user, melainkan ke this di luar object (biasanya window atau undefined). Untuk method di dalam object, pakailah fungsi biasa atau shorthand method (sapa() { ... }).

Konsep this memang salah satu bagian JavaScript yang paling membingungkan pemula. Kalau bagian ini masih terasa abstrak, wajar, ia akan makin jelas seiring kamu banyak menulis kode. Konsep yang sama juga muncul saat kamu belajar komponen di React dari nol, di mana arrow function dipakai di mana-mana untuk event handler.

Kapan Sebaiknya Pakai Arrow Function?

Setelah paham semua di atas, ini panduan praktis kapan memilih masing-masing:

Pakai arrow function untuk:

Callback singkat pada array methods (map, filter, reduce, forEach).
Callback pada setTimeout, setInterval, dan Promise (.then).
Event handler di React yang perlu mengakses this atau state dari komponen sekitarnya.
Fungsi satu baris sederhana yang cuma mengubah input jadi output.

Pakai fungsi biasa (function) untuk:

Method di dalam object atau class yang perlu this menunjuk ke object-nya.
Fungsi utama yang ingin kamu beri nama jelas dan mungkin dipanggil sebelum didefinisikan (memanfaatkan hoisting).
Constructor function (arrow function tidak bisa dipakai sebagai constructor dengan new).

Cek Pemahaman

Apa hasil dari arrow function ini: const f = (x) => { x * x }; console.log(f(5))?

FAQ Seputar Arrow Function

Apa itu arrow function dengan bahasa sederhana?

Arrow function adalah cara singkat menulis fungsi di JavaScript memakai tanda panah => daripada kata function. Fungsinya sama, menerima input, mengolahnya, dan mengembalikan hasil, hanya tulisannya lebih pendek. Selain lebih ringkas, ia juga memperlakukan this dengan mewarisinya dari kode di sekitarnya, bukan membuat this baru.

Apa perbedaan arrow function dan function biasa?

Ada empat: arrow function sintaksnya lebih ringkas, tidak punya this sendiri (mewarisi dari sekitarnya), tidak di-hoist, dan tidak punya object arguments. Yang paling sering berdampak dalam praktik adalah dua yang pertama, sintaks yang lebih pendek dan perilaku this. Untuk method di dalam object, tetap pakai fungsi biasa; untuk callback pendek, arrow function lebih cocok.

Kapan sebaiknya tidak memakai arrow function?

Hindari arrow function untuk method di dalam object atau class yang membutuhkan this merujuk ke object tersebut, karena arrow function tidak punya this sendiri. Juga jangan pakai sebagai constructor (dengan new) atau saat kamu butuh object arguments. Di situasi-situasi itu, fungsi biasa adalah pilihan yang benar.

Apakah arrow function lebih cepat dari function biasa?

Tidak secara signifikan. Perbedaan performanya bisa diabaikan dalam praktik sehari-hari. Alasan orang memilih arrow function bukan soal kecepatan, melainkan soal keringkasan sintaks dan perilaku this yang lebih mudah diprediksi di dalam callback. Pilih berdasarkan kejelasan kode, bukan performa.

Kenapa arrow function saya mengembalikan undefined?

Penyebab paling umum adalah menaruh kurung kurawal {} tapi lupa menulis return. Kalau kamu menulis (x) => { x * x }, JavaScript menganggap {} sebagai blok kode dan tidak ada nilai yang dikembalikan, sehingga hasilnya undefined. Solusinya: buang kurung kurawalnya ((x) => x * x) untuk implicit return, atau tambahkan return di dalam kurung kurawal.

Apakah arrow function bagian dari ES6?

Ya, arrow function diperkenalkan di ES6 (juga disebut ES2015), rilis besar JavaScript pada tahun 2015 yang membawa banyak fitur modern seperti let, const, template literals, dan destructuring. Semua browser modern sudah mendukungnya penuh, jadi kamu bisa memakainya dengan aman tanpa khawatir kompatibilitas.

Kesimpulan

Arrow function adalah alat wajib dalam JavaScript modern: ia membuat fungsi lebih ringkas dan menangani this dengan cara yang sering lebih intuitif untuk callback. Kuncinya bukan menghafal, tapi memahami dua hal, aturan penyingkatan (implicit return dan kurung parameter opsional) serta perilaku this yang diwarisi dari sekitarnya. Begitu kamu paham kapan memakai arrow dan kapan tetap memakai fungsi biasa, kodemu akan jauh lebih bersih dan bebas dari bug this yang membingungkan.

Cara terbaik memahaminya adalah dengan praktik langsung. Coba pelajaran arrow functions di Hyper Sheets untuk berlatih menyingkat fungsi dan melihat perilaku this secara interaktif, lalu lanjutkan mendalami dasar-dasar bahasa lewat panduan lengkap JavaScript untuk pemula.