Penggunaan This dalam Arrow Function di Javascript

Introduction

Salah satu fitur utama yang membedakan arrow function di JavaScript dari regular function adalah cara mereka menangani konteks this. Memahami bagaimana this bekerja dalam arrow function sangat penting untuk menulis kode JavaScript yang lebih efisien dan bebas dari bug, terutama ketika bekerja dengan callback, event handler, atau fungsi dalam objek. Dalam artikel ini, kita akan menjelaskan penggunaan this dalam arrow function dan bagaimana perbedaannya dengan regular function.

Apa Itu this dalam JavaScript?

Sebelum masuk ke perbedaan antara arrow function dan regular function, mari kita bahas terlebih dahulu apa itu this dalam JavaScript.

this adalah kata kunci yang merujuk pada objek yang sedang digunakan di dalam suatu konteks tertentu. Nilai dari this tergantung pada cara fungsi dipanggil. Pada regular function, this dapat berubah tergantung pada konteks pemanggilan fungsi. Namun, pada arrow function, this bersifat lexical, artinya nilai this diambil dari konteks tempat fungsi tersebut didefinisikan, bukan dari cara fungsi tersebut dipanggil.

1. Penggunaan this dalam Regular Function

Pada regular function, nilai this ditentukan oleh cara fungsi tersebut dipanggil. Dalam banyak kasus, this merujuk pada objek yang memanggil fungsi tersebut. Jika fungsi dipanggil sebagai metode objek, this akan merujuk ke objek tersebut.

Contoh:

Pada contoh di atas, this merujuk pada objek person karena kita memanggil fungsi greet sebagai metode dari objek person.

Namun, masalah muncul jika kita menggunakan fungsi ini dalam callback atau event handler.

Contoh Masalah this pada Regular Function:

Di sini, meskipun fungsi setTimeout dipanggil di dalam metode greet, this di dalam callback tidak lagi merujuk pada objek person, tetapi merujuk pada objek global (atau undefined dalam strict mode).

2. Penggunaan this dalam Arrow Function

Salah satu keuntungan utama dari arrow function adalah bahwa this dalam arrow function bersifat lexical, artinya this tidak berubah berdasarkan cara fungsi dipanggil, melainkan mengikuti konteks tempat fungsi tersebut didefinisikan.

Arrow function mewarisi nilai this dari fungsi atau objek tempat mereka didefinisikan. Oleh karena itu, Anda tidak perlu khawatir tentang pemanggilan fungsi dalam callback atau event handler yang bisa mengubah nilai this.

Contoh Penggunaan this pada Arrow Function:

Pada contoh di atas, arrow function dalam setTimeout mewarisi this dari metode greet, sehingga this merujuk pada objek person dan kita dapat mengakses properti name dengan benar.

3. Kenapa this di Arrow Function Lebih Mudah Dipahami?

Salah satu alasan mengapa penggunaan this dalam arrow function lebih mudah dipahami adalah karena konteks this tidak berubah. Ini mengurangi kebingungannya, terutama dalam callback, event handler, dan fungsi asinkron. Di regular function, Anda harus lebih hati-hati dalam mengikat this, sedangkan di arrow function, this secara otomatis mengikuti konteks tempat fungsi tersebut didefinisikan.

Misalnya, jika Anda menggunakan setTimeout atau setInterval dalam regular function, Anda harus memastikan bahwa this mengacu pada objek yang diinginkan dengan menggunakan metode seperti bind().

Contoh Bind dengan Regular Function:

Dalam kasus ini, kita menggunakan bind() untuk mengikat this ke objek person secara eksplisit.

4. Arrow Function dalam Metode Objek

Salah satu hal yang perlu diingat adalah bahwa arrow function tidak cocok digunakan sebagai metode objek jika Anda ingin mengakses this dari objek tersebut. Karena this dalam arrow function bersifat lexical, ia tidak mengikatkan diri pada objek pemanggil. Sebagai gantinya, Anda harus menggunakan regular function jika Anda perlu mengakses this dalam objek.

Contoh Penggunaan Arrow Function dalam Objek yang Salah:

Pada contoh di atas, this di dalam arrow function tidak merujuk pada objek person, tetapi ke objek global, sehingga this.name menghasilkan undefined.

Kesimpulan

Penggunaan this dalam arrow function sangat berbeda dibandingkan dengan regular function. Arrow function memudahkan pengelolaan konteks this dengan membuatnya lebih lexical, yang berarti this diambil dari konteks di mana fungsi tersebut didefinisikan. Ini sangat berguna dalam callback, event handler, dan fungsi asinkron, di mana kita sering menghadapi perubahan nilai this.

Namun, arrow function tidak cocok digunakan sebagai metode objek jika Anda perlu mengakses this yang merujuk pada objek pemanggil. Sebaliknya, gunakan regular function untuk situasi tersebut.

Memahami cara kerja this dalam kedua jenis fungsi ini akan membantu Anda menulis kode JavaScript yang lebih jelas dan bebas dari bug.