Kenapa this di JavaScript Sering Bikin Developer Bingung?

terdapat satu kata dalam pemograman javascript yang cuma terdiri dari empat huruf, tetapi entah kenapa bisa membuat developer mempertanyakan hidupnya sendiri.

this

Awalnya kita mungkin berpikir secara sederhana. this yang berarti “ini”. kalau kita berada di dalam object user, berarti this adalah user. Masuk akal kan ?

Sampai suatu hari kita menjalankan sebuah kode yang kelihatannya tidak berbeda jauh….

const user = {
    name: "Hikmal",
    
    sayHello() {
        console.info(this.name);
     }
};

user.sayHello();

hasilnya akan seperti dibawah ini:

Hikmal

Menurut ku masih aman, kita pun mulai percaya bahwa kita sudah memahami this. lalu kita akan melakukan sedikit perubahan:

const hello = user.sayHello;

hello();

Dan hasil tiba tiba…. “Hikmal” menghilang. kok bisa ya ?

Tunggu, Bukankah itu fungsi yang sama ?

Disinilah bagian yang menarik dari bahasa pemograman javascript, ketika kita tidak mengubah isi fungsi sayHello(). kita hanya mengubah cara memanggilnya. oke kita kembali pada kode diatas:

user.sayHello();

menjadi sekarang:

hello();

kalau dilihat pada kode diatas fungsinya sama, tetap dengan context-nya berbeda. Dan disinilah kita mulai memahami sesuatu yang penting

this tidak sesederhana “object tempat fungsi berbeda”.

Dalam banyak situasi, this ditentukan oleh bagaimana fungsi tersebut dipanggil. jadi ketika melihat this jangan buru-buru bertanya. seperti dibawa ini

“ini this milik siapa ?”

melainkan mencoba menanyakan:

“Fungsi ini sedang dipanggil bagaimana ?”

Javascript ternyata tidak membaca pikiran kita

Bayangkan ada seseorang yang bernama Hikmal. Ketika Hikmal berada didalam rumahnya, kita tidak tahu siapa Hikmal. Tetapi ketika Hikmal masuk kedalam sebuah ruangan lain, identitasnya tidak berubah.

Get Hikmal’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Nah, this tidak selalu bekerja seperti itu, this lebih mirip dengan:

“Siapa yang sedang menjadikan context ketika fungsi ini dipanggil ?” contohnya

const person = {
      name: "Hikmal",
      
      introduce() {
          console.info(`Saya ${this.name}`);
      }
};

person.introduce();

Potongan kode diatas itu dipanggil melalui person.introduce(), this merujuk pada person sehingga akan menghasilkan:

Saya Hikmal

tetapi ada kasus tertentu kalau method tersebut kita lepas:

const introduce = person.introduce; 

introduce();

Kita tidak lagi memanggilnya melalui person. tetapi Cara pemanggilannya berubah → nilai this bisa ikut berubah.

Dalam Pemograman Javascript masih punya method seperti call, apply, dan bind

kalau sampai sini kamu berpikir “oke kalau aku menentukan sendiri this, bagaimana ?”

Dalam pemograman javascript terdapat beberapa cara untuk melakukan itu, misalnya kita punya sebuah fungsi:

function introduce() {
    console.info(`Saya ${this.name}`);
}

const person = {
    name: "Hikmal"
};

kita bisa memanggilnya fungsi tersebut dengan person sebagai this menggunakan call();

introduce.call(person);

Hasilnya:

Saya Hikmal

Artinya kita secara eksplisit memberi tahu javascript bahwa fungsi introduce() dijalankan, this yang digunakan adalah person. Selain call(), ada juga apply() dan bind(), ketiganya berkaitan dengan cara kita mengatur context sebuah fungsi, meskipun penggunaan yang berbeda. Contohnya, bind() tidak langsung menjalankan fungsi. ia membuat fungsi baru yang terikat dengan person:

const introducePerson = introduce.bind(person);

introducePerson();

Sekarang ketika introducePerson() dipanggil, this didalamnya tetap mengarah ke person. Menariknya, kita bahkan tidak mengubah isi fungsi introduce() sama sekali. kita hanya mengubah context tempat fungsi tersebut dijalankan.

Dan disitulah salah satu kekuatan sekaligus sumber kebingungan this di javascript: fungsi yang sama bisa bekerja dengan context yang berbeda, tergantung bagaimana kita memanggilnya.

Mungkin this bukanlah masalanya ?

terdapat hal yang menarik dari semua kebingungan ini, kita sering mencoba memahami javascript menggunakan intuisi yang kita punya dari bahasa pemograman lain. Dan Javascript punya aturan sendiri.

Aturan ini mungkin terasa aneh pada awalnya, tetapi menjadi masuk akal setelah kita melihat pola dibaliknya. Mungkin itulah salah satu hal menarik dari programming