"this" Keyword in Arrow Functions

Introduction

The this keyword in JavaScript refers to an object. The object that is referred to by the this carries the currently running program. Hence this refers to the object performing the currently executing function. When a regular function is being referred to, this refers to the global object. this refers to the object itself if the function being referenced is a method in an object. The way this is used or called determines which object is referenced.

One of the most frequently used keywords in JavaScript is the this keyword. It could appear difficult at first, but as soon as you start using the this keyword everything will make clear.

Depending on how it is used, the this keyword can be used to refer to a variety of objects :

• Thethis refers to the object in object methods.
• This alone denotes the global object.
• The global object is referred to by the this in a function.
• In a function, this is undefined in strict mode.
• In the case of an event, the element that received the event is referred to as this.
• call(), apply(), and bind() methods can all refer to any object using this.

Default Use of ‘this’ Arrow function

When compared to regular functions, arrow functions handle this differently. In other words, there is no binding of this with arrow functions. In regular functions, the object that is called the function was represented by the this keyword. This object could be a window, document, button, or anything else in case of regular functions.

this is based on the enclosing lexical scope for arrow functions. In arrow functions, the standard variable lookup is used. They go on to the enclosing scope if they are unable to identify it in the current scope. As a result, rather than binding their own this, the arrow functions inherit the "this" from the parent scope. This process is called lexical scoping. Consequently, arrow functions are great in some circumstances but awful in others.

Example of Default Use of ‘this’

Let us take a look at an example involving the arrow function and the this keyword :

In the above code, an arrow function has been created that prints the value of the this keyword. The function is then called. On running the above in the browser console, you will get the following output :

Explanation of the Output

You can verify that the output of the above code is the window object by running the below code.

The output will be the same this time as we are simply getting the window object. Let us now understand why we got the window object as the output for the above code involving the use of the this keyword in an arrow function.

If you try to do the operation with a normal function, you will still get a window or global object. Same outcome, but not for the same reason. As opposed to arrow functions, the normal functions have their scope bound by default to the global one. The arrow functions, on the other hand, do not have their own this but instead inherit it from the parent scope.

Let us now try out what will happen if we use the strict mode.

In the above code, the strict mode has been used and then the arrow function is used with the this keyword. On running it you will get the following output :

There are no changes in the output because the rules of lexical this take precedence over strict-mode this rules.

Use of ‘this’ in Arrow Function Methods

A regular function will always define its this value. The this keyword is handled differently by arrow functions. Since it lacks a context of its own, they are unable to define its own. Anytime you call this, they take the value of this from the parent scope.

this always refers to the context of the function being called in a regular function. The caller of the function is unrelated to this in the arrow function, though. It refers to the scope (the enclosing context) in which the function is present. Because of this, whenever we attempt to access the value of a property of an object from an arrow function method, we receive the value as undefined. This is because this will be referring to the global variable.

The following object has an arrow function as its method.

The arrow function will log the value of this on calling it as shown below :

The output will be the window object as this will refer to the global object.

Example of ‘this’ in Arrow Function Methods

Let us take an example involving an object with an arrow function.

Example

Now call the function in the following way :

You can also use the below code to call the function :

In both of the ways the output will remain the same, that is the global or window object. This is because unlike normal functions in arrow functions the value of this does not depend on the way a function is called.

Additionally, arrow functions inherit their scope from the parent function, in this case, the window or the global object, rather than binding the function themselves.

Now let us make a small change in the code :

We need to call myObject.sayName() to initialize myObject.myArrowFunction and then you can call the myObject.myArrowFunction .

You can call the function in the following way also :

In both of the above ways the output will be :

When we call the myObject.myMethod() function, we initialize the myObject.myArrowFunction with an arrow function which is inside of the method myMethod, so it will inherit the scope of the myMethod function.

Use of 'this' in API Calls

The arrow functions are a good option to choose in the case of making API calls especially when closures are used.

Example - 1 :

This is the ideal scenario where we ask for something to be done in an async manner, we wait for the response before taking any further action, and we don't have to worry about the scope of the request.

In the above code the helperObject is some instance that will help in making requests like axios. The this in the above code will refer to myObject.

If we extract the callback function in the above code to make it reusable as shown in the below code :

Remember, no matter how we try to bind the scope, it won't work, so doing so would mean breaking the currently functional code. Therefore, if you choose to do so, you must manually bind the scope and use standard functions.

Example - 2

Explanation :

Now the above code will work as the value of this will depend on the way the reusable component is called.

Dive into the world of server-side JavaScript with our Free Node JS certification course. Enroll today and become a proficient backend developer!