Panduan Lengkap Pemakaian This dalam Arrow Function JavaScript

Salah satu fitur paling populer yang diperkenalkan pada ES6 adalah Arrow Function. Namun, banyak pengembang JavaScript—baik pemula maupun yang berpengalaman—sering dibuat bingung oleh perilaku kata kunci this di dalam arrow function yang berbeda signifikan dari regular function. Artikel ini akan membahas secara tuntas bagaimana lexical this bekerja, lengkap dengan contoh kode dan studi kasus penggunaan yang tepat.

Mengapa this dalam Arrow Function Berbeda dari Regular Function?

Pernahkah Anda mengalami bug yang aneh: properti di dalam object tiba-tiba bernilai undefined padahal seharusnya ada nilainya? Atau mungkin Anda bingung kenapa this di satu fungsi merujuk ke object yang berbeda? Kalau iya, kemungkinan besar Anda sedang berurusan dengan salah satu topik paling membingungkan di JavaScript: keyword this. Memahami this dalam arrow function adalah keterampilan wajib bagi setiap JavaScript developer.

Yang menarik, arrow function dan regular function memiliki perilaku yang sangat berbeda dalam hal this. Perbedaan perilaku this dalam arrow function vs regular function sering menjadi sumber bug yang sulit dideteksi. Perbedaan ini sering menjadi sumber bug yang sulit dideteksi, terutama bagi developer pemula. Jadi, mari kita bahas perbedaannya secara mendalam dengan contoh-contoh kode yang bisa langsung Anda coba. Pelajari referensi resmi tentang keyword this di MDN.

Regular Function dan this

Sebelum membahas arrow function, penting untuk memahami bagaimana regular function menangani this. Ketika sebuah regular function dipanggil dengan keyword new, nilainya akan menjadi objek baru yang dibuat. Perhatikan contoh berikut:

function People(name, age, hobby) {
 this.name = name;
 this.age = age;
 this.hobby = hobby;
}

const programmer = new People(
 "John",
 18,
 ["Coding", "Read book", "Ping-pong"]
);

console.log(programmer.name); // output: John
console.log(programmer.age); // output: 18
console.log(programmer.hobby); // output: ['Coding', 'Read book', 'Ping-pong']

Dalam kode di atas, this merujuk ke objek baru yang dibuat oleh new People(). Jadi this.name = name sama artinya dengan programmer.name = "John". Ini berfungsi persis seperti objek literal:

const programmer = {
 name: "John",
 age: 18,
 hobby: ["Coding", "Read book", "Ping-Pong"]
};

Namun, masalah muncul ketika Anda menggunakan this di dalam fungsi callback atau nested function:

function People(name, age, hobby) {
 this.name = name;
 this.age = age;
 this.hobby = hobby;
}

People.prototype.introMyself = function() {
 // this -> People ✅
 setTimeout(function() {
 // this -> ??? ❌ ini global object!
 console.log(`Hello! Nama saya ${this.name}, usia saya ${this.age}.`);
 console.log(`Hobby saya ialah ${this.hobby}`);
 }, 300);
};

const programmer = new People(
 "John", 18,
 ["Coding", "Read book", "Ping-pong"]
);

programmer.introMyself();
/* output:
 Hello! Nama saya undefined, usia saya undefined.
 Hobby saya ialah undefined
*/

Apa yang terjadi? Di baris this.name = name, this merujuk ke objek People. Tapi di dalam setTimeout, this berubah menjadi undefined (atau global object di mode non-strict). Kenapa?

Karena fungsi di dalam setTimeout dipanggil tanpa new, this di dalamnya merujuk ke global object, bukan ke objek People. Ini adalah trap klasik tentang this dalam arrow function yang sudah memakan banyak korban di dunia JavaScript.

Bagaimana this dalam Arrow Function Bekerja?

Karakteristik utama this dalam arrow function adalah: arrow function tidak memiliki nilai this milik sendiri. Artinya, this di dalam arrow function akan merujuk ke this dari konteks di mana arrow function itu didefinisikan (lexical this).

Mari kita lihat perbedaannya:

function People(name, age, hobby) {
 this.name = name;
 this.age = age;
 this.hobby = hobby;
}

People.prototype.introMyself = function() {
 // this -> People ✅
 setTimeout(() => {
 // this -> People ✅ (mewarisi dari outer scope)
 console.log(`Hello! Nama saya ${this.name}, usia saya ${this.age}.`);
 console.log(`Hobby saya ialah ${this.hobby}`);
 }, 300);
};

const programmer = new People(
 "John", 18,
 ["Coding", "Read book", "Ping-pong"]
);

programmer.introMyself();
/* output:
 Hello! Nama saya John, usia saya 18.
 Hobby saya ialah Coding,Read book,Ping-pong
*/

Hasilnya? Sekarang outputnya benar! this di dalam arrow function otomatis merujuk ke People, bukan ke global object. Ini terjadi karena arrow function tidak membuat this baru — ia mewarisi this dari fungsi terluar (dalam kasus ini, introMyself).

Visualisasi Perbedaan this

Untuk membantu Anda memahami perbedaannya, coba bayangkan seperti ini:

• Regular function: this ditentukan oleh bagaimana fungsi dipanggil (call site). Dipanggil dengan new? this = objek baru. Dipanggil dengan obj.method()? this = obj. Dipanggil biasa? this = global object
• Arrow function: this ditentukan oleh tempat fungsi didefinisikan (lexical scope). Tidak peduli bagaimana fungsi dipanggil, this selalu merujuk ke konteks tempat arrow function itu ditulis

Ini seperti perbedaan antara surat dan email. Regular function seperti surat: alamat tujuan ditentukan oleh penerima. Arrow function seperti email: alamat sudah ditentukan oleh pengirim.

Contoh Kasus: Object Method dengan Arrow Function

Salah satu kesalahan paling umum adalah menggunakan arrow function sebagai method pada object literal:

const mahasiswa = {
 nama: "Budi",
 umur: 20,
 perkenalan: () => {
 // this -> global object, bukan mahasiswa!
 console.log(`Halo, nama saya ${this.nama}, umur saya ${this.umur} tahun`);
 }
};

mahasiswa.perkenalan();
// output: Halo, nama saya undefined, umur saya undefined tahun

Output-nya undefined karena arrow function tidak memiliki this sendiri, dan di level global tidak ada properti nama atau umur.

Solusinya? Gunakan regular function:

const mahasiswa = {
 nama: "Budi",
 umur: 20,
 perkenalan() {
 // this -> mahasiswa ✅
 console.log(`Halo, nama saya ${this.nama}, umur saya ${this.umur} tahun`);
 }
};

mahasiswa.perkenalan();
// output: Halo, nama saya Budi, umur saya 20 tahun

Atau jika Anda tetap ingin menggunakan arrow function, buatlah method biasa yang di dalamnya memanggil arrow function:

const mahasiswa = {
 nama: "Budi",
 umur: 20,
 perkenalan() {
 // this -> mahasiswa ✅
 const sapa = () => {
 // this -> mahasiswa ✅ (mewarisi dari perkenalan)
 console.log(`Halo, nama saya ${this.nama}, umur saya ${this.umur} tahun`);
 };
 sapa();
 }
};

mahasiswa.perkenalan();
// output: Halo, nama saya Budi, umur saya 20 tahun

Contoh Kasus: Event Handler

Situasi lain di mana this sering menjadi masalah adalah saat menangani event pada element DOM:

// ❌ Menggunakan arrow function sebagai event handler
const tombol = document.getElementById("myButton");
tombol.addEventListener("click", () => {
 // this -> window, bukan element tombol!
 console.log(this); // output: Window
});

// ✅ Menggunakan regular function
const tombol2 = document.getElementById("myButton");
tombol2.addEventListener("click", function() {
 // this -> element tombol ✅
 console.log(this); // output: <button id="myButton">...</button>
 this.style.color = "red"; // berfungsi dengan benar
});

Di sini, regular function memberikan this yang benar (element DOM yang mendapat event), sedangkan arrow function memberikan this dari konteks luar (global).

Kapan Menggunakan Arrow Function untuk this?

Arrow function sangat berguna dalam situasi berikut:

1. Callback dalam Metode Array

const kelas = {
 nama: "TI-2024",
 mahasiswa: ["Andi", "Budi", "Citra"],
 cetakSemua() {
 // this -> kelas ✅
 this.mahasiswa.forEach(m => {
 // this -> kelas ✅ (mewarisi dari cetakSemua)
 console.log(`${m} adalah mahasiswa kelas ${this.nama}`);
 });
 }
};

kelas.cetakSemua();
// output:
// Andi adalah mahasiswa kelas TI-2024
// Budi adalah mahasiswa kelas TI-2024
// Citra adalah mahasiswa kelas TI-2024

Tanpa arrow function, Anda harus menyimpan this ke variabel terlebih dahulu menggunakan pattern var self = this. Dengan arrow function, hal itu tidak diperlukan lagi.

2. Promise dan Async/Await

const user = {
 nama: "Andi",
 fetchData() {
 // this -> user ✅
 return fetch("/api/data").then(res => res.json()).then(data => {
 // this -> user ✅ (mewarisi dari fetchData)
 console.log(`${this.nama} mendapatkan data:`, data);
 });
 }
};

Arrow function di dalam Promise chain akan mewarisi this dari fungsi luar, sehingga Anda tetap bisa mengakses properti objek tanpa masalah.

Ringkasan Perbedaan this

Best Practices

1. Gunakan arrow function untuk callback dan fungsi anonim di dalam metode array, Promise, atau event handler
2. Gunakan regular function untuk method pada object literal dan constructor function
3. Hindari arrow function sebagai event handler jika Anda perlu this merujuk ke element DOM
4. Gunakan bind() jika Anda terjebak dengan regular function yang this-nya tidak sesuai harapan
5. Baca MDN Web Docs tentang Arrow Functions untuk referensi lengkap

Debugging Tips: Menemukan Masalah this

Ketika Anda mengalami masalah dengan this, berikut beberapa langkah debugging yang bisa dilakukan:

• Gunakan console.log(this) — Tempatkan ini di awal fungsi untuk melihat ke mana this merujuk. Ini adalah cara paling cepat untuk menemukan masalah
• Cek apakah Anda menggunakan arrow function — Jika this tidak sesuai harapan, kemungkinan Anda menggunakan arrow function di tempat yang seharusnya menggunakan regular function, atau sebaliknya
• Gunakan bind() — Jika Anda sudah terlanjur menggunakan regular function dan this-nya salah, Anda bisa mengikat this secara manual: fungsi.bind(objekTertentu)
• Perhatikan konteks lexical scope — Tanyakan pada diri sendiri: “Di mana arrow function ini didefinisikan, bukan dipanggil?” this akan merujuk ke konteks di mana ia didefinisikan

Kesimpulan

Memahami perilaku this di arrow function vs regular function adalah salah satu keterampilan paling penting dalam JavaScript modern. Arrow function memberikan solusi elegan untuk masalah this yang sudah lama mengganggu developer JavaScript — terutama dalam konteks callback dan nested function.

Tapi ingat, arrow function bukan pengganti total regular function. Masing-masing punya tempatnya sendiri. Kuncinya adalah tahu kapan harus menggunakan yang mana. Dengan pemahaman yang benar tentang this, Anda akan menghemat banyak waktu debugging dan menulis kode yang lebih bersih.

Bagaimana Lexical Scope Mempengaruhi this dalam Arrow Function?

Ketika Anda menggunakan this dalam arrow function, JavaScript tidak menciptakan binding this baru. Sebaliknya, ia mewarisi this dari konteks lexical. Ini berarti perbedaan this dalam arrow function sangat krusial untuk dipahami.

Regular function seperti ruangan terpisah yang memiliki “penghuni” this sendiri-sendiri. Sementara arrow function seperti jendela yang tembus pandang — ia tidak memiliki “penghuni” sendiri.

Contoh Praktis Perbedaan this dalam Arrow Function

// Regular function - 'this' berubah sesuai pemanggil
const objReguler = { nama: "Budi", sapa: function() { return "Halo, saya " + this.nama; } };
console.log(objReguler.sapa()); // "Halo, saya Budi"
// Arrow function - 'this' TIDAK berubah
const objPanah = { nama: "Andi", sapa: () => { return "Halo, saya " + this.nama; } };
console.log(objPanah.sapa()); // "Halo, saya undefined"

Dalam this dalam arrow function, nilai this merujuk ke objek global, bukan ke objek pemanggil.

Kapan Menggunakan Arrow Function vs Regular Function?

Pemahaman tentang this dalam arrow function membantu Anda memutuskan kapan harus menggunakan masing-masing:

• Gunakan arrow function untuk callback, array methods (map, filter, reduce).
• Gunakan regular function untuk method object, constructor, dan kasus yang membutuhkan this dinamis.

Poin penting: dalam this dalam arrow function, tidak ada bind(), call(), atau apply() yang bisa mengubah nilai this.

Kesalahan Umum yang Melibatkan this dalam Arrow Function

1. Menggunakan arrow function di method object — Gunakan regular function untuk method yang membutuhkan akses ke properti objek.
2. Menggunakan arrow function di event handler DOM — this akan merujuk ke objek window.
3. Menggunakan arrow function di class constructor — this akan merujuk ke konteks lexical.

Hal yang sering ditanyakan seputar This dalam Arrow Function