Mastering the 'this' Keyword in JavaScript

The this keyword in JavaScript can be quite tricky if not understood. It's one of those things that even experienced developers find hard to easily grasp but once you do, it can save you alot of time.

In this article, we will see what it is, how it works in different situations and common mistakes you shouldn't fall into when using it.

Understanding this in JavaScript

this simply refers to the object that's currently being used in a javascript code. But here’s the tricky part: what this refers to can also change depending on where and how you use it in your code. one might ask "why is that?" Well, this is dynamic in nature =, meaning that - its value is determined when a function is called, not when it's written.

this in Global and Function Contexts

When you use this in a global context, it often refers to a global object, which quite makes sense right? So, if you just type this in your browser’s console, it’ll point to the window.

While when used inside a function, it behaves quite differently. For example: if you call a function "myFunction" for instance, this will still point to the global object but if you use the strict mode in Javascript, it will make it undefined inside that function.

Yeah, I know it's quite confusing, just follow along. I will explain better.

this in Objects

When you use this inside a method (a function that’s a property of an object), this refers to the object that the method belongs to.

Example:

const myObject = {
    name: 'Alice',
    greet: function() {
        console.log(this.name);
    }
};

myObject.greet(); // Output: 'Alice'

Here, this.name refers to myObject.name, which is 'Alice'.

this in Constructors and Classes

Constructors: When you create an object using a constructor function or a class, this refers to the new object being created.

Example:

function Person(name) {
    this.name = name;
}

const person1 = new Person('Bob');
console.log(person1.name); // Output: 'Bob'

In the code, this.name refers to the name property of the new Person object.

Common Mistakes and How to Avoid Them

One common mistake with this is losing its correct value in callbacks or event handlers. For instance, if you pass a method from an object as a callback, this might not refer to the object anymore.

Solution: To avoid this, you can use an arrow function or bind to keep this pointing to the right object.

const myObject = {
    name: 'Eve',
    greet: function() {
        setTimeout(() => {
            console.log(this.name);
        }, 1000);
    }
};

myObject.greet(); // Output: 'Eve'

Conclusion

The this keyword can be a pain in the ass, but all you have to take note is that it changes depending on how and where you choose to call it. To get better at it, use it to practice with loads of examples, and with no time, you will become a pro with it.