Arrow Function JavaScript: =>, this, dan Kapan Memakainya

Cara yang Lebih Singkat untuk Menulis Fungsi

Arrow function adalah sintaks JavaScript yang lebih ringkas untuk mendefinisikan fungsi. Sintaks ini muncul di ES2015 dan sekarang menjadi gaya default untuk fungsi kecil yang ditulis langsung di tempat, terutama callback yang diberikan ke method array, handler promise, dan event listener.

Bentuknya: parameter, lalu =>, lalu isi fungsinya.

const add = (a, b) => {
    return a + b;
};

console.log(add(2, 3));
console.log(add(10, 7));

Hasilnya sama dengan bentuk klasiknya:

const add = function (a, b) {
    return a + b;
};

Lebih sedikit mengetik memang menyenangkan, tetapi alasan sebenarnya untuk peduli pada arrow function adalah return implisit dan cara arrow function memperlakukan this. Keduanya dibahas berikut ini.

Return Implisit

Kalau isi fungsinya hanya satu ekspresi, kamu bisa menghilangkan kurung kurawal dan return. Nilai ekspresinya dikembalikan secara otomatis:

const double = x => x * 2;
const square = x => x * x;
const greet = name => `Hello, ${name}`;

console.log(double(5));
console.log(square(4));
console.log(greet("Rosa"));

Di sinilah arrow function bersinar: transformasi satu baris terbaca seperti rumus matematika:

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);
const total = numbers.reduce((sum, n) => sum + n, 0);

console.log(doubled);
console.log(evens);
console.log(total);

Begitu kamu butuh lebih dari satu pernyataan, kamu kembali memakai kurung kurawal dan return eksplisit:

const describe = n => {
    const label = n >= 0 ? "positive" : "negative";
    return `${n} is ${label}`;
};

console.log(describe(7));
console.log(describe(-3));

Lupa menulis return di dalam kurung kurawal adalah kesalahan arrow function yang paling umum. x => { x * 2 } mengembalikan undefined: kurung kurawal mengubah isi fungsi menjadi blok, dan ekspresi di dalamnya dibuang.

Kurung pada Parameter

Kalau parameternya tepat satu, kurungnya boleh dihilangkan:

const shout = message => message.toUpperCase();
console.log(shout("hello"));

Kalau parameternya nol, dua, atau lebih, kurungnya wajib:

const now = () => Date.now();
const add = (a, b) => a + b;

console.log(now());
console.log(add(3, 4));

Sebagian tim lebih suka selalu memakai kurung demi konsistensi. Kedua gaya sama-sama boleh. Pilih satu dan pakai terus.

Mengembalikan Literal Objek

Ada satu jebakan. Kalau kamu mencoba mengembalikan objek secara implisit, kurung kurawalnya terlihat seperti isi fungsi:

const makeUser = name => { name: name };
console.log(makeUser("Ada"));

Kode itu mencetak undefined. JavaScript membaca { name: name } sebagai blok berisi pernyataan berlabel, bukan literal objek. Bungkus objeknya dengan kurung biasa agar dipaksa menjadi ekspresi:

const makeUser = name => ({ name: name });
console.log(makeUser("Ada"));

() di sekitar { ... } adalah solusinya. Ingat baik-baik, karena kamu akan mengalaminya dalam minggu pertama menulis arrow function.

this Leksikal

Alasan sebenarnya arrow function ada bukanlah sintaks yang lebih pendek, melainkan karena arrow function tidak punya this sendiri. Nilai itu diwarisi dari scope di sekitarnya.

Untuk melihat mengapa ini penting, perhatikan fungsi biasa yang dipakai sebagai callback:

const counter = {
    count: 0,
    start() {
        setInterval(function () {
            this.count++;
            console.log(this.count);
        }, 100);
    },
};

// counter.start();  // logs NaN repeatedly - `this` inside the callback isn't `counter`

Di dalam function () { ... } yang diberikan ke setInterval, this bukanlah counter. Fungsi biasa mendapat this sendiri berdasarkan cara ia dipanggil, dan setInterval memanggil callback dengan this berupa undefined (dalam strict mode) atau objek global.

Arrow function mempertahankan this dari method yang melingkupinya:

const counter = {
    count: 0,
    start() {
        setInterval(() => {
            this.count++;
            console.log(this.count);
        }, 100);
    },
};

counter.start();
setTimeout(() => clearInterval(), 350);

Di dalam arrow function, this tetap counter karena arrow function tidak membuat this sendiri. Sebelum ada arrow function, orang menyiasatinya dengan const self = this; atau .bind(this). Pola-pola itu masih berfungsi, tetapi sekarang jarang dibutuhkan.

Yang Tidak Dimiliki Arrow Function

Aturan this leksikal adalah bagian dari pola yang lebih besar: arrow function tidak punya beberapa hal yang dimiliki fungsi biasa.

• Tidak punya this sendiri: diwarisi dari scope yang melingkupinya.
• Tidak punya objek arguments: pakai rest parameter (...args) sebagai gantinya.
• Tidak bisa dipakai dengan new: kamu tidak bisa memakai arrow function sebagai constructor.
• Tidak punya property prototype: akibat dari aturan tanpa new tadi.

const sum = (...args) => args.reduce((total, n) => total + n, 0);
console.log(sum(1, 2, 3, 4));

const Greeter = name => `Hi, ${name}`;
try {
    new Greeter("Ada");
} catch (err) {
    console.log(err.message);
}

...args memberimu kemampuan "menerima argumen dalam jumlah berapa pun" yang sama seperti arguments, dengan bonus bahwa hasilnya array sungguhan. Panggilan new Greeter(...) memunculkan error karena arrow function bukan constructor.

Kapan Tidak Memakai Arrow Function

Arrow function adalah default untuk callback, tetapi menjadi pilihan yang salah di beberapa tempat:

const user = {
    name: "Ada",
    // Wrong: `this` is NOT the user object.
    greetArrow: () => `Hi, ${this?.name}`,
    // Right: regular method has its own `this`.
    greet() {
        return `Hi, ${this.name}`;
    },
};

console.log(user.greetArrow());
console.log(user.greet());

Method objek yang didefinisikan dengan sintaks arrow tidak mendapat this yang terikat ke objeknya. Nilainya diwarisi dari tempat literal objek itu ditulis (biasanya scope module atau global). Pakai sintaks method singkat (greet() { ... }) untuk method.

Hal yang sama berlaku untuk method prototype pada class, method event handler yang butuh this merujuk ke elemen, dan fungsi apa pun yang ingin kamu panggil dengan new. Di sana, function biasa adalah alat yang tepat.

Pegangan Praktis

• Callback pendek, satu ekspresi? Arrow function.
• Butuh this tetap terikat ke scope luar? Arrow function.
• Mendefinisikan method pada objek atau prototype class? Fungsi biasa (atau method singkat).
• Menulis constructor? Fungsi biasa, atau lebih baik lagi, sebuah class.

Kamu akan melihat kedua gaya ini di codebase JavaScript sungguhan mana pun. Butuh beberapa minggu membaca kode orang lain untuk tahu mana yang cocok. Setelah itu, pilihannya jadi otomatis.

Berikutnya: Parameter dan Nilai Default

Arrow function dan fungsi biasa punya fitur parameter yang sama: nilai default, rest parameter, argumen hasil destructuring, dan lainnya. Itu topik halaman berikutnya, dan berlaku untuk setiap bentuk fungsi yang sudah kamu lihat sejauh ini.