De-mystifying 'this' keyword of Javascript

 Hello today I will be talking about 'this' keyword of javascript.It is one of the most confusing term of javascript. Since it is quite a confusion thing I will be compiling stuffs based on the materials I have learnt from the internet so as to help myself in the future.

'this' keyword can be considered quite the literal this word is English alphabet atleast for the initial understanding.

Let's consider a main table of a house. It will be termed in js langauge as

this.table = "main table"

If we console log window.table or this.table than we will be considering the main house's table

console.log(window.table) //main table

Now let consider the dinning table of the house. It will be 

this.dinning={

table:"dinning table"}

If we want to call it will be 

this.dinning.table // dinning table

 

Now let consider a private room and in this case it will be a function and if we want to use there we can use as mentioned below

let johnsroom = {

table:'johns table'

}

console.log(johnsroom.table)

we can't use this here directly as it is a function so we can's use

this.johnsroom.table

Now if we want to call a method inside a function we can easily do it using this keyword. So let's dive in citing the example of johnsroom and dinning room

//Dinning Table

this.dinning={

table:"dinning table" 

        cleanTable(){

console.log(`Cleaning ${this.table}`}

}

 

let johnsroom = {

table:'johns table' ;

cleanTable(){

console.log(`Cleaning ${this.table}`}

}

}

Now if we want to invoke the method directly than we can use

 

johnsroom.cleanTable();

this.dinning.cleanTable();

 

If we want to use this within function than we can  use it globally.Lets see how

We basically do it using call method 

const cleanTable = function(){

console.log(`Cleaning ${this.table}

}

Although to use it for global variable we can use it direcly like

cleanTable() and it will work but it is not a good idea as it will not work in strict mode and other cases

as inside a function it shouldn't have access 

so we use call() function

so all we have to use it like this

cleanTable.call(this) // cleaning main table

we can also  use a variable in this like

const cleanTable = function(){

console.log(`Cleaning ${this.table} with soap`)

}

 Now we can pass this argument like this

cleanTable.call(this,'some soap') // Cleaning main table with some soap

 

Now let's do the same for the johnsroom and dinning room by removing the cleanTable() method from them. The rewriting function will be:-

 

this.dinning={

table:"dinning table"

}

 

let johnsroom = {

table:'johns table' ;

}

 

const cleanTable = function(soap){

console.log(`Cleaning ${this.table}with soap`}

}

 cleanTable.call(this.dinning,'some soap') // cleaning dinning table using some soap

 cleanTable.call(johnsroom,'some soap')// cleaning jons room using some soap

Inner function

const cleanTable = function(soap){

const innerFunction = function(_soap){

console.log(`Cleaning ${this.table} with $(_soap)`)

}

innerFunction(soap) 

 cleanTable.call(this.dinning,'some soap')

Now if we directly call we will get a error because this method won't work directly inisde a function without using call,bind etc\

We have multiple method to use this inisde inner function

1) Link the function using this method

const cleanTable = function ( soap ) {
let that= this ;
const innerFunction = function ( _soap ) {
console.log ( cleaning $ { that.table } using $ { _ soap } ' ) ;
}
innerFunction ( soap ) ;
} ;

2) Using Call inside inner function

const cleanTable = function ( soap ) {
const innerFunction = function ( _soap ) {
console.log ( cleaning
}
innerFunction.call ( this , soap ) ;

} ; 

3)Using Bind

Bind creates a new function

 const cleanTable = function ( soap ) {
const innerFunction = function ( _soap ) {
console.log ( cleaning
}
innerFunction.bind( this)(soap ) ;

} ;

 4) using a arrow function 

 const cleanTable = function ( soap ) {
const innerFunction = ( _soap )=> {
console.log ( cleaning
}
innerFunction(soap ) ;

} ;