DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Understanding the"this” Keyword in JavaScript
vandna kapoor
vandna kapoor

Posted on

Understanding the"this” Keyword in JavaScript

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

Alt Text

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

Alt Text

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);

Alt Text

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);

Alt Text

3) this in Methods

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

Alt Text
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()

Alt Text

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();

Alt Text

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

Alt Text

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.



Alt Text

Top comments (1)

Collapse
mhenrixon profile image
Mikael Henriksson

Thank you! ❀️

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.