WTF is “this” is JavaScript? – Rajat Jain – Medium

WTF is “this” is JavaScript?

Ever since I started learning and coding in JavaScript, the one thing that has always puzzled me and messed with my head was the this keyword. It gave me nightmares when I started learning React. It took me quite a while to understand and actually grasp the concepts of this and in this article, I have tried to impart my learnings and notes to all the fellow JavaScript devs out there. Sit tight and thank me later 🌝

P.S : the keyword this has been used in bold and italic format (everywhere apart from code) to avoid confusion (this).

Before starting to learn about what this keyword is, firstly let us understand why JavaScript has a this keyword in first place.

this keyword allows us to reuse functions with different contexts, or in other words, it allows us to decide which object should be focal while invoking a function or a method.

Imagine we have one function and we have a bunch of objects with similar properties, we want that function to work throughout all of our objects. So in this blog, we are going to break down the this keyword in four rules:

  • Implicit Binding
  • Explicit Binding
  • new Binding
  • window Binding

The first thing you need to ask yourself whenever you are trying to figure out what the this keyword is, is this question :

Where is the damn function invoked?

Whenever you are trying to figure out what the this keyword is, you have to look at the when the function was invoked.

var sayName = function(name) {
console.log("Hello " + name);
}

If I were to ask you what this function is doing, or more specifically, what is the name the function is going to console.log, you can’t say it until the function is invoked.

sayName('Rajat')

This is the exact same idea with this keyword, you can’t know the meaning of it unless it is invoked.

Now let’s look at all the rules one by one:

  1. Implicit Binding : It is the most common rule and it is found in almost about 80% of the usecases when you are trying to figure out what the this keyword is
var me = {
name: 'Rajat',
age: 23,
sayName: function() {
console.log(this.name);
}
};
me.sayName();

Now the question is trying to figure out what does the underlined this keyword in the above code reference?

Well, implicit binding says that when a function is invoked, look to the left of the dot(.), that is what this keyword is gonna reference. So, here the log value will be ‘Rajat’.

var sayNameMixin = function(obj) {
obj.sayName= function() {
console.log(this.name);
}
} ;
var me = {
name: 'Rajat',
age: 23
};
var you = {
name: 'Subham',
age: 22
};
sayNameMixin(me);
sayNameMixin(you);
me.sayName(); //-> Rajat
you.sayName(); //-> Subham

Because, the one in the left of dot is what the this keyword references.
Let’s see another example.

var Person = function(name, age) {
return {
name: name,
age: age,
sayName: function() {
console.log(this.name);
}
}
};
var aman = Person('Aman', 23);
aman.sayName(); //->Aman

But what if we made this a bit more complex.

var Person = function(name, age) {
return {
name: name,
age: age,
sayName: function() {
console.log(this.name);
},
mother: {
name: 'Mom'
sayName: function() {
console.log(this.name);
}
}
};
};
var aman = Person('Aman', 23);
aman.sayName(); //->Aman
aman.mother.sayName() //->Mom

What is on the left of dot => mother
Does mother have a name property => Yes
So, this here will reference the name property of mother.

So, to sum it up, whenever you need to figure out what the this keyword is, look at the left of the dot where the function is invoked. If there is something, that is where the this keyword references to.

Advertisements