JavaScript Arrow Functions
Arrow function was introduced with ES6 as a new syntax for writing JavaScript functions. There are a few differences between arrow functions and regular functions
Arrow Function vs Regular Function
Arrow Function | Regular Function |
---|---|
The value of this will always be inherited from the outer function. If there is no outer function, this will refer to the global object. In other words, the arrow function resolves this lexically. |
The value of this depends how the function is invoked or who owns the function:
|
Doesn’t have arguments object but we can access the arguments using a rest parameter …args |
Has a special arguments object containing the list of arguments |
Supports implicit return expression statement. |
return expression statement needs to be explicitly declared. |
A class method defined as arrow function will always bind this to the class instance. |
If a class method defined as a regular function and used as a callback, we have to bind this to the method. |
Arrow Functions should be used when
- The value of
this
needs to be consistent and returns the same value always - The function has only one line of statement and which may be a simple
return expression
- The function doesn't need to access its
arguments
object - Callback functions with static context
Arrow Functions shouldn't be used when
- As an object property or object prototype (
this
inside the arrow function will refer to "window" object instead of the parent object/function) - Callback functions with dynamic context
- The function will be used as a
constructor
- The
return expression
statement needs to be explicit - Need to access the
arguments
object of the function