Primeiramente é muito comum achar que ambos os códigos são equivalentes, já que o ES6
trouxe diversos syntax sugar
para deixar o código mais legível e conciso, as arrow functions
são normalmente confundidas com as functions
do ES5
. Mas indo direto ao ponto existem quatrocinco diferenças entre ambos os códigos:
Expressões de função podem ser nomeadas explicatamente, isso é útil em alguns cenários que envolvem recursão e para em casos de exceção fica mais fácil de rastrear o código, visto que o nome da função é usado na pilha de exceção mostrada ao desenvolvedor. Só que Arrows Functions
não podem ser nomeadas explicitamente, elas acabam herdando o nome da variável onde foi criada.
var fn = function nome() {};
fn.name; // nome
var fn = () => {};
fn.name; // fn
Retorno
Expressões de função precisam declarar explicitamente qual será o retorno da função, enquanto Arrow Functions
permitem escrever em um modelo encurtado onde a última expressão analisada será o retorno da função quando é omitido as chaves {}
.
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
Ignorando o caso de que arrow functions
não podem ser usadas como constructors
, e não recebem arguments
e não podem ter nomes (ou seja, 75% das diferenças), o modelo mais equivalente entre arrow functions
e funções tradicionais seria este:
// modelo nomeado
var name = (() => { /* code */ })
var name = (function name() { /* code */ }).bind(this)
// modelo anônimo
(() => { /* code */ })
(function() { /* code */ }).bind(this)