A Quick Guide to Using Arrow Functions in JavaScript
When ECMAScript 6 aka ES6 released back in 2015 one of the most popular features out of the box were this thing called Arrow Functions or as many people may refer to as Fat Arrows.
It made that way of defining functions more concise and clean but, still giving it a lot of the same behavior you would get from writing “regular functions”. Check out MDN for more!
Let’s take a look at the old vs the new…
Standard way of writing functions…
Pretty straightforward, Now let’s take a look at writing that very same function using Fat Arrows…
Clean right? The arrow creates a function that isn’t accepting accepting any arguments right now which is denoted on the left side of the arrow, then evaluates the expression on the right side with their use and implicitly returns its result.
That’s a super clean, super simple one-liner… some of you may be asking what if I have multiple arguments!? Well let me show you how that’s done…
Here’s our standard way of writing functions with multiple arguments…
Pretty standard and what we’re used to. Now let’s do a makeover on that function…
Wow! That’s nice if you ask me. Here I pretty much did a quick transformation of removing the function keyword, added arguments inside of the parenthesis, and explicitly used the return keyword. Now there’s a caveat.
If you noticed this arrow function differs from the first arrow function I wrote. Here’s why… when using a one liner arrow function you can do away with the curly braces and the return keyword as that’s being done implicitly.
When you’re using a multi-line arrow function, you MUST use those good ole’ curly braces and explicitly use the return keyword if that’s what you wanna do. So if you’re using curly braces no return keyword, if you are, then you need the return keyword.
Another thing to also note, if you’re only using one argument, parenthesis are optional and you don’t need them. But, in all other cases you MUST use parenthesis or else you’ll wanna do this to your computer not knowing where the errors are coming from…
This marks the end to my quick guide to using arrow functions, I hope I was able to be a valuable resource, but don’t let your learning about arrow functions stop here, I encourage you to play around with them, get some practice, and try using them in place of the standard way of writing functions. Of course as the saying goes, “No need to fix what isn’t broken”, but why not try to make life easier?
Note
This article only covered syntax and did not cover ‘this’ in arrow functions. For more on that, please check out w3schools.
