This Keyword

Run Settings
LanguageJavaScript
Language Version
Run Command
/* 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. */
Editor Settings
Theme
Key bindings
Full width
Lines