Javascript Fundamentals: this keyword

Understanding the fundamentals of this keyword.

Photo by Alessio Cesario from Pexels

This is probably the scariest word in Javascript. It took time for me to get it. Some people hate it and try to avoid using it at all costs in their code because it creates so much confusion.

But let's find out what this is.
this is the object that the function is a property of.
So: obj.xFunc(this). this here refers to the obj that the function is a property of.

Let's have an example:

here this refers to the window object

Remember, initially this gets set in our execution context as window.

When the global execution context starts, during the creation phase, we create the global object and this. At this stage, they equal each other.

Let's see more examples:

Here we see that this ===window object because as we remember the definition: this is the object that the function is a property of. This means we are calling window.a() and running it.

Here the function is the property of the window object

But ideally, we never want this to refer to the global object. But this happens all the time. And one of the pitfalls of this is that we will have it refer to the window object when it should refer to something else.

Use strict was added to the language so that we can avoid the common mistakes that can happen with the language. When the language was originally designed, it wasn't perfect, there were mistakes. And use strict allows us to avoid things such as a situation in our first example where this refers to the window object.

use strict can be added at the beginning — the first line of a function or the beginning of our script.

Now in our global execution context, we get this out of the box. Also when we create a new function we get this as well. But what's the point then if most of the time we don't even care that this points to the global object. Why did they include this in the language?

Let's have an example where this becomes useful and the reason this keyword was created.

Now suppose here we want the function to return the song with the name, for example, lalala billy.

So inside of an object, how can we access the property so that this sing function can sing Billy’s name? This is where we can use this keyword.

We can simply say:

And here this is the obj that the sing function is a property of.

So that if we run obj.sing()

And even if I change Billy to Anna, it will still give the correct sing function.

There is an easy way to think about this. this is whatever is on the left of the dot. With an object, we access properties and methods(functions) of an object with dot notation.

When it comes to this, we are simply asking whats to the left of the dot function?

Let's use another function singAgain() that adds an exclamation mark to our song.

Here you can see that we could have just copied the code from the sing function and just add an exclamation mark. ‘la lala’ + !;

But instead, we are using this to call the sing function and just add an exclamation mark so we can avoid repeating ourselves.

Here are the two main benefits of the this keyword.

1. It gives methods access to their object.
   Our function sing, for example, has access to the obj so that it can use properties and methods within obj.
2. We can execute the same code for multiple objects.

one function for multiple objects

We have written a function once and multiple objects can use it. Object1 has an importantPerson and object2 has an importantPerson as well.

And if I change the code only in the importantPerson function, both of them are going to get the changes.

But let's see what happens

To review:
this is usually determined by asking: execution context, what called me? Who runs me as a function? The this keyword works as a placeholder and will refer to any object that called that method.