ES6 Sampler #2 : Fat Arrows

September 27, 2016


JavaScript

Preface

This is the second in a series of posts where I explore all the new stuff es6 has to offer, come along and learn vicariously!

Pssst... You might also want to check the first one in the series:

ES6 Sampler #1: (Let & Const)

Note - Challenges: I gave myself little challenges you are welcome to try if you want to recreate my own learning curve.

Let's start:

If you’ve used any recent js library or framework you might have stumbled upon fat arrows ( or arrow functions) that use the following syntax =>

Challenge Find out what an arrow function is and the equivalent in es5

See the Pen ES6 Sampler - Fat Arrow pt1 by Eugenio - Keno - Leon (@k3no) on CodePen.

Well ok then arrows seem to replace the function syntax , but how is that an improvement ?

Challenge Find out why are arrow functions are an improvement...
Note: There are a couple ways of using arrow functions :
  • (param1, param2, …, paramN) => expression Single line, implicit return of expression
  • (param1, param2, …, paramN) => { statements } Multi Line, does not implicitly return anything, (ie you would need to return something)

Compact Syntax in anonymous functions

See the Pen ES6 Sampler - Fat Arrows pt2 by Eugenio - Keno - Leon (@k3no) on CodePen.

Anonymous functions (nameless functions for instance) are everywhere in javascript, with the arrow syntax you can ommit the word function.

Note: Parentheses are optional when there's only one parameter:
  • (singleParam) => { statements }
  • singleParam => { statements }

Another very common instance, is the use of functions as arguments for other functions, with arrow functions the syntax can become somehow clearer.

See the Pen ES6 Sampler - Fat Arrows pt3 by Eugenio - Keno - Leon (@k3no) on CodePen.

.this and scope with arrow functions

Have you ever lost track of your global variables or wanted to use a local variable but couldn’t figure out which this to use ? , arrow functions help by making things a little more concise, consider the following cases:

See the Pen ES6 Sampler - Fat Arrows pt4 by Eugenio - Keno - Leon (@k3no) on CodePen.

Other uses

I personally believe in a verbose syntax when writing javascript to make things easy to a wider audience,but as more and more developers and libraries use newer features, it is important to at least know how to recognize what’s being written, so I would like to finish this very small introduction to arrow functions with other cases one might encounter:

Challenge Find other uses of arrow functions in the wild

Javascript methods with callbacks :

See the Pen ES6 Sampler - Fat Arrows pt5 by Eugenio - Keno - Leon (@k3no) on CodePen.

JQuery:

See the Pen ES6 Sampler - Fat Arrows pt6 by Eugenio - Keno - Leon (@k3no) on CodePen.

Conclusion:

The new es6 arrow syntax brings a more compact/clear way of writting functions, It also helps with scope in some cases, while using them is up to you, recognizing them is no longer optional, so it pays to learn them.

TL;DR:

() => You will learn to love me.

Best,

Keno