Kita telah mempelajari bahwa kita bisa menambahkan method di object dengan menggunakan function expression. Kemudian muncul pertanyaan, apakah function expression bisa kita ganti menjadi arrow function? Jawabannya adalah bisa ya. Namun kita mesti tahu dahulu bahwa cara kerja this pada function expression berbeda dari arrow function. Pada function expression, this merujuk ke object yang sedang menjalankan method tersebut. Sedangkan pada arrow function, this merujuk ke object pada function yang memanggil arrow function, atau dikenal dengan istilah lexical scope.

Kita lihat kembali source code kita ya. Jadi kita memiliki object sederhana teacher, dengan property firstName dan lastName. Lalu kita punya satu buah method fullName yang mengembalikan nama depan sekaligus nama belakangnya. Kalau kita jalankan di browser. Maka kita bisa memanggil method teacher.fullName() dan mendapatkan hasil Skysen Solution.

Nah, sekarang kita lihat lagi method disini ditulis menggunakan function Expression ya. Bisa ga kalau kita ubah cara penulisannya menjadi arrow function? Supaya lebih keren ya cara penulisannya. Jadi sekarang kita copy method fullName dan kita paste dibawahnya, kita ubah namanya menjadi fullNameArrow. Maksudnya method fullName yang ditulis menggunakan Arrow Function ya. Kita ganti kata function-nya menjadi arrow.

Kita simpan dan jalankan di browser ya. Ternyata kita mendapatkan hasil “undefined undefined”. Mengapa? Karena arrow function tidak berhasil mengambil nilai dari property firstName dan lastName.

Bagaimana cara menelusurinya? Nah, perhatikan bahwa pada saat mengambil nilai property, kita harus menggunakan kata kunci this. Jadi kita harus menelusuri dahulu, apakah yang dirujuk oleh this di dalam method. Jadi kita komentari dahulu kode returnnya ya. Kita buat kode baru yaitu return this. Kita ubah juga kode pada method fullName yang menggunakan function expression.

Kita simpan dan jalankan lagi di browser. Kita panggil method fullName(). Maka yang dikembalikan adalah object teacher. Jadi bisa dilihat disini ada firstName, lastName, dan seterusnya. Jadi kata kunci this pada method fullName merujuk ke object teacher.

Kita coba jalankan method fullNameArrow(). Ternyata yang dikembalikan adalah object Window. Jadi kata kunci this di dalam arrow function, tidak merujuk ke object teacher, melainkan merujuk ke object Window. Dan berhubung object Window tidak mengenal property firstName dan lastName, maka kode sebelumnya menghasilkan “undefined undefined”.

Jadi ini perbedaan antara this pada function expression dengan this pada arrow function. This pada function expression akan merujuk ke object pada saat eksekusi. Berhubung method fullName dieksekusi di dalam object teacher, maka this merujuk ke object teacher. Sedangkan this pada arrow function merujuk secara lexical scope. Browser mencari object yang berada di atas teacher, yaitu window. Nanti kita akan pelajari lebih dalam mengenai object window kalau kita sudah masuk ke materi Document Object Model (DOM).

Sekarang kita masuk ke contoh kedua. Misalkan kita membuat method baru yaitu teach. Di dalamnya, pertama kita buat dahulu variable students dalam bentuk array, dengan isi “Andi” dan “Budi”. Kemudian kita memanggil array method forEach untuk menuliskan “Skysen mengajar Andi” dan “Skysen mengajar Budi”. Pertama kita gunakan function expression terlebih dahulu. Jadi kita membuat function dengan parameter element, yang isinya menuliskan ke console `${this.firstName} is teaching ${element}`.

teach : function() {
  let students = ["Andi", "Budi"];
  students.forEach(function (element){
    console.log(`${this.firstName} is teaching ${element}`);
  });
}

Kita simpan dan jalankan di browser. Kita panggil method teacher.teach(). Ternyata hasilnya adalah “undefined is teaching Andi”, dan “undefined is teaching Budi”. Kenapa undefined? Kita lihat kembali ke kodenya, ternyata yang salah adalah this.firstName. Kita periksa kembali apa yang dimaksud dengan this di dalam method ini? Dan ternyata this di dalam function Expression merujuk ke Window. Hal ini disebabkan karena function yang di dalam forEach ini adalah sebuah argument. Dan function ini dieksekusi dalam ruang lingkup Window, sehingga this merujuk ke Window.

Bagaimana cara mengakalinya? Nah, untuk array methods, Javascript telah menyediakan parameter kedua untuk merujuk this. Jadi pada saat kita memanggil method forEach, kita bisa tambahkan argument kedua this, agar this di dalam function expression bisa merujuk ke object teacher. Dan kalau object yang ditunjuk oleh this sudah benar, maka method bisa memberikan hasil yang kita harapkan.

Nah, cara kedua adalah dengan menggunakan arrow function di dalam forEach. Kita copy paste dulu ya, agar source code lama tidak hilang. Kita ubah argumentnya menjadi arrow function, dan kita hapus argument kedua.

Dan pada saat kita jalankan, ternyata kode sudah langsung berjalan secara benar ya. Mengapa? Karena this pada arrow function merujuk ke object secara lexical. Berhubung method forEach berada di dalam method teach, maka this merujuk ke object yang memiliki method teach, yaitu teacher.

Jadi pada video ini kita sudah belajar ya, bahwa kata kunci this pada function expression dan this pada arrow function merujuk ke object yang berbeda. Yang paling penting disini adalah teman-teman bisa menelusuri jalannya script yang telah kita tulis. Apabila teman-teman merasa kata kunci this merujuk ke object yang tidak sesuai, maka kita bisa langsung memeriksanya dengan menggunakan console.log. Dan kalau ternyata memang object-nya berbeda, maka kita bisa mengakalinya dengan menggunakan variable, argument, ataupun menggunakan cara lainnya.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.