Overview of JavaScript arrow functions

Created: June 19th, 2015

Of the long laundry list of new features poised for adoption by JavaScript
in ECMAscript 6 (the standards body of JavaScript), one that really stands out is
JavaScript arrow functions. A minimalist's ideal form factor, arrow
function's ultra lean syntax gives it the potential to become as ubiquitous as
array literals in replacing traditional array definition, but for functions
instead. The wide adoption factor makes it worthwhile to familiarize ourselves
now with what arrow functions are all about before it catches us by surprise
inside the source code of scripts everywhere.

Support wise JavaScript arrow functions are already a go in
newer versions of Firefox, and will be supported in IE Edge (Windows 10), with
Chrome in the not-so-distant horizon apparently. Refer
to the following to keep track of arrow functions support across various
browsers.

Arrow
function characteristics

Before we dive into the syntax for JavaScript arrow functions,
lets do a fly by first for a high level view of the new feature:

JavaScript arrow functions are anonymous functions

Arrow functions cannot be used as constructor functions,
(ie: with the keyword new)

Lexical binding of this inside arrow
function: The value of this inside an arrow function always
points to the same this object of the scope the function is
defined in, and never changes.

We'll clarify some of the above points later, but lets get to
the nitty gritty now!

The syntax

For starters, arrow functions in JavaScript are always
anonymous, so the first thing it sheds is any function name. It also does away
with the "function" keyword, and uses an arrow (=>) to separate the parameter(s)
portion of the function from the function BODY. The result in its most basic
form is the following:

Arrow function syntax

//no params, empty body
() => {};

Regular function equivalent

function(){}

The portion to the left of the arrow (=>) is
the parameters in parenthesis, and to the right is the function statements
in curly braces. When the function
contains no statements, undefined is returned.

If the function contains only a single
parameter, then you can omit the parenthesis surrounding it. The same goes for
the function BODY- a single BODY statement requires no braces around it:

Arrow function syntax

//single param, single statement
x => x;

Regular function equivalent

function(x){
return x;
}

Arrow function syntax

//single param, single statement
x => x + 5;

Regular function equivalent

function(x){
return x + 5;
}

When your arrow function only contains a
single BODY statement with no braces around it, it will automatically return
the value derived from that statement; there's no need to use the keyword "return".

For arrow functions with more multiple
parameters, wrap them in parenthesis:

Arrow function syntax

//multiple params
(x, y) => x * y;

Regular function equivalent

function(x, y){
return x * y;
}

If the function BODY contains more than one statement,
wrap them in curly braces:

If your arrow function contains a single BODY
statement that returns a object literal, you need to wrap the function BODY in
parenthesis to preventing the curly braces surrounding the object literal from
being interpreted as a function BODY wrapper:

The syntax for JavaScript arrow functions is
very easy to remember with the following rules:

For arrow functions with a single
parameter, you can omit the parenthesis () around the parameter.

For arrow functions with no or multiple
parameters, wrap the parameters in parenthesis.

For arrow functions with a single BODY
statement, you can omit the braces {} around the statement. The value
derived from the statement is automatically returned with no braces.

For arrow functions with multiple BODY
statements, wrap them in curly braces. No value is automatically returned
with braces- use the return statement to specify the value.

If a function BODY contains only a single
object literal, wrap the function BODY in parenthesis () to differentiate it
from the object literal wrapper.

Now that we have a solid understanding of the syntax of
Arrow Functions, lets move on to see how to actually use them, and also,
expound on a key difference between arrow functions and anonymous functions
when it comes to the value of the "this" object inside them.