The Mysterious "this" Variable

Hi there, coding community!

Let's explore the amazing world of JavaScript today, taking a look at some of its lesser-known mysteries as we work our way from the fundamentals.

Although an empty file may look like the shortest JavaScript program, the JavaScript engine is actually actively working there, so grab your coding caps and go to work.

The Global Execution Context (GEC) - Behind the Scenes

When you run any JavaScript code, a Global Execution Context is created. This execution context is like the backstage manager, ensuring everything runs smoothly. It includes a memory space to store variables and functions, as well as the all-important execution context.

One key player in this scenario is the Window object, created by the JavaScript engine when the global execution context comes to life. Each browser has its own JavaScript engine, and they all contribute to the creation of this mystical Window object.

The Mysterious "this" Variable

Now, let's talk about the enigmatic "this" variable. Whenever an execution context is born, so is its accompanying "this" variable. Yes, that's true even for functional execution contexts! At the global level, "this" points to the global object, which is the Window object in the case of browsers.

this === window // true

This line of code might look like a simple equality check, but it unveils the connection between "this" and the global object. It's like JavaScript's way of saying, "Hey, I know where I am, and it's the global space!"

The Global Space and Its Denizens

Anything outside a function is part of the global space. This is where variables and functions reside, waiting to be summoned into action. Here's a nugget of wisdom: whatever you create in the global space gets attached to the global object, again, usually the window object.

So, how do we access the treasures of the global space? Fear not, for JavaScript provides multiple paths:

var a = 10;
console.log(window.a);   // Accessing via the window object
console.log(a);          // Accessing directly
console.log(this.a);     // Another way to access

In this example, we've declared a variable a in the global space. Notice how we can access it in three different ways. Whether you prefer the window object or the straightforward approach, JavaScript gives you options.

The Twist of 'this' in Event Handlers

Events in JavaScript, such as button clicks or keyboard interactions, introduce another layer of complexity to the "this" variable. In event handlers, "this" often refers to the element that triggered the event, rather than the global object.

<button id="myButton">Click me</button>

<script>
    document.getElementById("myButton").addEventListener("click", function() {
        console.log(this); // Outputs the button element
    });
</script>

In this example, the "this" variable within the event handler points to the button element. This dynamic behaviour is crucial to handling events in a flexible and context-aware manner.

Now that you know this, you can deal with JavaScript's peculiarities more easily.

Thank you!