"this" in javascript

For many Developers "this" keyword has been a nightmare as the usage of "this" sometimes leads to unknown bug.

In this article we will explore what "this" keyword is.

First, let's review what javascript objects are for the sake of better understanding.

Object

*** Object is a collection of key: value pairs and more complex entities (methods, nested objects).

syntax

const person = {
   firstName:"John", // firstname = KEY , John = value
   lastName:"Doe"
}

Objects with complex entities

const person = {
   firstName:"John", // firstname = KEY , John = value
   lastName:"Doe",
   autoIntro:function(){
             console.log("Hello nice to meet you!!")}
}

In the above code

• firstName also known as property of an object.
• autoIntro is a method of an object.

To access property and method

person.firstName // John
person.autoIntro() // Hello nice to meet you!!

Let's take a case here !!

What if we make our intro more dynamic
like this Hello myself John Doe, nice to meet you!!.

we can achieve this with "this".

const person = {
firstName:"John", // firstname = KEY , John = value
lastName:"Doe",
autoIntro:function(){
console.log(`Hello ${this.firstName} ${this.lastName},nice to meet you!!`)
}
}

person.autoIntro() will generate our desired output.

Explanation

this always refers to the object "Before dot".

person.autoIntro()
Here this refers to the person object before dot .

so when we use this in method body it actually referring to the person object.

this.firstName == person.lastName

this value always evaluated at run-time depending upon the context.

let userOne = { name: "John" };
let userTwo = { name: "Max" };

function sayHi() {
  alert( this.name );
}

// use the same function in two objects
userOne.f = sayHi;
userTwo.f = sayHi;

// these calls have different this
// "this" inside the function is the object "before the dot"
userOne.f(); // John  (this == userOne)
userTwo.f(); // Max  (this == userTwo)

this in arrow function

In arrow function, this keyword has no value .
"this" keyword always refer to the outer scope.

For example :

let user = {
 name:"john",
sayhi:function(){
  let sayName = ()=>{
  console.log(this.name) // this == user
}
sayName();
}
}
user.sayhi(); // john

In the above code, "this" keyword refers to the outer scope function sayhi.

lets change sayhi to arrow function and remove inner function.

let user = {
  name: "john",
  sayhi:()=> {  
      console.log(this.name); // this == undefined
  }
};
user.sayhi(); // error Cannot read property 'name' of undefined

so here "this" is undefined because as we know in arrow function this has no value.

Moreover, there's lot more about "this".

This keyword

"Happy coding"❤️