What is 'This' keyword in JavaScript

In this article, we will learn what is 'this' keyword in javascript.

What is This keyword in javascript?

This keyword refers to an object, that object which is executing the current bit of javascript code. 

In other words, every javascript function while executing has a reference to its current execution context, called this. Execution context means here is how the function is called.

Basically, The javascript this keyword refers to the object it belongs to.

It has different values depending on where it is used:

Global Context

 Alone, this refers to the global object,i.e: The window the object on the web browser

console.log(this);

// Window {window: Window, self: Window, document: document, name: '', location: Location, …}

This in regular functions

In a regular function with a non-strict mode, this refers to the global object.

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

  hello();

// Window {window: Window, self: Window, document: document, name: '', location: Location, …}

The above function will return the windows object in the console.

But, this inside a function in strict mode will give undefined.

"use strict";
  
function hello(){
    console.log(this);
  }

  hello();

// undefined

This in Methods

In a method, this refers to the owner object, in this case, is user object

  const user = {
    name: "jigar",
    language: "English",
    greet: function () {
      console.log(`${this.name} knows ${this.language}`);
    },
  };

Now let’s execute the greet method.

 user.greet();

This prints:

jigar knows English

  When we are calling the greet() method using the user object, so the this keyword inside the method refers to the user object.  

This in Arrow functions

The Arrow function does not create its own execution context, it inherits the value of this from the outer function

So, If you try to access this in arrow function then it searches for the outer function and picks the value of this, if there is no outer function then this will be window object.

const arrowFunction=()=>{
    console.log(this);
}
arrowFunction();
// Window {window: Window, self: Window, document: document, name: '', location: Location, …}

In the above example, it checks for outer function, and as there is no outer function, so it will be a window object.

const user = {
    name: "jigar",
    language: "English",
    getName:()=>{
        console.log(this);//Window
        console.log(this.name); // undefined
    }  
  };

user.getName();

Since there is no outer function, it will be a window object as well.

const user = {
    name: "jigar",
    language: "English",
    getName:function(){
        return ()=>{
            console.log(this);
        }
    }  
  };

user.getName()();

// {name: 'jigar', language: 'English', getName: ƒ}

In the above example, it tries to check with the outer function and it finds getName and inherits this value of the getName function.