For someone who starts learning JavaScript as their first coding language, understanding the this keyword is one of the big challenges to be encountered. It took me quite a while to fully assimilate the different use cases of this JavaScript concept. It is one of those core aspects such as scope, closures and hoisting that need a lot of drilling and practice until they sink in for good.

After reading documentation from different sources and following a few tutorials online, I got to understand when and how to use it. Although practice is what made it stick in.

And now let's get into the meat. The this keyword behaves somehow as an object pointer. It points at different things based on where it is called. Unless otherwise specified, this will always point to its parent object. By default, this parent object is the window object, which contains the DOM document. Window is the global object in the browser. However, it is important to note here, that if we run the same function in the terminal using Node.js, i.e the backend JavaScript run-time environment, the default value of this is global object since we are no longer in the browser.

In the following lines I will divide this core javascript concept in four different use cases.

Case 1: When used in combination with bind, apply, and call

When used with the javascript native methods bind, apply or call, the value of this is set explicitly, and it always behaves the same, giving us full control over what we assign as this. That being said, there are several differences between these three methods. And I will explain them in the lines that follow. But what the three of them have in common is that they change the value of this to something else.

Used with bind

bind is a method on functions by default, and so are apply and call. bind returns a copy of the function it's called on, where this is set to the first argument passed into bind.

In the next section we will tackle apply and call, but for now let’s test how this works with bind. First of all, let’s write a simple function that prints out the default value of this. Go to your favourite browser open the developer tools, and open the console to write the function:

function whatIsThis() {
	console.log(this)
}

We are now going to use this function with bind in order to change the default value of this into something of our choice. We will declare a variable, and we will assign to this variable the returned function that results from binding this to the object that we pass as an argument of bind. You can now call the new function. What do you get as an output? What is the new value of this?

var explicitlySetTheValueOfThis = whatIsThis.bind({
	name: 'Barcelona'
});
explicitlySetTheValueOfThis();

bind vs apply and call:

apply and call change the value of this inside the function, just like bind does. The big difference though, is that they also run the new function immediately. As we saw, bind just returns a copy of the function, and then you have to run the new function as a second step.

Something important to note here is that a function returned from bind cannot be bound to a different this value ever again.

apply vs call:

If the function where we use apply and call has no arguments other than the first one -where we pass in the new value of this, then both methods will behave alike. However, if the function where we use apply and call has arguments, apply and call will behave differently.