Understanding ES6 Arrow Functions

Introduction

Imagine a world without functions. Grim, isn’t it? Programming would be nothing but a world of rotting data, waiting for a moment to be utilized. Functions are literally the only thing moving data throughout our applications, so it’s fair to say as developers it’s important to stay up to date on modern techniques, while keeping function skills sharp.

Arrow functions were introduced with ES6 as a new way to write JavaScript functions. The syntax is simple and concise, and in most situations requires less typing than traditional functions. Arrow functions also simplify function scope with their unique relationship with the ‘this’ keyword. I’ll explain all of this below with a few simple examples. I encourage everyone to also read the comments in the code snippets, as they provide additional information.

Syntax & Declarations

Arrow functions provide us with a more concise and terse syntax, as well as some additional functionality (no pun intended). The first main difference is how you write a function declaration. With an arrow function, we cannot name the function itself, but is instead stored in a variable, like this:

I know, it looks a little strange. As we get a little further, you’ll start to understand every component of the arrow syntax. The biggest difference you’ll notice is the fat arrow =>

Passing Arguments

If we want to pass in arguments, it works exactly like you’d expect it to, except for a few small differences. When there are no arguments, arrow functions still require an empty set of parenthesis. This is also true for having 2 or more arguments. But, if there is only one, we are able to omit the parenthesis altogether, although it’s not required:

Anonymous Functions

We can also use the arrow syntax for anonymous functions, such as functions attached to variables, array methods or event listeners. To anyone who hasn’t heard of an anonymous function, it’s essentially a function without a name, and cannot be accessed outside of the variable it’s attached to. In the example below, notice that we still omit the function keyword, add a fat arrow, and all the same rules apply for parenthesis as before:

Implicit Returns

This is where were start to see more functionality. Arrow functions allow us to use implicit returns, meaning we don’t have to use the return keyword when returning a single statement. In the past, we would explicitly return data using the return keyword, but with the arrow function, it’s assumed. Again, this only works when you are returning a single statement. In addition, we can omit the curly braces surrounding our function. Here’s what it looks like:

Starting to look pretty clean, eh? Functions become easier to read and maintain, and we get away with writing far less code. Although I prefer this syntax, many developers might prefer the parenthesis and curly braces for readability. It’s totally optional.

Understanding “this”

Arrow functions aren’t all about making our functions pretty. Unlike traditional functions, the arrow syntax does not bind itself to ‘this’. It will always retain the ‘this’ value of it’s outer scope. This can be fairly handy, especially while nesting functions. If we nest an arrow function inside a normal function, the ‘this’ keyword will always refer to the normal function. We no longer have to rebind the value of ‘this’ while nesting. In the global scope, the ‘this’ keyword is bound to Window by default.

This example will not work correctly:

Since the arrow function doesn’t bind ‘this’ to the menu, the code will not work. Also, because ‘this’ is still bound to the Window object, this code will not throw an error, but instead will add the class of ‘open’ to the Window. This would be a perfect example of when the arrow function isn’t necessary. We should use the more traditional function syntax instead, like this:

The traditional syntax is the best choice here, as it makes our code more manageable and reusable in the long run, and solves our scoping issue with ‘this’.

So, what about nesting functions? Using both syntaxes can be the perfect choice for certain situations. For example, say we wanted to write a function that adds a class to a page element on click, then removes that class after 3 seconds. We would not want to try something like this:

If we were to use an arrow function inside the setTimeout instead, we could preserve the value of ‘this’, and access the popup variable inside of the setTimeout:

There are obviously many ways to write a function like the example above, but I’m hoping by now we can understand arrow functions and their relationship with ‘this’.

Conclusion

It’s clear that arrow syntax has its place in functional programming, and although it helps our code to be clear and concise, it’s not always necessary. Since most of the examples here were extremely trivial and lacked context, I recommend everyone to integrate these new ideas into a project of their own and practice them in a real world application.

To summarize, we really only covered two basic ideas:

  • Arrow syntax provides a clean and concise way to write functions
  • Arrow functions do not bind themselves to ‘this

Thank you so much for reading, please leave a comment below or hit the clappy hands if you liked what you read. Farewell and happy coding!

Portfolio // Twitter