As I noticed you did not explain the difference between () => {}
to function() {}
, then although there is a correct answer, I'll explain this difference.
First of all, it is very common to think that both codes are equivalent, since ES6
has several syntax sugar
to make code more readable and concise, arrow functions
are usually confused with functions
ES5
%. But going straight to the point there are five differences between the two codes:
Context
Arrow functions
have this léxico
while the normal model has this dinâmico
. This means that arrow functions
inherits the local context from which it was declared, while the normal template has the context associated with the object it is linked to at the time of the call (if it is not associated with anyone in the call, it automatically% as the global context, which in the case of browsers is this
)
var normal = function() {
return this === obj;
};
var arrow = () => {
return this === window;
};
var obj = { normal: normal, arrow: arrow };
obj.normal(); // true
obj.arrow(); // true
normal(); // false
Builder
window
can not be Arrow functions
, so it is not possible to use the constructors
operator with it.
var Normal = function() {};
var Arrow = () => {};
new Normal(); // Normal {}
new Arrow(); // Arrow is not a constructor
Arguments
new
does not have the array-like object Arrow functions
.
var noop = () => {
return arguments;
}
noop(); // ReferenceError: arguments is not defined
Function name
Function expressions can be named explicitly, this is useful in some scenarios involving recursion, and in case of exception it is easier to trace the code, since the function name is used in the exception stack shown to the developer. Only arguments
can not be named explicitly, they end up inheriting the name of the variable where it was created.
var fn = function nome() {};
fn.name; // nome
var fn = () => {};
fn.name; // fn
Return
Function expressions need to explicitly declare what the function return will be, while Arrows Functions
allow writing in a shortened model where the last parsed expression will be the return of the function when the Arrow Functions
keys are omitted.
var fn = function() { return 1; }; // retorna 1
var fn = () => 1; // retorna 1
var fn = () => (1, 2, 3); // retorna 3, última expressão avaliada
var fn = () => { 1 }; // retorna undefined
var fn = () => { return 1 }; // retorna 1
What would be an equivalent model of {}
then?
Ignoring the fact that () => {}
can not be used as arrow functions
and do not receive constructors
, the most equivalent model between arguments
and traditional functions would be this:
// modelo nomeado
var name = (() => { /* code */ })
var name = (function name() { /* code */ }).bind(this)
// modelo anônimo
(() => { /* code */ })
(function() { /* code */ }).bind(this)
In this case the arrow functions
can be exactly the same between the two models and they will work exactly the same. Of course, there are other ways to simulate the behavior of code
. One is to store the arrow functions
context in a variable and use that variable in the traditional function instead of its own this
, which the other responses showed.