This is Confusing

Even though the title of this article looks a bit like clickbait, and you might be asking yourself what ‘this’ is referring to, it is actually quite literal. The ‘this’ keyword in JavaScript gives a lot of developers grief and can be confusing to understand at first so let's break it down.

The MDN definition for this is “A property of an execution context (global, function or eval) that is always a reference to an object.” What does this mean? Well, the simplest way to describe this’s behavior is to look at examples in my opinion.

In this first example were looking at a function declared in the global scope. Here this will evaluate to ‘global’ if running in node, or window if running in a browser. The next most common location and maybe the easiest to understand is inside of an object.

Here we see that functionName is declared inside of object and therefore this will return object. From here on out things tend to get a bit trickier and so I want to show some of the things that tend to trip people up.

Here even though our callback function is being called inside of object2 it is still defined and called on the global scope.

This is just the basics and the next place I would go from here is to look at the call(), bind(), and apply() methods as well as what happens to the this keyword with arrow functions.