Home / JavaScript / Tutorial Arrow Function di JavaScript

Tutorial Arrow Function di JavaScript

Created at 30 November 2025 by Aris Munandar

Arrow function adalah salah satu fitur ES6 yang paling populer dan paling sering digunakan dalam JavaScript modern. Jika Anda pernah belajar JavaScript sebelumnya, pasti sering melihat simbol => dalam berbagai dokumentasi, tutorial, maupun kode JavaScript di internet.

Fitur ini bukan hanya membuat kode lebih ringkas, tetapi juga membawa perubahan besar pada cara JavaScript menangani konteks this dan penulisan fungsi secara umum.

Bagi pemula yang ingin belajar JavaScript modern, arrow function adalah fitur krusial yang wajib dikuasai. Framework modern seperti React, Vue, hingga Node.js sangat sering menggunakannya. Karena itu, memahami arrow function secara mendalam akan membuat Anda lebih siap dalam mengembangkan aplikasi yang lebih besar dan kompleks.

Daftar isi

Apa Itu Arrow Function JavaScript
Sintaks Dasar Arrow Function
Arrow Function Single-line & Multi-line
Arrow Function dalam Callback
Arrow Function pada Array Method (map, filter, reduce)
Cara Menulis Arrow Function yang Benar
Kelebihan & Kekurangan Arrow Function
Kesimpulan

Apa Itu Arrow Function JavaScript

Arrow function adalah cara baru menuliskan fungsi di JavaScript yang diperkenalkan pada standar ES6 (ECMAScript 2015). Fitur ini hadir sebagai solusi untuk membuat penulisan fungsi menjadi lebih ringkas, mudah dibaca, dan lebih nyaman digunakan terutama ketika dipakai sebagai callback, fungsi kecil, atau fungsi yang tidak membutuhkan deklarasi panjang.

Arrow function menggunakan simbol khusus => yang menjadikannya berbeda dari fungsi tradisional. Secara visual, penulisan kode menjadi lebih pendek dan lebih modern. Inilah alasan mengapa arrow function sangat populer dan digunakan hampir di semua proyek JavaScript masa kini—mulai dari vanilla JavaScript, Node.js, hingga framework seperti React, Vue, dan Svelte.

Sejarah & Latar Belakang Arrow Function

Sebelum ES6, JavaScript hanya punya satu gaya penulisan fungsi utama:

function hello(name) {
    return "Hello " + name;
}Code language: JavaScript (javascript)

Masalahnya, penulisan seperti ini:

Terlalu panjang untuk fungsi kecil
Tidak efisien untuk callback
Membingungkan ketika berhadapan dengan this
Kurang fleksibel untuk penulisan modern

Karena itu, ES6 memperkenalkan arrow function untuk menyederhanakan gaya penulisan tersebut:

const hello = (name) => {
    return `Hello ${name}`;
};Code language: JavaScript (javascript)

Atau bahkan lebih ringkas lagi jika hanya satu baris:

const hello = (name) => `Hello ${name}`;Code language: JavaScript (javascript)

Tujuan Utama Arrow Function

Arrow function dirancang untuk:

Penulisan fungsi yang lebih singkat
Arrow function menghilangkan keyword function, return (opsional), dan {} (opsional untuk satu baris).
Menyederhanakan callback pada array method
Contoh array method modern seperti .map(), .filter(), dan .reduce() jauh lebih mudah ditulis menggunakan arrow function.
Mengatasi kebingungan this dalam function
Berbeda dengan function biasa, arrow function tidak memiliki this sendiri. Ini sangat penting dalam OOP JavaScript dan event handling.
Meningkatkan keterbacaan kode
Developer bisa langsung tahu fungsi mana yang hanya bersifat lokal, kecil, dan tidak perlu deklarasi penuh.

Cara Kerja Arrow Function Secara Konsep

Arrow function adalah fungsi anonim (tidak memiliki nama) yang kemudian disimpan ke dalam variabel atau konstanta. Formula sederhananya:

parameter => hasil / blok kodeCode language: PHP (php)

Saat memiliki lebih dari satu parameter, Anda harus membungkusnya dengan kurung:

(a, b) => a + b;Code language: PHP (php)

Jika menggunakan lebih dari satu baris, Anda harus memakai {}:

(a, b) => {
    const total = a + b;
    return total;
};Code language: PHP (php)

Arrow Function Tidak Bisa Digunakan Untuk Semua Kondisi

Meskipun sangat berguna, arrow function bukan pengganti total dari function biasa. Ada batasan:

Tidak cocok untuk:

Membuat fungsi constructor (new MyClass())
Membuat method di dalam object literal (karena masalah this)
Situasi ketika butuh arguments object
Fungsi yang membutuhkan konteks dinamis this

Karena itu, memahami perbedaan arrow function dan function biasa sangat penting.

Contoh Sederhana Arrow Function

Berikut contoh paling dasar:

const sayHello = () => {
    return "Hello World!";
};Code language: JavaScript (javascript)

Versi lebih ringkas:

const sayHello = () => "Hello World!";Code language: JavaScript (javascript)

Dengan parameter:

const greet = (name) => `Halo, ${name}!`;Code language: JavaScript (javascript)

Dengan dua parameter:

const sum = (a, b) => a + b;Code language: JavaScript (javascript)

Kenapa Arrow Function Penting untuk Dipelajari

Karena arrow function adalah:

Digunakan di hampir semua kode JavaScript modern
Jika Anda membuka dokumentasi React, Node.js, atau tutorial modern, semua menggunakan arrow function.
Mengurangi kode boilerplate
Anda tidak perlu menulis function, return, atau tanda kurung tambahan.
Solusi terhadap masalah klasik this
Developer JS lama sering pusing dengan this—arrow function memperbaikinya.
Standar industri modern
Perusahaan, bootcamp coding, hingga proyek open-source seluruhnya menggunakan arrow function sebagai default.

Sintaks Dasar Arrow Function

Sekarang kita masuk ke bagian yang paling penting untuk pemula, yaitu memahami sintaks dasar arrow function. Bagian ini sangat penting karena di sinilah fondasi awal untuk memahami pola penulisan arrow function dan bagaimana ia bekerja dalam JavaScript modern.

Arrow function memiliki beberapa variasi penulisan—mulai dari bentuk lengkap hingga bentuk paling ringkas. Semua variasi ini akan sangat sering Anda jumpai saat membaca kode orang lain atau dokumentasi library modern seperti React, Express, atau Vue.

Struktur Dasar Arrow Function

Bentuk paling dasar arrow function adalah:

const namaFungsi = (parameter) => {
    // isi fungsi
};Code language: JavaScript (javascript)

Struktur tersebut terdiri dari tiga komponen:

Parameter → dalam tanda kurung ()
Arrow → simbol =>
Body → blok kode {}

Contoh sederhana:

const sayHello = () => {
    console.log("Hello Arrow Function!");
};Code language: JavaScript (javascript)

Penjelasan:

Fungsi ini tidak memiliki parameter.
Menggunakan arrow =>.
Memiliki blok kode { ... }.

Arrow Function Dengan Satu Parameter

Jika fungsi hanya memiliki satu parameter, Anda boleh menghapus tanda kurung ().

Contoh:

const greet = name => {
    console.log(`Halo, ${name}`);
};Code language: JavaScript (javascript)

Namun dalam beberapa kasus—terutama untuk kode tim atau perusahaan—tanda kurung tetap disarankan demi konsistensi.

Versi yang lebih formal dan disarankan:

const greet = (name) => {
    console.log(`Halo, ${name}`);
};Code language: JavaScript (javascript)

Arrow Function Dengan Dua atau Lebih Parameter

Jika parameter lebih dari satu, tanda kurung wajib digunakan:

const sum = (a, b) => {
    return a + b;
};Code language: JavaScript (javascript)

Ini berlaku di semua kasus dengan banyak parameter.

Arrow Function Single Expression (Implicit Return)

Arrow function memiliki fitur unik:

Jika body fungsi hanya satu baris, Anda boleh menghilangkan {} dan return.
JavaScript akan mengembalikan nilai secara otomatis (implicit return).

Contoh:

const double = num => num * 2;Code language: JavaScript (javascript)

Versi lengkapnya seharusnya:

const double = (num) => {
    return num * 2;
};Code language: JavaScript (javascript)

Tetapi karena hanya satu baris, Anda bisa menuliskan versi ringkas.

Ini adalah fitur paling populer dari arrow function.

Arrow Function Tanpa Parameter

Jika tidak ada parameter, gunakan tanda kurung kosong:

const getDate = () => new Date();Code language: JavaScript (javascript)

Atau versi panjang:

const getDate = () => {
    return new Date();
};Code language: JavaScript (javascript)

Arrow Function Dengan Return Objek

Ini adalah hal yang sering membingungkan pemula.

Jika Anda ingin mengembalikan object menggunakan implicit return, anda harus membungkus object dengan tanda kurung (), karena jika tidak, {} dianggap sebagai body fungsi.

Contoh yang benar:

const getUser = () => ({
    name: "Aris",
    age: 25
});Code language: JavaScript (javascript)

Jika Anda menulis ini:

const getUser = () => {
    name: "Aris",
    age: 25
};Code language: JavaScript (javascript)

Maka hasilnya undefined, karena {} dianggap sebagai block body, bukan object literal.

Arrow Function Multi-line

Jika function memiliki lebih dari satu baris, Anda tetap harus menggunakan {} dan return.

Contoh:

const calculate = (a, b) => {
    const result = a + b;
    console.log("Menghitung...");
    return result;
};Code language: JavaScript (javascript)

Implicit return tidak bekerja jika ada {}.

Arrow Function Sebagai Fungsi Anonim

Arrow function umumnya digunakan untuk fungsi anonim, misalnya dalam callback.

Contoh pada setTimeout:

setTimeout(() => {
    console.log("Timer selesai!");
}, 2000);Code language: JavaScript (javascript)

Contoh pada event handler:

button.addEventListener("click", () => {
    console.log("Button diklik!");
});Code language: JavaScript (javascript)

Ini menjadi alasan arrow function sangat populer.

Contoh Lengkap Sintaks Arrow Function

Berikut contoh berbagai bentuk dalam satu blok:

// Tanpa parameter
const hello = () => "Hello!";

// Dengan satu parameter
const square = x => x * x;

// Dengan dua parameter
const multiply = (a, b) => a * b;

// Multi-line
const formatName = (first, last) => {
    const full = `${first} ${last}`;
    return full;
};

// Return object
const createUser = () => ({
    id: 1,
    name: "Aris"
});Code language: JavaScript (javascript)

Di bagian ini Anda telah mempelajari:

Struktur dasar arrow function
Parameter tunggal & banyak
Implicit return
Cara return objek
Multi-line vs single-line
Arrow function sebagai fungsi anonim

Bagian berikutnya akan membahas perbedaan mendasar antara arrow function dan function biasa, termasuk bagaimana this bekerja secara berbeda.

Perbedaan Arrow Function vs Function Biasa

Untuk memahami arrow function secara menyeluruh, kamu harus tahu apa saja perbedaannya dengan function biasa. Banyak pemula salah paham karena mengira arrow function hanyalah “penulisan fungsi yang lebih ringkas”.

Padahal, secara perilaku — terutama terkait this, argument object, dan constructor capability — arrow function berbeda cukup jauh. Inilah yang membuatnya sangat berguna, tetapi juga sering menimbulkan error bagi yang belum memahami konsepnya.

Perbedaan Penulisan (Sintaks)

Perbedaan paling jelas adalah cara penulisan.

Function Biasa

function sayHello(name) {
    return `Hello, ${name}`;
}Code language: JavaScript (javascript)

Arrow Function

const sayHello = (name) => {
    return `Hello, ${name}`;
};Code language: JavaScript (javascript)

Atau versi paling ringkas:

const sayHello = name => `Hello, ${name}`;Code language: JavaScript (javascript)

Arrow function lebih pendek dan lebih mudah dibaca untuk operasi sederhana.

Perbedaan this (Perbedaan Paling Penting)

Ini adalah inti dari perbedaan besar antara arrow function dan function biasa.

❌ Function biasa memiliki this dinamis

this bergantung pada siapa yang memanggil fungsi tersebut (runtime binding).

✔ Arrow function memiliki this tetap (lexical this)

this pada arrow function mengikuti konteks tempat dia didefinisikan, bukan tempat dia dipanggil.

Contoh function biasa: this berubah-ubah

const user = {
    name: "Aris",
    getName: function() {
        console.log(this.name);
    }
};

user.getName(); // "Aris"Code language: JavaScript (javascript)

Jika kita memisahkan function-nya:

const ambilNama = user.getName;
ambilNama(); // undefined (atau error), this tidak lagi mengarah ke object userCode language: JavaScript (javascript)

Karena function biasa akan mempunyai this berdasarkan pemanggilnya.

Contoh arrow function: this tetap (lexical)

const user = {
    name: "Aris",
    getName: () => {
        console.log(this.name);
    }
};Code language: JavaScript (javascript)

Output:

undefinedCode language: JavaScript (javascript)

Mengapa?

Karena arrow function tidak memiliki this sendiri.

Dia mengambil this dari lingkungan luar (global), bukan dari object user.

Ini sebabnya:

Arrow function tidak cocok digunakan sebagai method object
Function biasa lebih tepat untuk method

Arrow Function Tidak Bisa Menjadi Constructor

Function biasa bisa dipakai dengan new, arrow function tidak.

Function biasa sebagai constructor

function Person(name) {
    this.name = name;
}

const p = new Person("Aris");
console.log(p.name); // ArisCode language: JavaScript (javascript)

Arrow function tidak bisa

const Person = (name) => {
    this.name = name;
};

const p = new Person("Aris"); 
// TypeError: Person is not a constructorCode language: JavaScript (javascript)

Karena arrow function tidak memiliki:

[[Construct]]
this
prototype

Arrow Function Tidak Memiliki arguments Object

Function biasa memiliki objek arguments:

function test() {
    console.log(arguments);
}

test(1, 2, 3); 
// [1, 2, 3]Code language: JavaScript (javascript)

Arrow function tidak memiliki arguments:

const test = () => {
    console.log(arguments);
};

test(1, 2, 3);
// ReferenceError: arguments is not definedCode language: JavaScript (javascript)

Solusi untuk arrow function adalah menggunakan rest parameter:

const test = (...args) => {
    console.log(args);
};Code language: JavaScript (javascript)

Arrow Function Lebih Cocok untuk Callback & Operasi Singkat

Arrow function sangat sering dipakai pada:

Event handler
Callback sederhana
Array method (map, filter, reduce)
Promise (then(() => {}))
Async operation
Functional programming

Karena bentuknya ringkas, dan tidak memerlukan this.

Function Biasa Lebih Cocok untuk:

Method dalam object
Constructor
Fungsi yang membutuhkan arguments
Fungsi yang membutuhkan this dinamis
Method pada class (meski ada pattern arrow juga)

Contoh Nyata: Arrow Menyederhanakan Callback

Function biasa:

setTimeout(function() {
    console.log("Halo!");
}, 1000);Code language: JavaScript (javascript)

Arrow function:

setTimeout(() => {
    console.log("Halo!");
}, 1000);Code language: JavaScript (javascript)

Ringkas dan bersih.

Contoh Nyata: `this` Pada DOM Event

this pada DOM event mengarah ke element yang diklik jika menggunakan function biasa.

button.addEventListener("click", function() {
    console.log(this); // <button>
});Code language: JavaScript (javascript)

Sedangkan arrow function:

button.addEventListener("click", () => {
    console.log(this); // bukan button! biasanya window
});Code language: JavaScript (javascript)

Karena arrow mengambil this dari konteks luar.

Tabel Perbandingan Arrow vs Function Biasa

Fitur	Function Biasa	Arrow Function
Sintaks	Panjang	Ringkas
this	Dinamis	Lexical (tetap)
Bisa jadi constructor	✔ Ya	❌ Tidak
Punya arguments	✔ Ya	❌ Tidak
Cocok untuk method object	✔ Ya	❌ Tidak
Cocok untuk callback	Kadang	✔ Sangat cocok
Cocok untuk kode ringkas	Kurang cocok	✔ Ya

Arrow Function Single-line & Multi-line

Arrow function memiliki dua gaya penulisan utama yang sering digunakan dalam JavaScript modern: single-line dan multi-line. Keduanya memiliki kegunaan yang berbeda tergantung pada kompleksitas logika yang ingin dituliskan. Memahami perbedaannya akan membuat kode lebih bersih, ringkas, dan mudah dipahami.

Arrow Function Single-line

Arrow function single-line digunakan ketika blok logika yang dijalankan sangat sederhana dan hanya terdiri dari satu ekspresi. Pada gaya ini, JavaScript secara otomatis mengembalikan nilai (implicit return) tanpa perlu menuliskan return.

Ciri-ciri Arrow Function Single-line:

Tidak membutuhkan {} (curly braces).
Tidak membutuhkan keyword return.
Biasanya untuk operasi sederhana.

Contoh:

1. Menjumlahkan angka

const tambah = (a, b) => a + b;
console.log(tambah(3, 4)); // 7Code language: JavaScript (javascript)

2. Mengakses panjang string

const panjang = str => str.length;
console.log(panjang("JavaScript")); // 10Code language: JavaScript (javascript)

3. Mengambil elemen pertama dari array

const first = arr => arr[0];
console.log(first([10, 20, 30])); // 10Code language: JavaScript (javascript)

Single-line arrow function sangat efektif untuk membuat kode menjadi super ringkas dan deklaratif.

Arrow Function Multi-line

Arrow function multi-line digunakan ketika fungsi membutuhkan beberapa baris kode atau logika lebih kompleks. Pada gaya ini, kamu harus menggunakan {} dan wajib menuliskan keyword return kalau ingin mengembalikan nilai.

Ciri-ciri Arrow Function Multi-line:

Menggunakan {}.
Return harus ditulis secara eksplisit.
Bisa memuat kondisi, perulangan, atau logika yang panjang.

Contoh:

1. Menghasilkan objek

const buatUser = (nama, umur) => {
  return {
    nama: nama,
    umur: umur,
    status: "aktif"
  };
};

console.log(buatUser("Aris", 25));Code language: JavaScript (javascript)

2. Fungsi dengan kondisi

const cekUmur = (umur) => {
  if (umur >= 18) {
    return "Dewasa";
  } else {
    return "Anak-anak";
  }
};Code language: JavaScript (javascript)

3. Fungsi dengan beberapa proses

const prosesData = (data) => {
  let total = 0;

  data.forEach(item => {
    total += item;
  });

  return total / data.length;
};

console.log(prosesData([10, 20, 30])); // 20Code language: JavaScript (javascript)

Multi-line arrow function memberikan fleksibilitas dan struktur lebih jelas ketika logika yang dibangun tidak cukup dengan satu ekspresi.

Kapan Menggunakan Single-line vs Multi-line?

Jenis	Kapan Digunakan	Contoh Kasus
Single-line	Untuk ekspresi sederhana yang bisa dihitung dalam 1 baris	Penjumlahan, manipulasi sederhana
Multi-line	Untuk logika kompleks, kondisi, loop, dan pembuatan objek	Validasi, perhitungan, transformasi data

Contoh Perbandingan Berdampingan

Single-line

const square = n => n * n;Code language: JavaScript (javascript)

Multi-line

const square = n => {
  const result = n * n;
  console.log("Hasil:", result);
  return result;
};Code language: JavaScript (javascript)

Saat fungsi hanya butuh satu ekspresi → gunakan single-line.

Jika butuh lebih banyak baris → gunakan multi-line.

`this` pada Arrow Function

Salah satu hal yang paling penting — dan sering membingungkan — dalam JavaScript adalah cara kerja this. Arrow function memperkenalkan perilaku baru yang berbeda dengan function biasa.

Di bagian ini, kita akan mengupas tuntas bagaimana this bekerja pada arrow function, kenapa perilakunya unik, dan kapan sebaiknya (atau tidak sebaiknya) digunakan.

Arrow Function Tidak Memiliki `this` Sendiri

Berbeda dengan function biasa, arrow function tidak memiliki konteks this sendiri. Sebaliknya, arrow function akan menggunakan this dari scope tempat ia didefinisikan (lexical this).

Ini disebut lexical binding, artinya this di dalam arrow function mengikuti this dari “luarnya”.

Contoh Perbedaan `this` pada Function Biasa vs Arrow Function

Function Biasa

Function biasa memiliki this sendiri, tergantung cara pemanggilannya.

const user = {
  name: "Aris",
  sayHi: function () {
    console.log("Hi, saya " + this.name);
  }
};

user.sayHi(); // Hi, saya ArisCode language: JavaScript (javascript)

Pada contoh di atas:

this.name mengacu pada object user
Karena sayHi() dipanggil melalui user

Arrow Function

Arrow function tidak memiliki this sendiri, sehingga this di dalamnya mengambil dari scope di luar.

const user = {
  name: "Aris",
  sayHi: () => {
    console.log("Hi, saya " + this.name);
  }
};

user.sayHi(); // Hi, saya undefinedCode language: JavaScript (javascript)

Kenapa hasilnya undefined?

Karena this pada arrow function tidak mengacu ke object user
Ia mengacu ke lexical scope (global / window)

Contoh Kasus Paling Umum: setTimeout

Function Biasa — Bermasalah

const user = {
  name: "Aris",
  greet: function () {
    setTimeout(function () {
      console.log("Halo " + this.name);
    }, 1000);
  }
};

user.greet(); // Halo undefinedCode language: JavaScript (javascript)

Karena function dalam setTimeout() memiliki this sendiri → mengarah ke global.

Arrow Function — Solusi

const user = {
  name: "Aris",
  greet: function () {
    setTimeout(() => {
      console.log("Halo " + this.name);
    }, 1000);
  }
};

user.greet(); // Halo ArisCode language: JavaScript (javascript)

Dalam contoh ini:

Arrow function mengambil this dari greet()
this pada greet mengacu ke object user

Inilah alasan arrow function sering digunakan dalam callback.

Arrow Function Tidak Cocok untuk Method Object

Jika sebuah function ingin digunakan sebagai method dalam object, maka jangan gunakan arrow function.

Kenapa?

Karena arrow function tidak bisa mengambil this milik object.

Contoh: SALAH

const car = {
  brand: "Toyota",
  start: () => {
    console.log(this.brand + " mulai jalan...");
  }
};

car.start(); // undefined mulai jalan...Code language: JavaScript (javascript)

Contoh: BENAR

const car = {
  brand: "Toyota",
  start() {
    console.log(this.brand + " mulai jalan...");
  }
};

car.start(); // Toyota mulai jalan...Code language: JavaScript (javascript)

Arrow Function Tidak Cocok untuk Constructor

Constructor function membutuhkan this khusus untuk instance yang dibuat.

Arrow function tidak punya this, sehingga tidak bisa dipakai sebagai constructor.

Contoh: Error

const Person = (name) => {
  this.name = name;
};

const p = new Person("Aris"); // TypeError: Person is not a constructorCode language: JavaScript (javascript)

Function Biasa — Berjalan Baik

function Person(name) {
  this.name = name;
}

const p = new Person("Aris");
console.log(p.name); // ArisCode language: JavaScript (javascript)

Ringkasan Aturan `this` pada Arrow Function

Hal	Arrow Function	Function Biasa
Memiliki `this` sendiri	Tidak	Ya
`this` mengikuti lexical scope	Ya	Tidak
Cocok jadi method object	Tidak	Ya
Cocok dipakai pada callback	Sangat cocok	Ya
Bisa dipakai sebagai constructor	Tidak	Bisa

Kapan Harus Menggunakan Arrow Function yang Berhubungan dengan this?

Gunakan arrow function untuk:

Callback (setTimeout, setInterval, event listener tertentu)
Fungsi dalam array (map, filter, reduce)
Ketika ingin mempertahankan this dari tempat deklarasinya
Ketika butuh fungsi singkat tanpa konteks this

Hindari arrow function untuk:

Method object
Constructor
Fungsi yang butuh dynamic this

Arrow Function dalam Callback

Arrow function menjadi sangat populer bukan hanya karena sintaksnya yang ringkas, tetapi juga karena penggunaannya yang sangat efektif dalam callback. Callback merupakan pola umum dalam JavaScript, terutama ketika bekerja dengan asynchronous, event listener, atau operasi array seperti map(), filter(), dan reduce().

Pada bagian ini, kamu akan memahami bagaimana arrow function menyederhanakan callback dan membuat kode jauh lebih bersih, terutama bagi pemula maupun developer yang ingin menulis JavaScript modern.

Apa Itu Callback dalam JavaScript?

Callback adalah function yang dikirim sebagai argumen ke function lain untuk dieksekusi di waktu tertentu. Contoh paling umum callback ada pada:

Event listener

setTimeout() dan setInterval()
Array method (map, filter, reduce, dll.)
Promise dan asynchronous function tertentu

Dengan arrow function, penulisan callback menjadi lebih ringkas dan mudah dipahami.

Callback Tanpa Arrow Function (Function Biasa)

Contoh callback menggunakan function biasa:

setTimeout(function () {
    console.log("Hello dari callback!");
}, 1000);Code language: JavaScript (javascript)

Pada contoh ini:

Penulisan cukup panjang
Terjadi shadowing this jika kita berada dalam sebuah object

Callback dengan Arrow Function (Lebih Ringkas & Bersih)

Dengan arrow function:

setTimeout(() => {
    console.log("Hello dari callback!");
}, 1000);Code language: JavaScript (javascript)

Keuntungan:

Lebih singkat
Lebih mudah dibaca

this mengambil lexical scope (berguna dalam banyak kasus)

Arrow Function dalam Event Listener

Event listener adalah salah satu tempat paling umum memakai callback. Namun, ada hal penting terkait this.

Contoh pakai function biasa (akses this = elemen)

document.querySelector("#btn").addEventListener("click", function () {
    console.log(this); // <button id="btn">...</button>
});Code language: JavaScript (javascript)

Function biasa memiliki this sendiri yang merujuk pada elemen yang diklik.

Contoh pakai arrow function (this = lexical scope)

document.querySelector("#btn").addEventListener("click", () => {
    console.log(this); // bukan button, tetapi this dari luar
});Code language: JavaScript (javascript)

Catatan penting:

Jika kamu butuh this = element yang diklik → gunakan function biasa.
Namun jika tidak butuh this seperti event handler sederhana → arrow function lebih bersih dan ringkas.

Arrow Function dalam Array Methods

Array methods adalah tempat terbaik untuk memanfaatkan arrow function karena penulisan menjadi sangat singkat.

`map()`

Function biasa

const angka = [1, 2, 3];
const hasil = angka.map(function (n) {
    return n * 2;
});
console.log(hasil);Code language: JavaScript (javascript)

Arrow function

const angka = [1, 2, 3];
const hasil = angka.map(n => n * 2);
console.log(hasil);Code language: JavaScript (javascript)

Perbedaan sangat jauh dan lebih mudah dibaca.

`filter()`

Function biasa

const angka = [1, 2, 3, 4, 5];
const genap = angka.filter(function (n) {
    return n % 2 === 0;
});Code language: JavaScript (javascript)

Arrow function

const angka = [1, 2, 3, 4, 5];
const genap = angka.filter(n => n % 2 === 0);
console.log(genap);Code language: JavaScript (javascript)

`reduce()`

Function biasa

const angka = [1, 2, 3];
const total = angka.reduce(function (acc, n) {
    return acc + n;
}, 0);Code language: JavaScript (javascript)

Arrow function

const angka = [1, 2, 3];
const total = angka.reduce((acc, n) => acc + n, 0);
console.log(total);Code language: JavaScript (javascript)

Dengan arrow function, struktur reduce terlihat jauh lebih sederhana.

Arrow Function dalam Promise

Promise menggunakan callback dalam then(), catch(), dan finally().

Tanpa arrow function

fetch(url)
    .then(function (res) {
        return res.json();
    })
    .then(function (data) {
        console.log(data);
    });Code language: JavaScript (javascript)

Dengan arrow function

fetch(url)
    .then(res => res.json())
    .then(data => console.log(data));Code language: JavaScript (javascript)

Lebih ringkas dan clean.

Arrow Function untuk Callback Bersarang (Mengurangi Callback Hell)

Callback hell sering terlihat seperti ini:

setTimeout(function () {
    setTimeout(function () {
        setTimeout(function () {
            console.log("Selesai!");
        }, 1000);
    }, 1000);
}, 1000);Code language: JavaScript (javascript)

Dengan arrow function:

setTimeout(() => {
    setTimeout(() => {
        setTimeout(() => {
            console.log("Selesai!");
        }, 1000);
    }, 1000);
}, 1000);Code language: JavaScript (javascript)

Tidak menyelesaikan callback hell, tapi membuatnya sedikit lebih bersih.

Kapan Menggunakan Arrow Function pada Callback?

Gunakan arrow function dalam callback jika:

Tidak butuh this
Callback hanya menjalankan operasi sederhana
Konsisten menulis kode modern ES6
Callback digunakan dalam array methods / Promise

Hindari arrow function jika:

Callback membutuhkan this khusus milik event (contoh: event listener ingin this = element)
Callback digunakan di dalam object method

Arrow Function pada Array Method (map, filter, reduce)

Array methods seperti map(), filter(), dan reduce() adalah salah satu fitur JavaScript modern yang sangat powerful. Ketiganya menjadi jauh lebih enak digunakan ketika digabungkan dengan arrow function karena sintaksnya yang sangat ringkas dan mudah dibaca.

Dalam pengembangan aplikasi web modern—baik React, Node.js, Vue, maupun aplikasi vanilla JavaScript—penggunaan arrow function pada array methods sudah menjadi standar industri.

Pada bagian ini, kamu akan mempelajari:

Cara kerja map(), filter(), dan reduce()
Perbedaan penulisan dengan function biasa vs arrow function
Contoh penggunaan nyata
Studi kasus lengkap

Arrow Function pada `map()`

map() digunakan untuk mengubah setiap item dalam array dan menghasilkan array baru dengan jumlah elemen yang sama.

Tanpa arrow function

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

const hasil = angka.map(function (n) {
    return n * 2;
});

console.log(hasil); // [2, 4, 6, 8]Code language: JavaScript (javascript)

Lumayan panjang.

Dengan arrow function (lebih ringkas dan clean)

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

const hasil = angka.map(n => n * 2);

console.log(hasil); // [2, 4, 6, 8]Code language: JavaScript (javascript)

Keuntungan:

Tidak perlu function
Tidak perlu return (pada single-line arrow function)
Tidak perlu {}

`map()` untuk memanipulasi objek dalam array

const users = [
    { name: "Aris", age: 24 },
    { name: "Dina", age: 20 }
];

const hasil = users.map(u => ({
    ...u,
    isAdult: u.age >= 18
}));

console.log(hasil);Code language: JavaScript (javascript)

Catatan penting:

Jika arrow function mengembalikan object literal, harus dibungkus ().

Arrow Function pada `filter()`

filter() digunakan untuk menyaring item dalam array berdasarkan kondisi tertentu.

Tanpa arrow function

const angka = [1, 2, 3, 4, 5, 6];

const genap = angka.filter(function (n) {
    return n % 2 === 0;
});

console.log(genap); // [2, 4, 6]Code language: JavaScript (javascript)

Dengan arrow function

const angka = [1, 2, 3, 4, 5, 6];

const genap = angka.filter(n => n % 2 === 0);

console.log(genap); // [2, 4, 6]Code language: JavaScript (javascript)

Ringkas dan mudah dibaca.

`filter()` untuk data kompleks

const products = [
    { name: "Laptop", price: 12000000 },
    { name: "Mouse", price: 200000 },
    { name: "Keyboard", price: 300000 }
];

const mahal = products.filter(p => p.price > 1000000);

console.log(mahal);Code language: JavaScript (javascript)

Arrow Function pada `reduce()`

reduce() digunakan untuk menggabungkan seluruh elemen array menjadi satu nilai.

Tanpa arrow function

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

const total = angka.reduce(function (acc, n) {
    return acc + n;
}, 0);

console.log(total);Code language: JavaScript (javascript)

Dengan arrow function

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

const total = angka.reduce((acc, n) => acc + n, 0);

console.log(total);Code language: JavaScript (javascript)

Lebih clean dan lebih mudah dibaca.

`reduce()` untuk menghitung total harga

const cart = [
    { name: "Laptop", price: 15000000 },
    { name: "Mouse", price: 200000 },
    { name: "Headset", price: 500000 }
];

const total = cart.reduce((acc, item) => acc + item.price, 0);

console.log(total);Code language: JavaScript (javascript)

`reduce()` menghasilkan object baru

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

const statistik = angka.reduce((acc, n) => {
    acc.total += n;
    acc.jumlah++;
    return acc;
}, { total: 0, jumlah: 0 });

console.log(statistik);Code language: JavaScript (javascript)

Studi Kasus: Gabungan map(), filter(), reduce()

Mari kombinasikan semuanya dalam kasus nyata:

Mengambil data user yang umur > 18, kemudian ambil nama user, lalu hitung total umur.

const users = [
    { name: "Aris", age: 24 },
    { name: "Dina", age: 16 },
    { name: "Budi", age: 30 }
];

const adultNames = users
    .filter(u => u.age >= 18)
    .map(u => u.name);

const totalAge = users
    .filter(u => u.age >= 18)
    .reduce((acc, u) => acc + u.age, 0);

console.log(adultNames); // ["Aris", "Budi"]
console.log(totalAge);   // 54Code language: JavaScript (javascript)

Inilah pola JavaScript modern yang paling sering digunakan.

Sangat umum di React, Node.js, Express, Next.js, dan proyek web besar lainnya.

Kenapa Arrow Function Sangat Cocok untuk Array Methods

Singkat → cocok untuk operasi satu baris
Bersih → fokus pada transformasi, bukan struktur function
Natural → sesuai gaya functional programming
Lebih mudah dipahami pemula
Minim boilerplate (tanpa function, {}, dan return)

Ketiga array method ini (map, filter, reduce) hampir selalu identik dengan arrow function dalam JavaScript modern.

Cara Menulis Arrow Function yang Benar

Arrow function memang terlihat ringkas dan menarik, tetapi ada beberapa aturan dan best practice yang perlu diperhatikan agar kode tetap bersih, mudah dipahami, dan bebas bug. Pada bagian ini, kita akan membahas cara menulis arrow function yang benar, mulai dari sintaks, penempatan parameter, hingga penggunaan dalam berbagai konteks.

Gunakan `const` untuk Mendeklarasikan Arrow Function

Karena arrow function adalah function expression, sebaiknya selalu gunakan const.

Hal ini mencegah redeklarasi atau overwriting yang tidak sengaja.

// Benar
const greet = name => `Hello, ${name}`;

// Salah
let greet = name => `Hello, ${name}`; // Bisa diubah di lain tempatCode language: JavaScript (javascript)

Rekomendasi: selalu const, kecuali ada alasan spesifik menggunakan let.

Pilih Single-line vs Multi-line Berdasarkan Kompleksitas

Single-line: Untuk ekspresi sederhana → implicit return

Multi-line: Untuk logika kompleks → gunakan {} dan return

Contoh Single-line

const square = n => n * n;Code language: JavaScript (javascript)

Contoh Multi-line

const square = n => {
    const result = n * n;
    console.log(result);
    return result;
};Code language: JavaScript (javascript)

Perhatikan Return Object Literal

Jika ingin mengembalikan object literal menggunakan implicit return, bungkus dengan (). Contoh:

const createUser = (name, age) => ({
    name: name,
    age: age
});Code language: JavaScript (javascript)

Jika tidak menggunakan (), {} dianggap sebagai block body, bukan object literal.

Parameter Tunggal vs Banyak Parameter

Satu parameter → boleh tanpa ()
Lebih dari satu parameter → wajib ()
Tanpa parameter → gunakan ()

Contoh

const greet = name => `Hello, ${name}`; // 1 parameter
const sum = (a, b) => a + b;           // 2 parameter
const getDate = () => new Date();       // 0 parameterCode language: JavaScript (javascript)

Hindari Arrow Function sebagai Method Object

Arrow function tidak memiliki this sendiri, jadi tidak cocok untuk method:

const car = {
    brand: "Toyota",
    start: () => {
        console.log(this.brand); // undefined
    }
};Code language: JavaScript (javascript)

Gunakan function biasa untuk method object:

const car = {
    brand: "Toyota",
    start() {
        console.log(this.brand); // Toyota
    }
};Code language: JavaScript (javascript)

Hindari Arrow Function sebagai Constructor

Arrow function tidak dapat dipakai sebagai constructor karena tidak memiliki [[Construct]].

const Person = (name) => { this.name = name; };
const p = new Person("Aris"); // ErrorCode language: JavaScript (javascript)

Gunakan function biasa jika membutuhkan constructor:

function Person(name) {
    this.name = name;
}
const p = new Person("Aris"); // Code language: JavaScript (javascript)

Gunakan Arrow Function untuk Callback dan Array Method

Arrow function paling cocok untuk:

Callback di event listener (jika tidak butuh this)
Array methods: map(), filter(), reduce()
Promise: .then(), .catch(), .finally()

Contoh:

const angka = [1, 2, 3, 4];
const hasil = angka.map(n => n * 2);
console.log(hasil); // [2,4,6,8]Code language: JavaScript (javascript)

Jaga Konsistensi Penulisan

Gunakan satu gaya penulisan di seluruh proyek
Pilih kapan memakai single-line, kapan multi-line
Gunakan tanda kurung untuk parameter sesuai kebiasaan tim
Selalu pakai const
Beri komentar jika arrow function memiliki logika kompleks

Contoh Praktik Arrow Function yang Benar

// Single-line, implicit return
const double = n => n * 2;

// Multi-line, explicit return
const multiplyAndLog = (a, b) => {
    const result = a * b;
    console.log("Hasil:", result);
    return result;
};

// Mengembalikan object literal
const createUser = (name, age) => ({
    name,
    age,
    isActive: true
});

// Callback pada array method
const angka = [1,2,3];
const squared = angka.map(n => n * n);Code language: JavaScript (javascript)

Kelebihan & Kekurangan Arrow Function

Arrow function adalah fitur penting di JavaScript modern, tetapi seperti semua fitur, memiliki kelebihan dan kekurangan. Memahami ini akan membantu kamu menulis kode yang lebih efektif dan menghindari bug.

Kelebihan Arrow Function

1. Sintaks lebih ringkas dan bersih

Arrow function memungkinkan menulis fungsi satu baris tanpa function, {}, atau return (jika single-line).

const greet = name => `Hello, ${name}`;Code language: JavaScript (javascript)

2. Lexical this

Arrow function mengambil this dari konteks luar, sangat berguna dalam callback dan array methods.

const user = {
    name: "Aris",
    greet: function() {
        setTimeout(() => {
            console.log(this.name); // Aris
        }, 1000);
    }
};
user.greet();Code language: JavaScript (javascript)

3. Meningkatkan kode functional programming

Arrow function membuat array methods (map, filter, reduce) dan callback lebih mudah dibaca.

const angka = [1,2,3];
const hasil = angka.map(n => n * 2);Code language: JavaScript (javascript)

4. Mencegah redeklarasi

Biasanya digunakan bersama const, sehingga mencegah redeklarasi yang tidak disengaja.

const greet = name => `Hello, ${name}`;Code language: JavaScript (javascript)

5. Memudahkan penulisan callback asynchronous

Cocok dipakai pada setTimeout, Promise.then(), fetch(), dan lain-lain.

Kekurangan Arrow Function

1. Tidak memiliki this sendiri

Tidak cocok untuk method dalam object atau class yang membutuhkan this dinamis.

const car = {
    brand: "Toyota",
    start: () => console.log(this.brand)
};
car.start(); // undefinedCode language: JavaScript (javascript)

2. Tidak bisa dipakai sebagai constructor

Arrow function tidak memiliki [[Construct]], sehingga tidak dapat digunakan dengan new.

const Person = (name) => { this.name = name; };
const p = new Person("Aris"); // ErrorCode language: JavaScript (javascript)

3. Tidak memiliki arguments object

Jika butuh akses ke semua argumen, harus menggunakan rest parameter.

const sum = (...args) => args.reduce((a,b) => a+b,0);Code language: JavaScript (javascript)

4. Membingungkan bagi pemula terkait this

Pemahaman lexical this kadang membingungkan, terutama dalam event listener dan method object.

const user = {
    name: "Aris",
    greet: function() {
        setTimeout(() => {
            console.log(this.name); // Aris
        }, 1000);
    }
};
user.greet();Code language: JavaScript (javascript)

5. Kurang fleksibel untuk method kompleks

Untuk method yang membutuhkan banyak logika atau interaksi this, function biasa lebih aman.

Ringkasan Tabel Kelebihan & Kekurangan

Aspek	Kelebihan	Kekurangan
Sintaks	Ringkas, clean, single-line	Tidak cocok untuk logic panjang tanpa `{}`
`this`	Lexical (tetap), cocok callback	Tidak cocok method object
Constructor	Tidak	Tidak bisa
Arguments	Bisa pakai rest parameter	Tidak punya `arguments`
Callback & Array Methods	Sangat cocok	—
Konsistensi & maintainability	Lebih mudah dengan const	Memerlukan pemahaman lexical `this`

Kesimpulan

Arrow function adalah salah satu fitur ES6 yang penting untuk dikuasai dalam JavaScript modern. Dengan sintaks yang lebih ringkas dan lexical this, arrow function memudahkan penulisan callback, array methods (map, filter, reduce), serta promise dan operasi asynchronous lainnya. Penggunaan arrow function membuat kode lebih clean, deklaratif, dan mudah dibaca, terutama bagi pemula yang ingin memahami JavaScript modern.

Namun, arrow function juga memiliki batasan. Ia tidak memiliki this sendiri, tidak bisa digunakan sebagai constructor, dan tidak memiliki arguments object. Oleh karena itu, arrow function sebaiknya digunakan secara bijak: ideal untuk fungsi singkat, callback, dan operasi pada array, tetapi hindari penggunaannya sebagai method object atau constructor.

Menguasai arrow function akan membuat kamu lebih produktif dalam menulis kode JavaScript modern, mengikuti best practice ES6, serta lebih siap menghadapi proyek-proyek web yang kompleks dan berbasis framework modern seperti React, Vue, atau Node.js. Kombinasi arrow function dengan fitur ES6 lainnya seperti destructuring, spread operator, dan template literal akan membuat kode lebih efisien dan profesional.

Share on Facebook Twitter Linkedin

3 JavaScript Lanjutan

Level Lanjutan memperkenalkan fitur modern JavaScript seperti ES6+, arrow function, destructuring, spread operator, template literal, closures, dan konsep scope serta hoisting. Level ini membantu pengguna memahami dasar penting JavaScript modern yang banyak digunakan pada pengembangan web saat ini, sehingga dapat menulis kode yang lebih efisien, bersih, dan mudah dikelola.

ES6 JavaScript: Fitur Baru yang Wajib Dikuasai
Tutorial Arrow Function di JavaScript
Destructuring Array dan Object di JavaScript
Spread dan Rest Operator di JavaScript

Comments

Congrats, you have the opportunity to be the first commenter on this article. Have questions or suggestions? Please leave a comment to start discussion.

Tutorial Arrow Function di JavaScript

Daftar isi

Apa Itu Arrow Function JavaScript

Sejarah & Latar Belakang Arrow Function

Tujuan Utama Arrow Function

Cara Kerja Arrow Function Secara Konsep

Arrow Function Tidak Bisa Digunakan Untuk Semua Kondisi

Contoh Sederhana Arrow Function

Kenapa Arrow Function Penting untuk Dipelajari

Sintaks Dasar Arrow Function

Struktur Dasar Arrow Function

Arrow Function Dengan Satu Parameter

Arrow Function Dengan Dua atau Lebih Parameter

Arrow Function Single Expression (Implicit Return)

Arrow Function Tanpa Parameter

Arrow Function Dengan Return Objek

Arrow Function Multi-line

Arrow Function Sebagai Fungsi Anonim

Contoh Lengkap Sintaks Arrow Function

Perbedaan Arrow Function vs Function Biasa

Perbedaan Penulisan (Sintaks)

Perbedaan this (Perbedaan Paling Penting)

Arrow Function Tidak Bisa Menjadi Constructor

Arrow Function Tidak Memiliki arguments Object

Arrow Function Lebih Cocok untuk Callback & Operasi Singkat

Function Biasa Lebih Cocok untuk:

Contoh Nyata: Arrow Menyederhanakan Callback

Contoh Nyata: this Pada DOM Event

Tabel Perbandingan Arrow vs Function Biasa

Arrow Function Single-line & Multi-line

Arrow Function Single-line

Arrow Function Multi-line

Kapan Menggunakan Single-line vs Multi-line?

Contoh Perbandingan Berdampingan

this pada Arrow Function

Arrow Function Tidak Memiliki this Sendiri

Contoh Perbedaan this pada Function Biasa vs Arrow Function

Contoh Kasus Paling Umum: setTimeout

Arrow Function Tidak Cocok untuk Method Object

Arrow Function Tidak Cocok untuk Constructor

Ringkasan Aturan this pada Arrow Function

Kapan Harus Menggunakan Arrow Function yang Berhubungan dengan this?

Arrow Function dalam Callback

Apa Itu Callback dalam JavaScript?

Callback Tanpa Arrow Function (Function Biasa)

Callback dengan Arrow Function (Lebih Ringkas & Bersih)

Arrow Function dalam Event Listener

Arrow Function dalam Array Methods

map()

filter()

reduce()

Arrow Function dalam Promise

Arrow Function untuk Callback Bersarang (Mengurangi Callback Hell)

Kapan Menggunakan Arrow Function pada Callback?

Arrow Function pada Array Method (map, filter, reduce)

Arrow Function pada map()

map() untuk memanipulasi objek dalam array

Arrow Function pada filter()

filter() untuk data kompleks

Arrow Function pada reduce()

reduce() untuk menghitung total harga

reduce() menghasilkan object baru

Studi Kasus: Gabungan map(), filter(), reduce()

Kenapa Arrow Function Sangat Cocok untuk Array Methods

Cara Menulis Arrow Function yang Benar

Gunakan const untuk Mendeklarasikan Arrow Function

Pilih Single-line vs Multi-line Berdasarkan Kompleksitas

Perhatikan Return Object Literal

Parameter Tunggal vs Banyak Parameter

Hindari Arrow Function sebagai Method Object

Hindari Arrow Function sebagai Constructor

Gunakan Arrow Function untuk Callback dan Array Method

Jaga Konsistensi Penulisan

Contoh Praktik Arrow Function yang Benar

Kelebihan & Kekurangan Arrow Function

Kelebihan Arrow Function

1. Sintaks lebih ringkas dan bersih

2. Lexical this

3. Meningkatkan kode functional programming

4. Mencegah redeklarasi

Contoh Nyata: `this` Pada DOM Event

`this` pada Arrow Function

Arrow Function Tidak Memiliki `this` Sendiri

Contoh Perbedaan `this` pada Function Biasa vs Arrow Function

Ringkasan Aturan `this` pada Arrow Function

`map()`

`filter()`

`reduce()`

Arrow Function pada `map()`

`map()` untuk memanipulasi objek dalam array

Arrow Function pada `filter()`

`filter()` untuk data kompleks

Arrow Function pada `reduce()`

`reduce()` untuk menghitung total harga

`reduce()` menghasilkan object baru

Gunakan `const` untuk Mendeklarasikan Arrow Function