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:

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

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:

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

function(x){
	return x;
}

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

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:

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

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

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

//multiple params and statements
(x, y) => {
	var factor = 5;
	var growth = (x-y) * factor;
}

function(x, y){
	var factor = 5;
	var growth = (x-y) * factor;
}

When you wrap a function BODY in curly braces, no value is automatically returned like in a regular function- you should use the return keyword for that purpose.

//multiple params and statements
(x, y) => {
	var z = 5;
	return (x * y) + z;
}

function(x, y){
	var z = 5;
	return (x * y) + z;
}

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:

//Single object literal statement
//Wrap function BODY in parenthesis
x => ({id: x, height: 270});

// OR
// Use an explicit return 
x => {return {id: x, height: 270}};

function(x){
	return {id: x, height: 270};
}

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.

• Overview of JavaScript Arrow Functions
• Arrow function usage, lexical binding of "this"

Arrow function usage, lexical binding of "this"