What is “this”? Arrow functions.

JavaScript

If you ever programmed in another Object Oriented language, this” keyword in JavaScript might be very confusing for you. Bear with me, I will show you some Java code.

Here, the “this” keyword is a reference to the current object, so calling

in the constructor will assign a value to the x property of an instance of Point class. This is how “this” works in languages like Java or C++. It is not entirely true when it comes to JavaScript, though.

The way of handling “this”

In JavaScript, “this” is a reference dependant on a call-site of a function (location where a function was called in). In the global context of the browser (outside of any function), “this” is a reference to the window object. It will be undefined, though, if you’re in strict mode.

If you wonder how does this object initialization work, it is a feature from ES6 and it works the same as the following:

Pretty neat, isn’t it?

As you can see, if getThis is a method of the component and it is called from the componentthis now refers to it. The context in which you declare it does not matter. You can still change the context of the component.getThis method though:

You can execute a call method on any function. The first argument it takes is a context of your choosing, then the arguments that you would like to pass for it. There is a very similar method called apply and it works almost the same, but it takes an array of arguments instead of a list.

Let’s consider a simple example:

The confusing part here could be the getThat function: it returns window, even though getThis is called inside of a method of the component.

This is caused by the fact, that what getThat simply does is:

It happens because declaring a named function or declaring a var globally saves the reference to them in the window.

Let’s imagine a more complex situation with some classes involved:

Whoa, what happened? You might think for a moment that it would update the state when the modal opens.

There is a catch, though!  The reference that “this” leads to in onOpen method changed and it now refers to modal itself, not the component. There are a few options:

In this piece of code, we save the reference that “this” leads to, therefore we can use it later. That is not really readable, isn’t it?

A little better! Calling bind on a function creates a new function with “this” set to the value provided as an argument.

Arrow functions

The situation described above can be resolved in a more elegant way.

This is a working solution because arrow function does not have its own “this” and it will use the same reference that “this” led to while the arrow function was declared.

That’s not all when it comes to the arrow functions, as they simplify more stuff.

These two work in the same way. If you do not use square brackets in the body of your arrow function, it will just return the value that is a result of the given expression. Just note that if you want to provide more than one argument, you need to wrap them in the round brackets.

Final notes

JavaScript runs not only in the browser though! The rule of “this” leading to a window can’t apply here. There is an object called global, which is a top-level scope. Using strict mode won’t delete this reference.

Writing your code in a way that won’t leave a doubt about what does “this” refers to is definitely a good practice, but we can’t escape from the need for understanding how it works. Without this knowledge, we are seriously handicapped and it can result in many situations in which the lack of it can be very confusing.

Leave a Reply

Your email address will not be published. Required fields are marked *