A Guide for "this" keyword in JavaScript

The this Keyword is a difficult JavaScript concept to grasp. However, becoming a great developer necessitates understanding concepts like the keyword. It is a common concept in any JavaScript code hence a must comprehend term. Simply put, this keyword refers to the object where it belongs. It is also defined as a property of an execution content, which is usually a reference to an object when not in strict mode. The keyword is majorly used in the Object Oriented programming context. Here is an example to understand it better;

let studentDetails = {
    firstName: "James",
    lastName: "Kyle",
    gender: "Male",
    age: 22,
    salute: function () {
      return (
        "Hello, I am " +
        this.firstName +
        " " +
        this.lastName +
        ", a student with passion in programming"
      )
    },
  }
  console.log(studentDetails.salute())

In the example, a StudentDetails object exists which has four properties and a salute method. When the salute method of the StudentDetails is called, the console.log will output;

Hello, I am James Kyle, a student with passion in programming

How did 'this.firstName' and 'this.lastName' convert to James and Kyle correspondingly?

To get the answer, we reference the definition of this keyword. Earlier, it was said that it refers to an object where it belongs. So from the above example, this refers to the studentDetails object, which owns the salute() method. The dot (.) operator is used to access members of an object as defined by this keyword. The dot (.) operator is being used in the console.log () to access/call the salute method. Note that you may use the dot(.) operator to access the properties method of the salute object like age and gender.

Situations in which the 'this' keyword can be used

Depending on how this keyword is called during execution, it can refer to many things. This makes the definition of this as the property of an execution context precise. Let’s dig further.

.this in the method of an object

To begin with, a method is used to denote a function that is a member of an object. All methods act as functions, but not every function can be a method. So, when this keyword is used inside a method, it refers to the holder of the method where it is used. Here is an example;

salute : function() {
return “Hello, I am " + this.firstName +" " + this.lastName +", a student with passion in programming"
  }

In the example above, this used inside the salute() method refers to the StudentDetail object, which owns the salute() method.

.this in the Global Context)

When used alone, not inside any function, and hence defined as being in the global context, this keyword refers to the global object. The global object refers to one which owns this keyword in this context.

.this in a function

Take note that we refer to this keyword when it is being used in a function, and not affiliated with any object. Here, the function is standalone. In such a JavaScript object, the default value of this is the holder of the function. If the code is not set to strict mode and has not been set to a member of an object, then "this: defaults to the global object.

function myFunction() {
return this;
}
myFunction() === window

From the illustration, this keyword value as used inside myFunction refers to the window object. This is the reason why the result of the string comparison between myFunction and the window object will output true since they hold the same value.

.this in a function (Strict Mode)

When used in strict mode, JavaScript does not allow default binding and this makes it undefined. The strict mode blocks sloppy code in programming. There is no concrete reason to want access to the value of this in a function because it will output the window object. Programmers majorly access this keyword since they wish to get some properties from the owner. Therefore strict mode enforces this, which makes this keyword undefined.

"use strict"
function  myFunction1() {
return this
}
myFunction1 () === window

As can be seen in the above example, in the strict mode, the value of this inside a function is undefined.

From the example above, in strict mode, the value of this inside a function is undefined.