An arrow function in JavaScript is a terser alternative to a traditional function. The syntax enables quick creation of inline anonymous functions.
Arrow functions were added with ES6 in 2015. They’re now supported by all major browsers. You can use them with older browsers, such as Internet Explorer, via a transpiler like Babel.
Creating Arrow Functions
The main advantage of arrow functions is how concise they make your code.
Here’s a traditional function:
Here’s the same code rewritten as an arrow function:
They’re called “arrow functions” because of the arrow-like “=>” syntax.
Arrow functions are particularly useful when working with callbacks.
Here’s the traditional version:
And here’s the inner function as an arrow function:
Arrow functions are much shorter than their traditional counterparts. You can omit the function prefix. They enable clean one-line statements and have an implicit return statement.
Handling Arguments
Arrow functions accept a few different forms of arguments:
When using a single argument, no parentheses are needed. When there are multiple arguments, use parentheses and commas in the same style as a classic function declaration. Arrow functions which accept no arguments require an empty pair of parentheses so the syntax is valid.
Working With Object Literals
You can return object literals from inline arrow functions but they must be wrapped in parentheses. This is a requirement of the parser.
You can destructure an object literal into arguments using the same parentheses-wrapped form:
Omitting the parentheses creates a syntax error in both cases.
Returning Values
All our examples so far have been single-line functions with an implicit return statement.
You can write arrow functions that span multiple lines:
When writing a multi-line arrow function, wrap its body block in brackets in the same way you would a traditional function. It’s not possible to use an implicit return; you must revert to a return statement.
Lexical Binding
Aside from syntax, the presence of lexical binding is one of the biggest differences between arrow functions and classical function expressions.
A traditional function has this bound to refer to itself. Arrow functions are always anonymous. this is bound to the same value as the this within the block defining the arrow function.
The ability of arrow functions to use the this of the parent scope means you don’t need to use bind() when using them in classes. Combined with the terser syntax, this makes arrow functions the ideal form when writing callbacks. They’re best in throwaway scenarios where the outside context is more important than the function’s own identity.
As a consequence of the lexical binding, arrow functions shouldn’t be used with the call, apply and bind functions. These functions are used to execute a function within a specific scope. They aren’t relevant to arrow functions as this will always be set to the scope the expression is defined in.
Characteristics
Arrow functions have a few other differences compared to explicitly-defined function expressions.
Arrow functions have no constructor so you can’t create instances of them with the new keyword. They’ve no prototype either – the prototype property will be undefined.
Unlike regular functions, you can’t use the arguments local variable. It will be undefined. You must access the values of arguments directly by name.
Using an arrow function as a generator isn’t supported. Trying to use the yield keyword within an arrow function’s body will raise an error.
A final thing to watch for is the parsing order. Arrow functions get unique treatment within conditional expressions, so take note of the output in the following scenarios:
When creating an arrow function in a conditional expression, wrap it in parentheses to ensure it’s evaluated correctly. Some of the rules of operator precedence are overridden, as illustrated by the second example.
Conclusion
Using arrow functions makes your code more concise and reduces boilerplate. Their attributes, including anonymity and lexical binding, considerably simplify scenarios such as callbacks. Simultaneously, those same attributes mean they aren’t a drop-in replacement for every traditional function.
Besides their limitations, some JavaScript developers consider that arrow functions can make code less readable and trickier to maintain. The complete lack of keywords, such as function and return, makes it possible to overlook their presence while skimming code. The syntax is more opaque to new developers who may not be fully aware of its idiosyncrasies.
It’s therefore a good idea to think how you’ll use arrow functions in your codebase. Often, that means writing callbacks in arrow form while sticking with alternative syntax for key top-level functions.
