JavaScript Arrow Function Magic
JavaScript has become one of the most widespread programming languages in use today, and rightfully so. Because of it’s near ubiquitousness in web applications, it has afforded the close-eye of a vast majority of the programming community.
As we all know, programmers have F.O.D. (Fear of D.R.Y. (Don’t Repeat Yourself), but do treat yourself to a nested acronym), so the community has worked its incredible magic of logical decision making in the interest of efficiency and precision and turned JavaScript into a labyrinth of shortcuts to make the language more accessible and powerful. Once these shortcuts are understood, the true power of JavaScript syntax can be unlocked and wielded, making you the programmer you were always meant to be. Sort of like the first Kung Fu Panda.
One of the most important syntactical tools every JavaScript programmer needs to have holstered is the Arrow Function. At first glance, Arrow Function syntax looks like another of many ways to just clean up JavaScript code, and that’s not wrong. However, this syntax also comes equipped with built-in functionality that makes it not only easier to read and understand, but also more efficient and easier to implement.
Clean up may not be a first order priority when building a new application, but understanding and harnessing these shortcuts early on can save a lot of time and headaches when combing back through and looking for bugs in initial drafts of an application.
“this” Keyword
From what I understand, the this keyword has been the source of many JavaScriptor’s nightmares for many years past. When defining and calling regular functions in JavaScript, this would bind itself to the window, the function, etc., unexpectedly, and there was no way to explicitly control this behavior in many cases, and in other cases, this would have to be explicitly bound to the context for which it was to be called.
Arrow functions quash this JavaScript behavior in that this is not automatically bound to the function. That means that this will behave the same regardless of the context of being called within the arrow function, so the behavior becomes predictable. Hooray!!
“arguments” Object
When implementing Regular Function syntax, an “arguments” object is available within the context of the function itself:
The “arguments” object is defined for us with an index of keys beginning at 0, pointing to the arguments passed in the function call in the order they were passed.
However, in our arrow function, this object is not automatically assigned:
The arguments object is still attached to the arguments passed in the parent function, dragonWarrior().
In order to bypass this, we must employ the rest parameters feature to our arrow function, at which point our arguments object will be assigned to the arguments passed in our arrow function:
Implicit Return Expression
When using arrow functions, we no longer need to explicitly return the value of our function. We still can, we just don’t hav’ta!
A regular function from which a return value is expected might look something like this:
With the arrow function, no explicit return is needed:
The arrow function syntax is much cleaner and it accomplishes the same work as the regular function with a lot less clutter!
Summary
Arrow functions are amazing JavaScript tools, and the fact that they are so amazing is no coincidence. In a programming language as widespread as JavaScript, these syntactical enhancements don’t go unchecked. You can be assured that the underlying logic of these shortcuts is designed to efficiently solve common issues within the language and make code cleaner and easier to read.
That being said, no solution is perfect, so there are always cases in which these shortcuts may not be the best route. That is why it is so important to get to know the differences between the options provided, so that this can be assessed on a case-by-case basis. If it caused more problems than it solved, it would not be widely accepted and implemented, so we can use these shortcuts with a certain level of confidence as we get to know them. Doing this requires close attention to errors when they do arise, so that the differences can be appreciated in the context of real examples.
The best way to get comfortable with a new syntax is to create examples in the browser’s dev console and see the differences that each syntax produces. As you write new code for an application, try out each syntax in the console and see what results each syntax produces. This will give you more confidence in beginning to implement arrow function syntax into your code, and truly understand why and where each style is best. Before you know it, implementing Arrow Function syntax will be second-nature!
