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".
"Happy coding"❤️
Top comments (0)