Contoh Arrow Function Expression: Panduan Lengkap dengan Kode di JavaScript

Sintaks ekspresi fungsi di JavaScript menjadi jauh lebih ringkas dan elegan sejak kehadiran Arrow Function. Selain membuat penulisan kode lebih bersih, arrow function expression memiliki karakteristik unik yang sangat berguna saat bekerja dengan method array seperti map, filter, dan reduce. Yuk, kita pelajari sintaks dasar, contoh penggunaan praktis, hingga best practice-nya dalam panduan ini.

Kenapa Fungsi Panah Sangat Populer di JavaScript Modern?

Jika Anda pernah membaca kode JavaScript dari developer modern, kemungkinan besar Anda sudah sering menemukan tanda panah (=>) bertebaran di mana-mana. Arrow function memang menjadi salah satu fitur paling sering digunakan sejak diperkenalkan di ES6 (ECMAScript 2015). Tapi apa sih yang membuatnya begitu diminati?

Gampangnya begini: Arrow function adalah cara menulis fungsi yang lebih ringkas dibandingkan regular function. Selain lebih pendek, ada juga beberapa perilaku berbeda — terutama soal this — yang akan kita bahas di artikel lain. Untuk sekarang, fokus dulu ke sintaks dan contoh penggunaannya.

Nah, sebelum kita masuk ke contoh-contoh kode, coba perhatikan dulu perbandingan singkat ini. Dengan regular function, Anda harus menulis function, tanda kurung, tanda kurawal, dan keyword return. Dengan fungsi panah, semua itu bisa dipangkas habis. Lihat juga perbandingan lengkap di regular function vs fungsi panah di infanthree.com.

Regular Function vs Fungsi Panah: Perbandingan Langsung

Mari kita lihat contoh paling dasar. Misalkan kita punya array nama yang ingin diubah semua hurufnya jadi kapital:

Regular Function (Cara Lama)

const upperizedNames = ["Dimas", "Widy", "Buchori"];

// Menggunakan regular function sebagai callback
upperizedNames.map(function(name) {
 return name.toUpperCase();
});

console.log(...upperizedNames);
/* output:
 DIMAS WIDY BUCHORI
*/

Perhatikan ada beberapa “kebisingan” di sini: keyword function, tanda kurung di sekitar parameter, keyword return, dan tentu saja tanda kurawal. Untuk fungsi sesimpel ini, itu semua terasa berlebihan.

Fungsi Panah (Cara Baru)

const upperizedNames = ["Dimas", "Widy", "Buchori"];

// Menggunakan fungsi panah sebagai callback
upperizedNames.map(name => name.toUpperCase());

console.log(...upperizedNames);
/* output:
 DIMAS WIDY BUCHORI
*/

Lihat begitu simpelnya! Dari 4 baris kode menjadi 1 baris. Kita menghapus keyword function, tanda kurung (karena hanya ada satu parameter), tanda kurawal, keyword return, dan bahkan semicolon di akhir. Semua itu digantikan oleh satu tanda panah (=>).

Function Parameters (Patokan)

Di dalam fungsi panah, parameter atau “patokan” diletakkan sebelum tanda panah. Ada beberapa aturan yang perlu dipahami terkait penulisan parameter ini.

Satu Parameter

Jika fungsi hanya memiliki satu parameter, Anda boleh menulisnya tanpa tanda kurung:

// name merupakan patokan dari fungsi
const sayName = name => console.log(`Nama saya ${name}`);

sayName("Dimas");
// output: Nama saya Dimas

Perhatikan bagaimana name ditulis langsung tanpa kurung. Ini sah-sah saja karena memang hanya ada satu parameter. Tapi tunggu dulu — bagaimana jika kita punya dua parameter atau bahkan tidak ada parameter sama sekali?

Dua atau Lebih Parameter

Ketika ada dua parameter atau lebih, Anda harus membungkusnya dengan tanda kurung:

const sayHello = (name, greet) => console.log(`${greet}, ${name}!`);

sayHello("Dimas", "Selamat Pagi");
// output: Selamat Pagi, Dimas!

Aturan ini cukup mudah diingat: satu parameter = boleh tanpa kurung, lebih dari satu = wajib pakai kurung.

Tanpa Parameter

Jika fungsi tidak memerlukan parameter sama sekali, biarkan tanda kurung kosong:

const sayHello = () => console.log("Selamat pagi semuanya!");

sayHello();
// output: Selamat pagi semuanya!

Tanda kurung kosong () ini wajib ada. Anda tidak bisa menulis sayHello =>... karena JavaScript akan menganggap sayHello sebagai nama variabel, bukan parameter.

Block Body Function

Fungsi merupakan “mini program” sehingga sangat mungkin terdapat lebih dari satu logika di dalamnya. Seperti yang kita ketahui, logika-logika pada pemrograman terdiri atas banyak expression maupun statement.

Dalam contoh kode fungsi panah sebelumnya kita cuma menuliskan satu buah expression sehingga penulisannya dapat sangat ringkas. Tetapi bagaimana bila ada banyak logika di dalamnya? Jawabannya: gunakan tanda kurawal { }.

Kurawal dalam fungsi panah berfungsi sama seperti regular function, yaitu menampung body function. Penulisan kurawal jadi opsional saat body fungsi cuma terdiri atas satu expression atau statement saja.

Contoh dengan Banyak Logika

const sayHello = language => {
 // Blok dengan banyak logika
 if (language.toUpperCase() === "INDONESIA") {
 return "Selamat Pagi!";
 } else {
 return "Good Morning!";
 }
};

console.log(sayHello("Indonesia"));
// output: Selamat Pagi!

console.log(sayHello("English"));
// output: Good Morning!

Saat menggunakan kurawal, Anda harus menuliskan keyword return secara eksplisit. Ini berbeda dengan fungsi panah tanpa kurawal yang secara otomatis mengembalikan nilai dari expression yang ada di belakang tanda panah.

Implicit Return vs Explicit Return

Ini adalah konsep penting yang sering membuat developer pemula bingung. Mari kita bahas:

Implicit Return (Tanpa Kurawal)

Ketika Anda tidak menggunakan kurawal, nilai expression akan otomatis dikembalikan:

// Implicit return — tidak perlu keyword return
const tambah = (a, b) => a + b;
console.log(tambah(5, 3)); // output: 8

Baris a + b akan otomatis dikembalikan sebagai nilai fungsi. Tidak perlu menulis return a + b.

Explicit Return (Dengan Kurawal)

Ketika Anda menggunakan kurawal, Anda harus menulis return secara manual:

// Explicit return — wajib pakai keyword return
const tambah = (a, b) => {
 return a + b;
};
console.log(tambah(5, 3)); // output: 8

Keduanya menghasilkan output yang sama, tapi implicit return jauh lebih ringkas untuk fungsi sederhana.

Contoh Penggunaan di Dunia Nyata

Arrow function paling sering digunakan sebagai callback dalam metode array. Berikut beberapa contoh praktis yang sering Anda temui di kode produksi:

Filter Data

const produk = [
 { nama: "Laptop", harga: 10000000 },
 { nama: "Mouse", harga: 150000 },
 { nama: "Keyboard", harga: 350000 },
 { nama: "Monitor", harga: 2500000 },
];

// Filter produk dengan harga di atas 500 ribu
const produkMahal = produk.filter(produk => produk.harga > 500000);
console.log(produkMahal);
// output: [{ nama: "Laptop", harga: 10000000 }, { nama: "Monitor", harga: 2500000 }]

Dengan fungsi panah, baris filter jadi sangat mudah dibaca: “filter produk di mana harga lebih dari 500 ribu.” Tanpa arrow function, baris ini akan jauh lebih panjang dan kurang ekspresif.

Map untuk Transformasi Data

const harga = [100000, 250000, 500000, 1000000];

// Format harga sebagai Rupiah
const formatted = harga.map(h => `Rp${h.toLocaleString('id-ID')}`);
console.log(formatted);
// output: ["Rp100.000", "Rp250.000", "Rp500.000", "Rp1.000.000"]

Di sini kita menggunakan arrow function untuk mengubah setiap angka menjadi string Rupiah yang terformat rapi. Perhatikan juga penggunaan toLocaleString('id-ID') untuk format angka Indonesia.

Sorting dengan Fungsi Panah

const mahasiswa = [
 { nama: "Budi", nilai: 85 },
 { nama: "Andi", nilai: 92 },
 { nama: "Citra", nilai: 78 },
 { nama: "Diana", nilai: 95 },
];

// Sort berdasarkan nilai tertinggi
mahasiswa.sort((a, b) => b.nilai - a.nilai);
console.log(mahasiswa.map(m => m.nama));
// output: ["Diana", "Andi", "Budi", "Citra"]

Arrow function membuat kode sorting menjadi sangat intuitif. Cukup (a, b) => b.nilai - a.nilai dan data langsung terurut dari yang tertinggi ke terendah.

Fungsi Panah dengan Async/Await

Arrow function juga bisa digunakan dengan async/await. Ini sangat berguna untuk menulis fungsi asynchronous yang ringkas:

// Async arrow function untuk fetch data
const fetchData = async (url) => {
 try {
 const response = await fetch(url);
 const data = await response.json();
 return data;
 } catch (error) {
 console.error("Gagal mengambil data:", error);
 }
};

// Menggunakan fungsi async arrow
const user = await fetchData("https://api.example.com/user/1");
console.log(user);

Perhatikan bagaimana kita menulis async sebelum parameter dan body function menggunakan kurawal karena ada logika try/catch. Ini adalah pola yang sangat umum dalam kode JavaScript modern, terutama saat berinteraksi dengan API.

Common Mistakes yang Sering Terjadi

Ada beberapa kesalahan yang sering dilakukan developer pemula saat menggunakan arrow function:

1. Lupa Return di Block Body

// ❌ Salah — lupa return
const double = (x) => {
 x * 2;
};
console.log(double(5)); // output: undefined

// ✅ Benar — ada return
const doubleFixed = (x) => {
 return x * 2;
};
console.log(doubleFixed(5)); // output: 10

// ✅ Benar — gunakan implicit return
const doubleConcise = (x) => x * 2;
console.log(doubleConcise(5)); // output: 10

Ini adalah kesalahan paling umum. Ketika menggunakan kurawal, JavaScript tidak akan mengembalikan nilai secara otomatis. Anda harus menulis return secara eksplisit.

2. Salah Menulis Arrow pada Object Literal

// ❌ Salah — JavaScript menganggap kurawal sebagai block body
const createUser = (name) => { name: name };

// ✅ Benar — bungkus dengan kurung
const createUserFixed = (name) => ({ name: name });
console.log(createUserFixed("Dimas")); // output: { name: "Dimas" }

Ketika ingin mengembalikan object literal dari arrow function, Anda harus membungkusnya dengan kurung ( ). Tanpa kurung, JavaScript akan menganggap { name: name } sebagai block body, bukan object.

3. Menggunakan Fungsi Panah sebagai Constructor

// ❌ Error — arrow function tidak bisa jadi constructor
const Person = (name) => { this.name = name; };
const john = new Person("John"); // TypeError!

Arrow function tidak memiliki prototype dan tidak bisa digunakan dengan keyword new. Jika Anda butuh constructor, gunakan regular function atau class.

Kapan Sebaiknya Tidak Menggunakan Arrow Function?

Meskipun arrow function sangat praktis, ada situasi di mana Anda sebaiknya tetap menggunakan regular function:

• Constructor functions — Arrow function tidak bisa digunakan dengan new
• Method pada object literal — Karena this di arrow function tidak merujuk ke object itu sendiri
• Event handler yang butuh this — Jika Anda perlu this merujuk ke element DOM yang mendapat event
• Fungsi yang membutuhkan arguments object — Arrow function tidak punya arguments object

Rangkuman: Kapan Menggunakan Apa?

• 1 parameter → x =>... (tanpa kurung)
• 2+ parameter → (x, y) =>... (wajib kurung)
• Tanpa parameter → () =>... (wajib kurung kosong)
• 1 expression → x => x * 2 (implicit return, tanpa kurawal)
• Banyak logika → x => {... return... } (explicit return)
• Return object → x => ({ name: x }) (bungkus dengan kurung)

Arrow function memang lebih ringkas, tapi yang terpenting adalah memahami kapan harus menggunakannya dan kapan harus menggunakan regular function. Dengan pemahaman yang benar, kode JavaScript Anda akan jauh lebih clean dan mudah dipelihara.

Hal yang sering ditanyakan seputar Arrow Function JavaScript