Demystifying 'this' in JavaScript: A Comprehensive Guide

INTRODUCTION

Welcome to my article on this keyword in JavaScript. If you've ever found 'this' to be a bit perplexing, you're not alone. In this article, we'll demystify this and help you conquer it. So, let's dive in and unravel the mysteries of this in JavaScript.

What is this?

this special keyword refers to the current context or object and its behavior can sometimes be tricky to grasp. It plays a fundamental role in object-oriented programming and is often used in functions and methods.

Don't bother about the meaning of the code below. But just focus on the application of this.

As you saw, in the above example we used this as the reference to our object 'fruits'.

Don't get confused, I have just shown you one of its many use cases. We will understand all these concepts. Stay calm!

Let's start the exciting Journey of conquering this.

Calling function with new

So above is the first category of encounter you can expect to have with this . Believe me, What I will be telling you now is very easy, whenever new is used before calling a function, it creates an empty object. Now, If you refer to the Note I provided and the above knowledge, we can make this flowchart:

Now, we can guess the output. Yes, you are correct, the output will be an empty object.

Calling function freely

Let's repeat the above example, but call the function without new keyword.

Follow the same flowchart for this example. But we can see here, that no calling object is present. Hence, in this case, this will refer to the global this .

In the console, you will get the output as 'window', whereas, in the terminal using Nodejs, the output will be a global object.

I hope till now everything is crystal clear, If not don't worry, you will understand soon! Comment! All your queries.

Remember, coding is a mere game of patience and consistency. The more you practice the more you learn.

Calling function as a method

The most common and interesting usage of this. You will love this one. Now you will get the feel of the example, I showed you at starting.

Now let's follow the flowchart and the Note.

Believe me, It is easy for you now.

See,

this--(looking for calling site)----->getTaste()-------->fruit. Yes, you are right, and it is :

I am sure, a stream of confidence pumped you up. If you cannot guess it right, do not worry, keep practicing and reading.

Let's have some more examples, to test your skills.

Please be careful while answering. It uses all the concepts we have covered till now. Comment your answer.

this in Arrow Functions

this works very differently with arrow functions. Whenever this is inside the arrow function, arrow functions inherit this value from their surrounding lexical context. You will get my point after this example,

I think here it is very much clear. The output will be an empty object.

As said above, arrow functions inherit this value from the surrounding lexical context. But in the above case, there is no surrounding function or method. Hence the answer will be,

Let's look at another example,

This is your homework. Answer in the comment section.

Now, comes the final example, If you can get this one, It means you have conquered this .

Conclusion

1. Arrow functions -----> lexical context ----->callingObject. If no lexical context, this ----> undefined.

2. Functions with new keyword -------> In this case, this -------> empty Object .

3. Methods or Functions -------> this ------->(refers to the object calling function or method).

4. Freely invoked/called function --------->this-------->global object .

I am sure, you have got the feel of this . It may not be necessary, that you understand it completely, but have faith, you will. Read the articles, and blogs, as many times as you can. Refer MDN DOCUMENTATION. We should end it here.

Will meet soon. Happy Coding!