Pemakaian This dalam Arrow Function di Javascript

Perbedaan karakteristik dari arrow function dan regular function berikutnya ada di pemakaian keyword this. Penjelasan dari this sendiri menyusul di materi class. Tetapi kita akan bahas sedikit terkait ini untuk menggambarkan perbedaan saat this dipakai oleh arrow function dan regular function.

Bila sebuah regular function dipanggil dengan memakai keywordnew. Maka nilainya akan jadi objek, misalnya:

1. function People(name, age, hobby) {

1. his.name = name;
1. this.age = age;
2. this.hobby = hobby;}
3. const programmer = new People(“John”, 18, [“Coding”, “Read book”, “Ping-pong”])nsole.log(programmer.name);console.log(programmer.age);
1. console.log(programmer.hobby);

1. /* output:
2. John18

1. [ ‘Coding’, ‘Read book’, ‘Ping-pong’ ]*/

Objek yang dibuat memakai function dengan keyword new, seperti halnya seperti kita membuat objek seperti memakai objek literals { }.

1. const programmer = {

1. name: “John”,

1. age: 18,
2. hobby: [“Coding”, “Read book”, “Ping-Pong”]
3. }
1. console.log(programmer.name);
1. console.log(programmer.age);
1. console.log(programmer.hobby);
1. /* output:

1. John

1. 18
1. [ ‘Coding’, ‘Read book’, ‘Ping-pong’ ]*/

Pada objek, this keyword mengembalikan nilai objeknya sendiri. this bisa dipakai untuk mengurus properti pada objeknya. Tetapi bila fungsi dipanggil tanpa memakai keyword new, this akan mempunyai nilai global object (Window bila di browser).

Sedangkan fungsi yang dibikin dengan memakai gaya arrow tak akan pernah mempunyai nilai this, yang berarti kita belum pernah dapat membuat objek memakai arrow function. Bila kita memakai this pada arrow function maka nilai this itu merupakan nilai objek di mana arrow function itu berada.

Perhatikan kedua contoh kode berikut:

- Regular Function

1. function People(name, age, hobby) {

1. this.name = name;

1. this.age = age;

1. this.hobby = hobby;
1. }

1. // menambahkan introMyself ke People

1. 1. People.prototype.introMyself = function () {
1. // this -> People
1. setTimeout(function() {

1. // this -> ??

1. console.log(`Hello! Nama saya ${this.name}, usia saya ${this.age}.`)

1. 1. console.log(`Hobby saya ialah ${this.hobby}`)
1. }, 300)

1. }

1. 1. const programmer = new People(“John”, 18, [“Coding”, “Read book”, “Ping-pong”])
1. programmer.introMyself();

1. /* output:

1. Hello! Nama saya undefined, usia saya undefined.

1. 1. Hobby saya ialah undefined

Arrow Function

1. function People(name, age, hobby) {

1. this.name = name;

1. this.age = age;

1. 1. this.hobby = hobby;
1. }

1. // menambahkan introMyself ke People

People.prototype.introMyself = function () {

// this -> People

1. setTimeout(() => {

1. // this -> People

1. console.log(`Hello! Nama saya ${this.name}, usia saya ${this.age}.`)

1. 1. console.log(`Hobby saya ialah ${this.hobby}`)
1. }, 300)
1. }

1. 1. const programmer = new People(“John”, 18, [“Coding”, “Read book”, “Ping-pong”]);
1. programmer.introMyself();

/* output:

1. Hello! Nama saya John, usia saya 18.

1. Hobby saya ialah Coding,Read book,Ping-pong

Fungsi yang dituliskan di dalam setTimeout() dipanggil tanpa new. Itu artinya nilai dari this bila dipakai di dalam fungsi itu ialah global object. Itulah kenapa output akan menghasilkan nilai undefined saat properti name, age, dan hobby dipanggil.

Berbeda saat kita menuliskan arrow function di dalam setTimeout(), nilai this mempunyai nilai objek sesuai dengan konteksnya (People). Arrow function akan sangat berfungsi untuk kasus semacam ini.