What is “THIS” keyword in Javascript?

If we want to understand this issue, the first question to ask is :
what is the object executing the current function ?

What is “This” ?

Outside of a function “this” refers to the global object. In a browser the global object is “window”, in a node it is “global”.

if you write the console “console.log(this)” in browser , you will see that -

This is the case in the browser, what the “this” refers to when we reference it within a function ?

There are four different ways we can invoke a function in javascript.

1. Regular Function Invocation

function regularFunction() {
  console.log("this", this)
}
regularFunction(); // window

In a function invocation “this” is the global object.

but

if you use “use strict” , you will see in the console this-> undefined ;

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

2. Method Invocation

var obj = {
    name :"Rifat",
    printName() {
        console.log(this.name)
    }
};

obj.printName(); //Rifat

In a method invocation “this” is the object that the method belongs to , so your output is “Rifat” in this code block.

And also you can add a new method your object ;

var obj = {
    name :"Rifat",
    printName() {
        console.log(this.name)
    }
};

obj.printName(); //Rifat
obj.sayHi = function(){
    console.log(`My name is ${this.name}`)
}
obj.sayHi() ; // My name is Rifat

but also if you want to assign new method from existing method , you will see “undefined” on the console ;

var obj = {
    name :"Rifat",
    printName() {
        console.log(this.name)
    }
};

obj.printName(); //Rifat
obj.sayHi = obj.printName ;
obj.sayHi() ; //undefined

because if you extract a method from an object and assign it to a variable , “this” is the global object.

3. Constructor Invocation

var Cheese = function(type) {
    this.type = type ;
    this.sayCheese = function(){
          console.log(this.type)
 }
}

cheddar = new Cheese("cheddar");
cheddar.sayCheese() ; // cheddar

In a constructor function “this” references the newly created object.

4. Indirect Invocation (call, apply,bind …)

var add = function(num1, num2) {
        return num1+num2;
}

array = [3,4];
add.apply(null,array); //7

Apply takes two parameters: the first parameter is an object to bind the this parameter to, the second is an array which is mapped to the parameters

JavaScript also has another invoker called call, that is identical to apply except that instead of taking an array of parameters, it takes an argument list. If JavaScript would implement function overriding, I think that call would be an overridden variant of apply. Therefore one talks about apply and call in the same vein.

In an indirect invocation “this” is the first argument in .call(), .apply or .bind().

For understand “this” references, we need watch out for is callback functions.

var obj = {
    name :"Rifat",
    languages : ["Javascript", "Python", "Java", "Ruby"]
    printLanguages : function() {
        this.languages.forEach(function(item){
            console.log(`${this.name} : ${item}`)
})
    }
};
obj.printLanguages(); // undefined : Javascript, undefined : Python ....

why ?

because “this” in the printLanguages method is “window” object.

How can we solve this problem ?

we use regular function in forEach function , and so regular function’s global function is “window”.

First way :

var obj = {
    name :"Rifat",
    languages : ["Javascript", "Python", "Java", "Ruby"]
    printLanguages : function() {
        let _self = this
        this.languages.forEach(function(item){
            console.log(`${_self.name} : ${item}`)
})
    }
};
obj.printLanguages(); // Rifat : Javascript, Rifat : Python

Second way ,

we can bind this as a callback ;

var obj = {
    name :"Rifat",
    languages : ["Javascript", "Python", "Java", "Ruby"]
    printLanguages : function() {
        this.languages.forEach(function(item){
            console.log(`${this.name} : ${item}`)
}.bind(this))
    }
};
obj.printLanguages(); // Rifat : Javascript, Rifat: Python

In conclusion , JavaScript is about to take over the world. It is therefore very important that the peculiarities of the language be known and avoided.