What is "This" keyword ? in Javascript

If you are a beginner in javascript you may encounter the "THIS" keyword. Initially, it is confusing to understand as it behaves differently for javascript language concerning other languages like java, c# etc.
In this blog, I will cover the basics of this keyword and how its works concerning different scenarios in javascript.

Before we get into "THIS", here is some prerequisite with which you have to be familiar with it.

As you know browser does not understand the deep level of javascript code so its needs to be converted into code which the browser will execute. Therefore, the browser's JS engine creates a special environment to execute the Advanced Javascript code called Execution Context.

• Execution context:- The scope in which the lines of code are executed. The javascript has a stack of these execution contexts and the one on top of the stack is currently being executed.

There are two types of Execution Context

• Global Execution Context:- It is the default Execution Context which means all Javascript code which is outside the function executed in this Context so, for each javascript file there can only be one Global Execution Context
• Functional Execution Context:-It is a different type of Execution Context created when a function calls happen in Javascript code. There can be one or more Functional calls so, for each call different Functional Execution Contexts will get created.

Now we know how Code is executed, let's start with "THIS"
This simply means how the function has been called

By, the default execution context is global - which led to this referring to a global context which contains a window object means this points to a window object as you can see in the below code

function abc(){
       console.log(this)
}
abc() /* which will gives you 
      window object:-Window {window: Window, self: 
       Window, document: document,...} */

But, If strict mode is enabled for any function, then the value of this will be marked as undefined as in strict mode as you can see in the code

function abc(){
    'use strict';
       console.log(this)
}
abc()// which gives of "undefined" as a value of this  

"this" with constructor function
when the function is called with a new keyword it creates a new instance every time it gets called, thus the value of this will refer to the most recent created instance as you can see in the code

function capitalOfCountry(country,capital){
    this.country = country ;
    this.capital = capital ;

    console.log(`${this.capital} is a capital of ${this.country } `)
}
new capitalOfCountry("India","New Delhi")// New Delhi is a capital of India 
new capitalOfCountry("Dhaka", "Bangladesh")//Bangladesh is a capital of Dhaka 

"this" with the call, apply and bind
To set the custom value of this we use to call, apply and bind methods which come with every javascript function.
let's see Call and Apply first as the only difference between them are the second argument of apply is an array which contains arguments while in call arguments are passed individually.

function capitalOfCountry(country,capital){
    this.country = country ;
    this.capital = capital ;
    this.dispalyCapitalOfCountry = function() {
    console.log(`${this.capital} is a capital of ${this.country } `)
    }
}

let firstCountry = new capitalOfCountry("India","New Delhi")
firstCountry.displayCapitalOfCountry()//New Delhi is a capital of India
let secondCountry = new capitalOfCountry("Bangladesh","Dhaka")
secondCountry.displayCapitalOfCountry()//Dhaka is a capital of Bangladesh 

firstCountry.dispalyCapitalOfCountry.call(secondCountry)//Dhaka is a capital of Bangladesh

And with the bind method, will create the new function bind with the object specified in the bind( second country ) so this refers to secondCountry

function capitalOfCountry(country,capital){
    this.country = country ;
    this.capital = capital ;
    this.dispalyCapitalOfCountry = function() {
    console.log(`${this.capital} is a capital of ${this.country }`);
    }
}
let firstCountry = new capitalOfCountry("India","New Delhi")
firstCountry.dispalyCapitalOfCountry()//New Delhi is a capital of India
let secondCountry = new capitalOfCountry("dhaka","bangladesh")
secondCountry.dispalyCapitalOfCountry()//bangladesh is a capital of dhaka
let displaySecond = firstCountry.dispalyCapitalOfCountry.bind(secondCountry)
displaySecond()//bangladesh is a capital of dhaka

Summary

• "this" simply means how the function is called in the javascript code
• By default "this" refers to the window object which is present in a global context
• with constructor function, it always refers to the newly created object
• with the call, apply and Bind this will always refer to the values passed in that function.