1 July 2017, 11:23

javascript es6 ~ the way of the arrow function

Why arrow functions?

Doing what is comfortable at the moment is not the best approach to learning how to code, for me anyway. Pushing yourself outside of your comfort zone is one of the most important parts of learning and getting good at a new skill. It's for that reason I have been making a conscious effort to embrace ES6.

In this post ( the clue is in the title ) I'll be looking at the new ES6 addition arrow functions.

Arrow functions are not only more condensed compared to ES5 functions but they also solve common problems with the use of this ( this is covered here ) and scope. The this of an arrow function is picked up from it's surroundings and is therefore lexical i.e. uses closure.

Let's look at some examples:

First let's look at a function in the ES5 syntax which will then be shown in the ES6 arrow function syntax below it.



Using the arrow syntax has reduced the amount of code needed and has also maintained the readability. Some would argue that the ES6 syntax is more readable, but that's assuming that the reader understands the ES6 syntax. So let's make sure that's the case. The easiest comparison is the ES5 function expression. Which looks like this:

vs the arrow syntax of the same function which looks like this:

Both are stored in a variable ( I am using const to store arrow which is a ES6 syntax, but more on that another time ), both accept two parameters function( a, b ) , ( a, b ) and return the result of those two parameters when they are added together { return a + b }, => a + b. They are then passed two arguments expression( 1, 2 ), arrow( 1, 2 ) the result of which is stored in another variable ( again I am using the ES6 syntax in 'arrow' with let ) which is then output by the log function ( which is just a utility to output to the result pane in jsfiddle ).

Some function composition using the arrow syntax:

comp takes a function f returns a function that takes another function g which returns a function that takes a parameter x. Which then calls g which is passed x the result of which is passed to f. Here's the same functionality written in the ES5 syntax:

A practical example

First in ES5:


The important difference between the two is that there is no need to define the context of this in the ES6 version. Using ''' var that = this''' is clunky at best, of course you could use bind or pass this in as an extra parameter to .map but that is still not ideal. ES6 takes care of all the awkward sidestepping.

when not to use arrow functions

Arrow functions have use cases, and it is best if they are not used for the sake of using them. When using arrow functions '''this''' is not bound to anything, but simply inherits it from the scope of it's parent ( which is why it doesn't need defined in the "prefixArray" '''.map''' as its parent is the constructed instance of Prefixer ). However that sort of behavior can be the opposite of what we what in these cases:

  • click handlers ( we want '''this''' to bind to what was clicked not the global '''window''' object )
  • object methods ( we want '''this''' to bind to the object not the global '''window''' object )
  • prototype methods ( we want '''this''' to bind to the object not the global '''window''' object, note using arrow functions inside these methods is a great way to access the correct '''this''' context as shown in the example above).
  • when you want access to the '''arguments''' object more on the '''arguments object''' here

Arrow functions are great when used correctly and they are a welcome edition to JavaScript native toolkit. Here are some additional resources:

← JavaScript Beyond the Basics ~ Function Composition
JavaScript 101 ~ Closure →