Basics of this keyword in description

Hi there! This blog covers the basics that you need to know about the "this" keyword in Javascript. The "this" keyword in Javascript has different references at different places. We will see them one by one here

Global context

In the global context, "this" keyword points to the global object which is the window object. We can infer that from the below code snippet.

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

Inside a function

The value of “this” keyword inside a function changes based on how the function is called.

Simple function invocation

In a non-strict mode, the this keyword inside a function points to the window object when the function is invoked using the parentheses ()

function fun () {
    console.log(this); // Window {window: Window, self: Window,             document: document, name: '', location: Location, …} 
}

fun();

In a strict mode, the this keyword inside a function is undefined

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

fun() ;

Function invocation with the call, apply and bind methods

Call, apply and bind methods are used to change the context of this keyword inside the function. When a function is invoked with the call, apply or bind method, this keyword points to the argument passed in these methods. Let's see this with an example

const obj = {
    firstName: "John",
    lastName: "Doe"
};

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

fun.call(obj); // { firstName: "John", lastName: "Doe" }
fun.apply(obj); // { firstName: "John", lastName: "Doe" }
const boundFunction = fun.bind(obj);
boundFunction(); // { firstName: "John", lastName: "Doe" }

From the above code snippet, when the object obj is passed as an argument to the call, bind or apply methods, this keyword inside the function points to the obj passed as an argument
When no argument is passed in call, apply or bind methods, this keyword defaults to the window object.

const obj = {
    firstName: "John",
    lastName: "Doe"
};

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

fun.call(); // Window {window: Window, self: Window,             document: document, name: '', location: Location, …}
fun.apply(); // Window {window: Window, self: Window,             document: document, name: '', location: Location, …}
const boundFunction = fun.bind();
boundFunction(); // Window {window: Window, self: Window,             document: document, name: '', location: Location, …}

Function invocation with new operator

When the function is invoked with the new operator, this keyword points to an empty object {}.

function Car() {
    console.log(this); // {}
}

new Car();

When the function is called with the new operator, the function acts as a constructor. We can bind the keys to the empty object as below

function Car(brand) {
    console.log(this); // {}
    this.brand = brand;
    console.log(this); // { brand: "Honda" }
    console.log(this.brand); // "Honda"
}

new Car("Honda");

"this" keyword inside a method

First things first, what is a method? Functions inside an object are called methods and they can be accessed using dot notation.

const fruit = {
    name: "apple",
    getName: function() {
        console.log("");
    }
};

Here, getName is a method. The "this" keyword inside a method points to the object itself.

const fruit = {
    name: "apple",
    getName: function() {
        console.log(this); // { name: 'apple', getName: [Function: getName] }
        console.log(this.name); // apple
    }
};

fruit.getName();

Let's consider the below code snippet,

const fruit = {
    name: "apple",
    getName: function() {
        console.log(this); // { name: 'carrot' }
        console.log(this.name); // carrot
    }
};

const vegetable = {
    name: "carrot"
}

fruit.getName.call(vegetable);

In the above example, the object vegetable doesn't have its own method getName , but we can call the getName method of the fruit object by using the call method. In this case, this keyword inside the getName method points to the vegetable object.

"this" keyword in the arrow function

The value of this keyword inside an arrow function differs from that of a normal function. The "this" keyword inside an arrow function has the parent scope I.e., it points to the value of its parent “this” or in the scope where the arrow function lies. We can understand this by the following code snippet

const fruit = {
    name: "apple",
    getName: () => {
        console.log(this); // window object
    }
};

fruit.getName()

Here, the method getName is an arrow function and the this inside the method points to its parent's (global context) this keyword.

This is because the arrow function doesn't have a context to this. It will check if the parent has a context to this and the this inside the arrow function will have the context of this of the parent scope.

function outerFunction () {
    console.log(this) // { name: "John" }
    const innerFunction = () => {
        console.log(this) // { name: "John" }
    }
    innerFunction();
}

const obj = {
    name: "John"
}

outerFunction.call(obj);

The this of the innerFunction(arrow function) has the value of the this of the outerFunction(a simple function)

Here we come to the end of the blog, Hope this article helps you understand the "this" keyword in Javascript!

SruthiCodes