Headed Every Which Way — What the Heck is Up with Arrow Functions Anyway?

~This was originally posted on Medium on 9/30/19~

As I have been learning to code in Javascript, I have been consistently fuzzy on the topic of arrow functions. I find myself using them, but not completely sure why. Learning when to use which kinds, but not why the distinction matters. So I set out to give myself a foundation on which to place my shaky knowledge.

Upon setting out to learn, the first thing I ran into was that arrow functions are a way of writing an ‘anonymous function.’ I wasn’t completely sure what that meant — so I took a bit of a detour to figure that out first.

Anonymous Functions

You may have heard the terms “function statement” and “function expression.” A “function expression” and “anonymous function” are the same thing. The difference between them and a function statement is in the name — or lack there of. The below syntax, pulled from this discussion of arrow functions, shows the difference:

// fn declaration 
function add (x,y) {   return x + y; }

// fn expression or anonymous function
var add = function (x,y) {   return x + y; }

Function expressions are created without a name tied directly to them, allowing them to be assigned to a variable. This main seem arbitrary, but the difference is made clear in our later discussion of scope.

You can read a good explanation of anonymous functions here, as well as a nice simple run down of a couple pros and cons to using them.

Syntax

Alright, now we know what an anonymous function is. Before we proceed, let’s look at the basic structure of an arrow function. The basic structure below is what gives them their name:

 (params) => {
        // function body
 }

This takes the syntax of the function expression shown above and simplifies it, making it much more concise, or terse.

If there is only one parameter, the () can be left off, like so:

params => {
     // function body
 }

And if there are no parameters, you simply leave the () empty, like so:

() => {
     // function body
 }

But we can go even further. If the function contains only one expression, you can leave off the {} entirely and simply put the expression inline, like so:

() => 2+3;

One confusing bit of syntax comes when you are trying to return an object literal. Even though you are only returning one expression, if you tried to do it like so:

(name, description) => {name: name, description: description};

you would receive an error. Because of the curly braces, it looks like you’re simply trying to throw some syntactical nonsense into a function. To fix this, you simply wrap your object in parens:

(name, description) => ({name: name, description: description});

This really threw me off for a while, as the syntax just doesn’t look right to me at all! Parens in curly braces in parens… where does it end? Simply keep in mind that you need to wrap the function expression in parens when it is comprised solely of an object literal, and really no other time.

Scope

The next important aspect to understand about arrow functions is that they do not have their own execution context! This is unique to arrow functions — all other types of functions have their own context and scope. What this means is that they inherit their context from their parent element. This is very handy for implementing some quick logic without needing to pass parameters around.

When is this Useful?

This is very handy for iterating over all the objects in a list, such as with .map or .filter. You have access within the arrow function to the current item being worked on.

Arrow functions can also be used as IIFEs — or Immediately Invoked Function Expressions. This essentially means code that is executed as soon as it is defined. This is very useful when working with promises or other asynchronous code.

Arrow functions are a powerful tool in Javascript. Understanding how they work and why we use them is key to writing good Javascript code — just don’t go too crazy. There are times when using an arrow function is not appropriate. This post sums up a few potential problem areas.

Since my main goal was merely to explain how arrow functions work and why you would generally use them, there is a great deal I haven’t touched on here. For more nuance and uses, I encourage you to check out the links below, or do your own research! There’s always more to learn, right?

Sources:
https://blog.scottlogic.com/2011/06/10/javascript-anonymous-functions.html
https://zendev.com/2018/10/01/javascript-arrow-functions-how-why-when.html
https://tylermcginnis.com/arrow-functions/
https://developer.mozilla.org/en-US/docs/web/JavaScript/Reference/Operators/function
https://developer.mozilla.org/en-US/docs/Glossary/IIFE