ES6 Arrow Functions Explained

Introduction

Arrow functions are a new syntax introduced in ES6 that allows a developer to more concisely write functions. They use a new token, =>. Arrow functions are anonymous and change that way that this binds in function.

By using the arrow function, a developer can avoid having to type the function keyword, the return keyword and using curly braces in some instances, which is required using the old function syntax.

Basic Syntax

Below is a comparison of the syntax for a function with multiple parameters using the function keyword from ES5 and using the new arrow syntax from ES6.

The arrow function above allows a developer to achieve the same results with fewer lines of code.

Note that curly braces are not required if only one expression is used in the function as shown above. If your function has more than one expression, curly braces must be used as shown below.

If a function takes in no parameters, empty parentheses are required as shown below.

However, if a function only takes in one parameter, no parentheses are needed.

Where to Use Arrow Functions

Arrow functions are typically used best where an callback function is necessary. For instance, if we use the filter function on an arrow, we must pass it a callback function. Below is a comparison of passing a callback function to filter as a parameter using the ES5 and ES6 syntaxes.

Another practical example of using arrow functions when passing in callback functions is when using Promises. Using arrow functions will simplify code and make it easier to read. Below is an example.

The other benefit of using arrow functions with promises/callbacks is that it reduces the confusion surrounding the this keyword. In code with multiple nested functions, it can be difficult to keep track of and remember to bind the correct this context. In ES5, you can use workarounds like the .bind method or creating a closure using var self = this;.

Because arrow functions allow you to retain the scope of the caller inside the function, you don’t need to create self = this closures or use bind.

Things to Remember When Using Arrow Functions

• The This Keyword

The this keyword works differently in arrow functions. Methods such as call(), apply(), and bind() will not change the value of this in arrow functions. If you need to bind to a different value, you’ll need to use a function expression.

• Constructors

Arrow functions cannot be used as constructors as other functions can. If you attempt to use new with an arrow function, it will throw an error. Arrow functions, unlike normal function, don’t have a prototype property or other internal methods. Because constructors are generally used to create classlike objects in JavaScript, you should use the new ES6 class syntax instead.

• Argument Object

Arrow functions do not have the local variable arguments like other functions do. The arguments object is an array-like object that allows developers to access a function’s arguments. This is helpful because JavaScript functions can take an unlimited number of arguments, even when they are not specified in the functions parameters. Arrow functions do not have this object.

Best Practices for Using Functions in ES6

Generally, the following conventions should be used in defining functions in ES6:

• Use function keyword in the global scope and for Object.prototype properties.
• Use class keyword for object and classlike constructors.
• Use => syntax everywhere else a function is defined.