Understanding "this" keyword in Javascript

Table of Contents:

1. What is this keyword and why it is confusing?
2. Global execution Context
3. this keyword Inside Method
4. Simple Function Call
5. Event Listener
6. Arrow Function
7. Take aways from this blog

1. What is this keyword and why it is confusing?

When i started learning javascript i came across the this keyword and it was quite difficult for me to understand the this keyword and i came to know that many of the developers had hard time understanding this .

So what is this 🤔 ? , let's look into that.

this is a special keyword that is created for every execution context.

Execution context: When the JavaScript engine scans a script file, it makes an environment called the Execution Context that handles the entire transformation and execution of the code. During the context runtime, the parser parses the source code and allocates memory for the variables and functions.

this is not static i.e it changes depending upon the place where it is used.In most cases, value of this is determined by how function is called.

2. Global execution context

In the global execution context i.e outside of any function this refers to global object which is window in case of browsers.

console.log(this) //Window
this === window //true

3. this keyword Inside Method

In a method, this keyword refers to the object it belongs to ,which means using this keyword we can able to access its properties inside an object.

const profile = {
    name: 'suresh',
    favLang: 'javascript',
    printUser: function(){
        console.log(`${this.name} ${this.favLang}`);
    }
}
profile.printUser();  

In browser's console we get,

suresh javascript

4. Simple Function Call

his in a function refers to global object Window but in strict mode this keyword refers to undefined.

Strict mode: In order to use strict mode we use an expression: “use strict”.It helps to write cleaner code, like preventing from using undeclared variable.

function testThis(){
    console.log(this);
}
testThis()   // represents Window

“use strict"
function testThis(){
    console.log(this);
}
// undefined

5. Event Listener

In event listeners this keyword refers to DOM element that handler is attached to.In simple words it refers to HTML element that received the event.

6. Arrow functions

In javascript Arrow function does not get its own this keyword.It uses lexical i.e it uses parent scope of this keyword.

const ex=()=>{
    console.log(this);
}

ex(); 
// refers to parent _this_ keyword.

const profile={
    name:'suresh',
    print:function(){
        const fav='javascript'
        return ()=>{
            console.log(this,this.fav);
        }
    }
}
profile.print()();


name: "ch",
print:f()
},js

Isn't it cool..! the this keyword also makes easier to reference the object in our program.

7. Take aways form this blog

1. Method-this refers to object in which method is called
2. Simple function call -Window Strict mode-undefined
3. Event Listener-DOM element in which handler is attached to
4. Arrow function-does not get its own this.It uses lexical(parent scope of this)
5. Global context- Window object.