ES6 Arrow Functions Explained
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.
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
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.
Arrow functions cannot be used as constructors as other functions can. If you attempt to use
- Argument Object
Arrow functions do not have the local variable
arguments like other functions do. The
Best Practices for Using Functions in ES6
Generally, the following conventions should be used in defining functions in ES6:
functionkeyword in the global scope and for
classkeyword for object and classlike constructors.
=>syntax everywhere else a function is defined.