Understanding 'this' in Javascript

The this keyword is an extremely important concept to understand in Javascript ,and many beginners, like me, find it difficult to understand.

this keyword/variable is a special variable that is created for every execution context(the 'environment' a function executes in).

So what is stored in 'this' keyword ?

In General terms , the this keyword will always take the value of the owner of the function in which the 'this' keyword is used.
or we can say that it points to the owner of the function.

Which means the value of this keyword is not static, it depends on how the function is actually called, and its value is only assigned when the function is actually called.

let's analyze different ways in which function can be called

1. As a Method

means as a function attached to an object.
When we call a method, the this keyword inside that method will simply point to the object in which the method is called. Or in other words, it points to the object that is calling the method.
Ex.

const shashank = {
    name : 'shashank',
    year : 1998,
    findAge: function (){
        console.log(this) // this = shashank object 
        return 2022 - this.year;
    }
}

shashank.findAge(); // 24 

here the value of this keyword inside findAge method is shashank object, because shashank object is calling this method.

2. Simple Function Call

means not as a method & not attached to any object.
In this case the this keyword will be undefined (Only in Strict Mode),
if you're not using 'strict mode'( which you should not be doing), the this keyword will simply point to global object - meaning the window object,
(another good reason to use 'strict mode' )

function findUserAge () {
    console.log(this)
}
findUserAge();

the reason for getting undefined in second line is because function findUserAge() is not returning any value,

'use strict'
function findUserAge () {
    console.log(this)
}
findUserAge();

the reason for getting two undefined is because we are using strict mode so this is undefined and in second line its because function findUserAge() is not returning any value,

3. Arrow Function.

Arrow function do not get their own this keyword , if you use this in an arrow function it will simply be the this keyword of the surrounding function ( or parent function)
In technical terms this is called the lexical this keyword because it simply gets picked up from the outer lexical scope of the arrow function.

const shashank = {
    name : 'shashank',
    year : 1998,
    findAge: () => {
        console.log(this) // Window object
        return 2022 - this.year;
    }
}

shashank.findAge(); // NaN ( Not a Number)

4. Function is called as an Event Listener

Then the this keyword will always point to the DOM element , that the handler function is attached to

What is Not the this keyword

this does not point to the function itself and also not the variable environment of the function

There are also some other ways to call a function using call apply & bind method, calling the function using these three methods is called explicit binding .

Summary