Understanding the"this” Keyword in JavaScript

#javascript #node #react

The this keyword is a fundamental concept in JavaScript, and also an incredibly confusing one to both new developers and those who have experience in other programming languages. In JavaScript, this is a reference to an object. The object that this refers to can vary, implicitly based on whether it is global, on an object, or in a constructor, and can also vary explicitly based on usage of the Function prototype methods bind, call, and apply.

Here we will cover

this in Global Environment
this inside Functions
this in Methods
this With the Call and Apply Methods
this With the Bind Method
this With the Fat-Arrow Function

1) this in Global Environment

By default, the execution context for any execution is global, which means if we are running any simple function, then this refers to a global object.

"As we know window is the global object in the case of the browser, However, if we are using NodeJS, then a special object global is the global object."

On Browser

function foo () {
        console.log("Simple function call");
    console.log(this === window); 
}

foo();  //prints true on console

When a function is invoked with the new keyword, then the function is known as a constructor function and returns a new instance. In such cases, the value of this refers to a newly created instance.

function foo () {
    console.log("Simple function call");
    console.log(this === window); 
}

const result = new foo(); //prints false on console

Using Node

> this === global
true

2) this inside Functions

function Hero(heroName, realName) {
  this.realName = realName;
  this.heroName = heroName;
}
const superman= Hero("Superman", "Clark Kent");
console.log(superman);

Note that this function is not written in strict mode. Running this code in the node will not get us the value of Superman and Clark Kent as we expected, but it will instead just give us an undefined.

The reason behind this is that since the function is not written in strict mode*, this refers to the global object.

If we run this code in strict mode, we will get an error because JavaScript does not allow us to assign properties realName and "heroName to undefined. This is a good thing because it prevents us from creating global variables.

Lastly, writing the function’s name in uppercase means that we need to call it as a constructor using the new operator. Replace the last two lines of the above code snippet with this:

function Hero(heroName, realName) {
  this.realName = realName;
  this.heroName = heroName;
}
const superman= new Hero("Superman", "Clark Kent");
console.log(superman);

3) this in Methods

const hero = {
  heroName: "Batman",
  dialogue() {
    console.log(`I am ${this.heroName}!`);
  }
};
hero.dialogue();

4) this With the Call and Apply Methods

call and apply are very similar-they invoke a function with a specified this context and optional arguments.

The only difference between call and apply is that call requires the arguments to be passed in one-by-one, and apply takes the arguments as an array.

const book = {
  title: 'Brave New World',
  author: 'Aldous Huxley',
}

function summary() {
  console.log(`${this.title} was written by ${this.author}.`)
}

summary()

Since summary and book have no connection, invoking summary by itself will only print undefined, as its looking for those properties on the global object.

const book = {
  title: 'Brave New World',
  author: 'Aldous Huxley',
}
let title = 'abc';
let author = 'test';
function summary() {
  console.log(`${this.title} was written by ${this.author}.`)
}
summary.call(book);
// or:
summary.apply(book);

summary();

5) this With the Bind Method
The bind method returns a new method with this referring to the first argument passed. We’re going to use the above example to explain the bind method.

function Person(fn, ln) {
    this.first_name = fn;
    this.last_name = ln;

    this.displayName = function() {
        console.log(`Name: ${this.first_name} ${this.last_name}`);
    }
}

let person = new Person("John", "Reed");
person.displayName(); // Prints Name: John Reed
let person2 = new Person("Paul", "Adams");
person2.displayName(); // Prints Name: Paul Adams

let person2Display = person.displayName.bind(person2);  // Creates new function with value of “this” equals to person2 object
person2Display(); // Prints Name: Paul Adams

6) this With the Fat-Arrow Function
unlike Regular functions, the arrow function does not have their own this keyword.

The value of this inside an arrow function remains the same throughout the lifecycle of the function and is always bound to the value of this in the closest non-arrow parent function.