this keyword in javascript

Table of contents

“this” keyword simple example

Let’s take a simple example to understand how this keyword works in javascript.

console.log(this);

What do you think would be output of the above code?

• if you write this code inside browser, it would give you Window object.
• if you write this code inside nodejs application, it would give you Node object.

Now let’s add one line to this code.

"use strict";
console.log(this);

• Now this keyword values will be undefined if we use it in browser.
• and If we use this keyword in NodeJs with strict mode, value will be {}.

This keyword inside normal function

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

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

• without strict mode this keyword value will be either Node object or Window object.
• with strict mode this keyword value will be undefined

when we use function call, remember this would be either undefined or window/node object

This keyword inside object

const test = {
  name: "Prem",
  getName: function () {
    console.log(this);
  },
};

test.getName();

• Inside object this keyword always attach it self to object.
• In above example this keyword will be test object
• for that reason you can get value this.name will be “Prem”

Creating functions inside objects are called methods. And whenever we call object.methodName(), this value will be object itself.

Examples

const test = {
  name: "Prem",
  getName: function () {
    console.log(this); // what will be output of this keyword
    function myName() {
      console.log(this); // what will be output of this keyword
    }
    myName();
  },
};
test.getName();

can you guess what will be the output of this keyword in above code?

• first test.getName() will be called
• test.getName() is method call. when we call method on an object, this keyword value will be object.
• here inside getName, this value will be test object
• after that myName() is being called from inside getName function
• but it should not matter where function is being called.
• In function calling this value will be either Node/Window or undefined.

always remember, it doesn’t matter where this keyword is placed. How function are called is matter.

call, apply and bind and how these methods changes the values of this keyword.

call and apply

Let’s take the above example only. if you take a closure look into myName function. this value inside that function is either node/window or undefined. But what if we want to get name value when we use this.name. This is where we can use call and apply methods.

const test = {
  name: "Prem",
  getName: function () {
    console.log(this.name); // "Prem"
    function myName() {
      console.log(this.name); // "Prem"
    }
    myName.call(this); // myName.apply(this)
  },
};
test.getName();

• As you know “this” keyword value is test object inside getName function.
• now we are using this value as argument in function call using call method.
• so now inside myName function this keyword value becomes test object.

whenever we call any function using call, apply and bind, two things happens

• pass first argument as object. it can be any object. it can this keyword as well.
• whatever you pass in first argument. this keyword becomes that value

Let’s take an example and understand.

const test = {
  name: "Prem",
  getName: function () {
    return this.name;
  },
};

const test1 = {
  name: "Divye",
};

test1 object doesn’t have any methods on it. But what if we want to use getName method to get test1’s value ?

const res1 = test.getName(); // "Prem"
const res2 = test.getName.call(test1); // "Divye"
const res2 = test.getName.apply(test1); // "Divye"

There is only one difference between call and apply

• call takes multiple arguments after first argument
• apply takes array of arguments after first argument

Bind

bind works exactly similar to how call and apply works. you can use call and apply whenever you want to get result by directly calling. But Bind returns function and after calling that function you get the value.

const res = test.getName.bind(test1);
res(); // "Divye"

Arrow function and this keyword

if we have a this keyword inside arrow function, this keyword takes value from outer scope of the function. Now let’s take an example

function test() {
  // this -> whatever this value be here, it will be inside the arrow function
  const arrowFunc = () => {
    console.log(this); // either undefined or window/Node object
  };
  arrowFunc();
}
test();

const test1 = {
  name: "Prem",
  getName: function () {
    console.log(this.name); // "Prem"
    const myName = () => {
      console.log(this.name); // if this.name is Prem in parent scope, it will be similar inside arrow function
    };
    myName();
  },
};
test1.getName();

class and this keyword

Let’s understand this keyword value when we use class in javascript.

class Animal {
  constructor(name) {
    this.name = name;
  }

  getName() {
    return this.name;
  }
}

const animal = new Animal("Dog");
console.log(animal);

When we use new keyword to create new object this becomes instance of that object.