Exploring the Nuances of JavaScript Arrow Functions & Why We Love 'Em
Tags: javascript, es6, thiskeyword
Published: 2020-08-24 07:00:56

When I was first introduced to JavaScript arrow functions, I understood them to be a shinier version of traditional function syntax. Sure, it made sense that as time went on, EcmaScript (ES) would have to update and adapt to new problems that developers aimed to solve, BUT I (naively) figured any sort of revision on an already existing feature was purely for aesthetics.

However, as I spend more and more time coding, I’m realizing these updates are far more nuanced than my baby programmer brain could initially wrap my head around, and I'm excited to share this with you.


# Ok! So functions. What are they? 
We know that functions allow us to execute a particular block of code whenever we want. We create the function via declaration or expression, we pass in an input (though not necessarily always), and then we invoke the function to produce an output.

Classic function syntax requires a 'function' keyword, a set of parenthesis to hold your parameters, and a block of code encapsulated by curly brackets. Let's take a look at an example function that helps us figure out the current price of an item on sale implemented in this traditional function style:  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uskvkbsj170ach9hfdxa.png)

***Arrow function syntax***, on the other hand, does not require the 'function' keyword & only really requires a '=>' and a placeholder for parameters.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6n1v5mceavrjfkoy2uhc.png)

![GIF from Me and You and Everyone We Know](https://i.makeagif.com/media/7-18-2015/tIdIbJ.gif)

Other than those two default requirements, arrow functions are able to take syntax simplification even further! Let's dive into a couple of specific situations that allow you to personalize stylization.

#### - If your function has no parameters...
Demonstrate this with a pair of empty parenthesis or an underscore!

#### - If your function is one line...
Curly brackets are not needed and neither is a return statement!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h2dz4vl550b51i7fxs35.png)

#### - If your function has one parameter...
It is up to you to determine your preference for setting up the parameter inside a pair of parenthesis or without any at all.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hmnkcvx2y2z5lqedepui.png)

#### - Otherwise...
If your function has multiple parameters, parentheses are required, and/or if your function spans multiple lines, you'll need to encapsulate it in curly braces in addition making your return statement explicit.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6n1v5mceavrjfkoy2uhc.png)

## Now! That's enough about syntax. Arguably more interesting is how arrow functions interact with the keyword *this*.

The above examples are pretty simple implementations of JavaScript functions. However, as you progress through your coding journey, you'll come to encounter functions stored inside of other blocks of code, and you'll also be exposed to the usage of the *this* keyword.

In classic function expressions, the binding of *this* changes in relation to the context it is called in. Check out the code below:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iyt0bqw3bkz7bylz13is.png)

Maybe you'd expect the result of invoking popStar.displaySingles(); in the above code to be the singles from Britney Spears' hit album, "Oops!...I Did It Again" (2000) logged to the console, BUT...

![Alt Text](https://thumbs.gfycat.com/AgedComfortableAtlanticspadefish-size_restricted.gif)

Didn't you remember that *this*, as [Mariya Diminsky over at FreeCodeCamp explains](https://www.freecodecamp.org/news/learn-es6-the-dope-way-part-ii-arrow-functions-and-the-this-keyword-381ac7a32881/), "always references the owner of the function it is in"? The keyword *this*, inside of an object, will refer to its parent object, but if *this* is inside of a classic function expression, it will then refer to the global window object. So, when we invoke the above code, we will print to the console the following because the global window object does not have a .name property:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1imfo0rm1oe13gptou6s.png)

There are a couple of ways to get around this issue in ES5 (check out the FreeCodeCamp article for examples), but ES6 -- the most recent major update to EcmaScript -- provided a straightforward solution: ***arrow functions***! 

![Broad City GIF: Dis Good](https://media1.giphy.com/media/xT9DPmOJ1T72sStROo/source.gif)

Arrow functions were designed so that the binding of *this* is lexically scoped. This means *this* will always refer to the block of code that the arrow function is declared in.

If we revise the .displaySingles property on the popStar object to be an arrow function, we'll be able to print our desired output to the console.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uxx4rryk8t6upd0l9785.png)

#<center> 👏🏼 👏🏼 👏🏼 👏🏼 👏🏼 👏🏼 </center>

All is well now in our popStar object, but! Don't go thinking that arrow functions and classic functions are completely interchangeable. Arrow functions do have a couple of downsides and we shall explore those another time! Thanks for reading!