The humble function has existed in JavaScript since the start. But despite its wonderfully simple and near-impossible-to-screw-up design, it is often replaced in newer libraries and frameworks by something else: the arrow function.
Arrow functions are a simple, compact form of function that are better suited for situations where writing less lines are important, and a low character count is vital. My number one example for such cases are for array functions, but we'll come back to that.
To start with, here's a traditional JavaScript function. It takes a parameter, and says hi to said parameter:
Now, converting a traditional function to an arrow function is pretty straightforward, but one trick for making it even easier, is to first change your traditional function to a variable function, like so:
Next, we simply take away the function keyword, add an arrow (which is simply an equals symbol and a right chevron: =>) after the parameter(s), and we have an arrow function:
Yes really, it's that simple. Not particularly useful at this point, but simple.
Now let's start to cut things down a bit. First off, we can shorten the body of the function dramatically by removing the braces (note: this is possible only if your arrow function contains a single statement, as otherwise the end of your arrow function is ambiguous):
You can even trim off a couple more characters if you only have a single parameter, by removing its surrounding parenthesis:
However, I strongly discourage doing this. If you use multiple parameters, or if you have no parameters at all, parenthesis will be required, such as in the following two examples:
So my personal preference (and the one enforced by many code formatting tools like Prettier) is to always use parenthesis. Consistency is key in coding.
Now that you have a grasp of arrow functions, you might be thinking to yourself, "Well great, but where would I want to use one?". The answer to that is: lots of places! But I'll highlight one important one: array functions.
As you're no doubt aware, JavaScript has an assortment of array functions. Some sort, some chop, some add, and some analyse the contents of an array, amongst other things. One thing that is common with these functions though, is that they often take a function as a parameter. Here's an example that takes an array of objects, and sorts them by a parameter:
A little clunky right? Well, let's cut things down a little by defining the function inside of the sort:
Better, but not yet perfect. Let's convert things to an arrow function (note: we're omitting a return keyword here, which is totally fine here as the return value is obvious, but not with bigger arrow functions where the returned value is ambiguous, such as when multiple statements are carried out):
Perfect! It's concise, readable, efficient, all the things we're looking for when doing CPU intensive things like sorting large arrays.
Now, it's worth noting that this is a very simplistic example. The real benefit of arrow functions comes when dealing with bigger, more complex use cases, where a small reduction in character count can have a massive impact both on readability and on performance.
I'd also like to mention that arrow functions are not a direct replacement for traditional functions. They differ in how they use this, don't have access to arguments, and can't be used as methods, amongst other things. Have a read of this great Mozilla page and make sure you fully understand them, and only use them where appropriate.
Top comments (0)