Arrow functions. Some people love them, others couldn't care less. What is important, is that people do use them. As such, you must be aware of some of the differences they present when compared to a standard function.
Arrow functions are a succinct alternative to a conventional function expression, but are restrictive in some situations when compared to "traditional" function expressions.
Characteristics:
Do not have their own bindings to this
or super
. This is important when working with objects.
Do not have arguments
, which are an Array-like object accessible inside functions that contain the values of the arguments passed to that function.
Do not have the new.target
keyword, which is a pseudo-property that allows you to determine whether a function or constructor was called using the new
operator.
call
, apply
and bind
behave differently than when used in a regular function.
Can not be used as constructors
, again, important when working with objects.
Can not use yield
, within its body, which is used to pause and resume a generator function.
Return Characteristics:
Arrow functions may implicitly return values by simply omitting the curly braces that traditionally wrap a function's body if their body only contains a single expression.
With a simple expression, a return
is not needed:
param => expression
.
Multiple params require parentheses. With a simple expression, a return
is not needed:
(param1, paramN) => expression
.
Multiline statements require body brackets and return:
param => {
let a = 1;
return a + param;
}
When using implicit returns, object literals must be wrapped in parenthesis so that the curly braces are not mistaken for the opening of the function's body:
const foo = () => { bar: 1 } // foo() returns undefined
const foo = () => ({ bar: 1 }) // foo() returns {bar: 1}