Skip to main content
removeu 3 caracteres do conteúdo
Fonte Link
Ricardo Pontual
  • 23,2mil
  • 2
  • 33
  • 64

Como notei que não explicaram a diferença entre () => {} parae function() {}, então apesar de haver uma resposta marcada como correta, vou explicar estáesta diferença.

Como notei que não explicaram a diferença entre () => {} para function() {}, então apesar de haver uma resposta marcada como correta, vou explicar está diferença.

Como notei que não explicaram a diferença entre () => {} e function() {}, então apesar de haver uma resposta marcada como correta, vou explicar esta diferença.

adicionou 801 caracteres ao conteúdo
Fonte Link
Gabriel Katakura
  • 1,9mil
  • 8
  • 11

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)

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 quatro diferenças entre ambos os códigos:

Expressões de função podem ser nomeadas, 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.

var fn = function nome() {};
fn.name; // nome

Ignorando o caso de que arrow functions não podem ser usadas como constructors, 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:

(() => { /* code */ })
(function() { /* code */ }).bind(this)

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 cinco 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, 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)
adicionou 573 caracteres ao conteúdo
Fonte Link
Gabriel Katakura
  • 1,9mil
  • 8
  • 11

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 duasquatro diferenças entre ambos os códigos:

var Normal = function() {};
var Arrow = () => {};

new Normal(); // Normal {}
new Arrow(); // Arrow is not a constructor

Arguments

Arrow functions não possui o objeto array-like arguments.

var noop = () => {
  return arguments;
}

noop(); // ReferenceError: arguments is not defined

Nome de função

Expressões de função podem ser nomeadas, 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.

var fn = function nome() {};
fn.name; // nome

O que seria um modelo equivalente de () => {} então?

Ignorando o caso de que arrow functions não podem ser usadas como constructors, 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:

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 duas diferenças entre ambos os códigos:

var Normal = function() {};
var Arrow = () => {};

new Normal(); // Normal {}
new Arrow(); // Arrow is not a constructor

O que seria um modelo equivalente de () => {} então?

Ignorando o caso de que arrow functions não podem ser usadas como constructors, o modelo mais equivalente entre arrow functions e funções tradicionais seria este:

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 quatro diferenças entre ambos os códigos:

var Normal = function() {};
var Arrow = () => {};

new Normal(); // Normal {}
new Arrow(); // Arrow is not a constructor

Arguments

Arrow functions não possui o objeto array-like arguments.

var noop = () => {
  return arguments;
}

noop(); // ReferenceError: arguments is not defined

Nome de função

Expressões de função podem ser nomeadas, 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.

var fn = function nome() {};
fn.name; // nome

O que seria um modelo equivalente de () => {} então?

Ignorando o caso de que arrow functions não podem ser usadas como constructors, 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:

removeu 33 caracteres do conteúdo
Fonte Link
Gabriel Katakura
  • 1,9mil
  • 8
  • 11
Carregando
Fonte Link
Gabriel Katakura
  • 1,9mil
  • 8
  • 11
Carregando