Why You Should Be Careful Using Arrow Functions in JavaScript
The arrow function syntax arrived with the release of ECMAScript 2015, also known as ES6. Today, arrow functions have become the favorite feature of many JavaScript programmers. This love for arrow functions is due to the concise syntax and straightforward behavior of the “this” keyword.
But arrow functions have some disadvantages. Learn about the key differences between arrow functions and regular functions and find out why, in most cases, you’re better off sticking to regular functions.
1. You Must Define an Arrow Function Before Using It
You cannot hoist an arrow function.JavaScript’s default hoisting rulesallow you to call a function before defining it, but that’s not the case with arrow functions. If you have a JavaScript file with functions, this would mean that all the important code will be down at the bottom of the file.
Consider the following JavaScript code for example:
In the above code block, the important code is down at the bottom. The helper functions are all defined before the execution point. Having tocreate your JavaScript functionsat the top of the file can be inconvenient because you’ll have to scroll down to see the actual code that does the work.
If you moved the helper functions to the bottom and the actual code to the top, you’ll get a reference error. The runtime treats the function as a variable. Thus, you must define it first before accessing or invoking it. But if you converted all arrow functions to regular functions (with thefunctionkeyword), then your code would work fine. At the same time, the important code stays at the top where you’re able to locate it.
This is one of the biggest issues with using arrow functions. They don’t exhibit any hosting behavior. In other words, you must define them before the actual place you’d use them. On the other hand, you’re able to hoist regular functions.
2. Arrow Functions Might Be Confusing to Some People
Another reason to use regular functions instead of arrow functions is readability. Regular functions are easier to read because they explicitly use thefunctionkeyword. This keyword identifies that the code in question is a function.
On the other hand, you assign arrow functions to variables. As a newbie, this might confuse you into thinking that the code is a variable, rather than a function.
Compare the two functions below:
At first glance, you can easily tell that the second chunk of code is a function. The syntax makes it clear that the code is a function. However, the first one is ambiguous—you might not easily tell if it’s a variable or a function.
3. You Cannot Use Arrow Functions as Methods
When you use an arrow function, thethiskeyword corresponds to whatever is outside the thing we’re inside. In most cases, it’s the window object.
Consider the following object:
If you run the code, you’ll notice that the browser printsundefinedfor both first name and last name. Since we’re using an arrow function,thiskeyword corresponds to the window object. Also, there is nofirstNameorlastNameproperty defined there.
To solve this issue, you need to use a regular function instead:
This is going to work fine becausethisrefers to thepersonobject. If you’re going to be doing this kind of object-oriented programming a lot, then you’ll need to ensure that you’re using regular functions. Arrow functions will not work.
When to Use Arrow Functions
Use arrow functions mainly in places where you need an anonymous function. An example of such a scenario is dealing with a callback function. It’s better to use an arrow function when writing a callback because the syntax is so much simpler than writing a full function.
Compare these two and decide which is more straightforward:
Both cases pass a callback function to the map() method. But the first callback is an arrow function while the second is a full function. you may see how the first function takes up fewer lines of code than the second function: three vs. five.
The other time to use arrow functions is whenever you want to deal with a particular “this” syntax. The “this” object will change depending on if you’re using regular functions or arrow functions for particular things.
The following code block registers two “click” event listeners on the document object. The first instance uses a regular function as the callback, while the second uses an arrow function. Inside both callbacks, code logs the execution object (this) and the event target:
If you were to run this script, you’ll notice that “this” reference is different for both. For the regular function, this property references the document, which is the same as thee.targetproperty. But for the arrow function, this references the window object.
When you use a regular function as a callback, then this will refer to the element where we trigger the event. But when you use an arrow function, then this keyword defaults to the window object.
Learn More About Arrow Functions vs Regular Functions
There are several other subtle differences between regular functions and arrow functions. Mastering both types of function is foundational to gaining mastery of JavaScript. Learn when to use one and when to use the other; you’ll then understand the implications of using either a regular function or an arrow function in your JavaScript.
There exist additional differences between the two apart from the syntax.
Now, I actually finish the books I start.
When your rival has to bail out your assistant.
You’re not getting the most out of what you pay for iCloud+.
I found my TV was always listening—so I shut it down.
Who asked for these upgrades?
