3 Gotchas to Using ES6 Arrow Functions

With the recent release of Node v4 and the finalization of the new JavaScript spec, ES6 arrow functions will start to show up more and more in JavaScript code. If you aren’t familiar, arrow functions are just a way to define a function without needing the function  keyword.

Although it may just look like syntactic sugar, similar to how the new class  keyword is, it does cause the function to behave slightly different. If you aren’t aware of it, those differences could cause some debugging headaches.

Here’s 3 gotchas that you should be on the lookout for.

#1: Lexical ‘this’ Binding

What does that mean? For typical JavaScript functions, the value of  this is defined as an instance of itself as if used as a constructor.

Arrow functions do not do that.  this is inherited from the scope of which the arrow function is defined. With that rule in mind, it is also good to know that arrow functions are not ‘newable’. They cannot be used as constructors and will throw an error if used in that way.

You might ask, why the change in rules? Well this is actually extremely useful when using them as callbacks. How many times have you done this hack:

With arrow functions, that hack is no longer needed:

Another thing to keep in mind as well, is  arguments performs the same way in that it inherits its values from the calling scope. Arrow functions do not have an  arguments object.

#2: ‘this’ Cannot Be Changed

Relating to the first point,  this cannot be changed inside the function. If you try and run this code:

There’s an error that pops up in the console. This is to retain the rule in the first point of the function using its scope to define what  this is.

Even though arrow functions safe guard against that with an error, that’s not something that’s encouraged due to it causing debugging headaches.

#3: Implied Returns

This is a small gotcha, but if you’re not aware of it, can be a little weird. Since curly braces are optional for arrow functions, they can be left off to create a super simple function. In those types of definitions, the result of the expression is always returned.

Both of those functions do the same thing.

This is actually less of a gotcha, than a neat feature because it allows you to write some extremely functional looking code without the extra keyword fluff.

Go Forth and Conquer

Arrow functions are a neat addition to the JavaScript language and I encourage you to start getting familiar with them. They make creating simple callbacks elegant and allow some better structure than having to deal with regular function scope.

  • Cy Brown

    It’s not gotchas, it’s features ! 😀

    • Also true! They are features that if someone who’s used to how functions work as is might get hung up on. Although, I would say that if they are at the point where they would run into these, they should know how to use arrow functions effectively anyways.