This Keyword
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
/* Perbedaan ketika this digunakan oleh arrow function dan regular function.
Jika sebuah regular function dipanggil dengan menggunakan
keyword new.
Maka nilainya akan menjadi objek, karena jadi objek, maka utk mengakses nilai
dari properti objek kita dapat gunakan tanda titik diikuti nama properti-nya*/
//contohnya:
function People(name, age, hobby) {
this.name = name;
this.age = age;
this.hobby = hobby;
}
const programmer = new People("Hifni", 21, ['Coding', 'otak-atik computer', 'Nonton Film']);
console.log(programmer.name);
console.log(programmer.age);
console.log(programmer.hobby);
/* Objek yang dibuat menggunakan function dengan keyword new,
sama halnya seperti kita membuat objek seperti
menggunakan objek literals { }. */
const profile = {
nama: "John",
umur: 18,
hobi: ["Coding", "Read book", "Ping-Pong"]
}
console.log("\n" + profile.nama);
console.log(profile.umur);
console.log(profile.hobi);
/* Pada objek, this keyword mengembalikan nilai objeknya sendiri.
this dapat digunakan untuk mengelola properti pada objeknya.
Namun jika fungsi dipanggil tanpa menggunakan keyword new,
this akan memiliki nilai global object (Window jika di browser).
Sedangkan fungsi yang dibuat dengan menggunakan gaya arrow
tidak akan pernah memiliki nilai this, yang artinya
kita tidak pernah bisa membuat objek menggunakan arrow function.
Jika kita menggunakan this pada arrow function maka nilai this
tersebut merupakan nilai objek di mana arrow function itu berada.*/
// Perhatikan kedua contoh kode berikut:
// Regular function
// menambahkan introMyself ke People
People.prototype.introMyself = function () {
// this -> People
setTimeout(function(){
// this -> ??
console.log(`\nMenggunakan Regular Function`)
console.log(`Haiii! Nama saya ${this.name}, umur saya ${this.age}.`);
console.log(`Dan hobi saya adalah ${this.hobby}`);
},300)
}
programmer.introMyself();
// Arrow Function
People.prototype.introMyself = function () {
setTimeout(() => {
//this -> People
console.log(`\nMenggunakan Arrow Function`)
console.log(`Haiii! Nama saya ${this.name}, umur saya ${this.age}.`);
console.log(`Dan hobi saya adalah ${this.hobby}`);
},300)
}
programmer.introMyself();
/* Fungsi yang dituliskan di dalam setTimeout() dipanggil tanpa new.
Itu berarti nilai dari this jika digunakan di dalam fungsi tersebut
adalah global object. Itulah mengapa output akan menghasilkan nilai
undefined ketika properti name, age, dan hobby dipanggil.
Berbeda ketika kita menuliskan arrow function di dalam setTimeout(),
nilai this memiliki nilai objek sesuai dengan konteksnya (People).
Arrow function akan sangat berguna untuk kasus seperti ini. */
JavaScript
INFO