Pemakaian This dalam Arrow Function di Javascript
DAFTAR ISI
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
Baca Juga:  Cara Membuat Fungsi setTimeout didalam Javascript
    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. 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. console.log(`Hobby saya ialah ${this.hobby}`)
    1. }, 300)
    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. Hobby saya ialah undefined
  1. */
  • Arrow 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

People.prototype.introMyself = function () {

// this -> People

    1.   setTimeout(() => {
    1.    // this -> People
    1.    console.log(`Hello! Nama saya ${this.name}, usia saya ${this.age}.`)
      1.    console.log(`Hobby saya ialah ${this.hobby}`)
    1. }, 300)
    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
  1. */
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 nameage, 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.

Ebook Gratis!!

Subscribe untuk dapatkan e-book GRATIS dan informasi teknologi terbaru dan diskon menarik langsung di Email-mu

Programmer Indonesia
Programmer Indonesia
Admin yang mengelola konten khusus berita. Kalau ada yang ingin diinfokan langsung chat aja ya :D
0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
WhatsApp chat