Arrow Functions Javascript – Entende de uma vez por todas

Junto da versão ES6 do EcmaScript foi adicionado as Arrow Functions, que basicamente é uma forma diferente de escrever funções no JavaScript, com uma estrutura mais curta mas que trás muitos benefícios.

Vamos primeiro entender a diferença de sintaxe entre as funções tradicionais e arrow functions no Javascript.

Sintaxe básica

Usando uma função tradicional temos a seguinte estrutura:

function soma(valor1, valor2){
    return valor1 + valor2
}

Já usando arrow functions podemos simplificar para só uma linha.

let soma = (valor1, valor2) => valor1 + valor2

Bem diferente certo?
Vamos ver no detalhe cada parte dessa sintaxe.

(param1, param2, param3) => { codigoDaFuncao }

A lista de parâmetros deve ser escrita entre um par de parênteses.

Após a declaração dos parâmetros vem o símbolo => em seguida vem o corpo da função em sí, envolvida por chaves.

Caso a função tenha só um parâmetro então não é preciso usar os parenteses.

param => { return param * 2 }

Se a função for simples e tiver valor de retorno então também não é preciso usar as chaves.

param => param * 2

Principais usos de arrow functions.

O principal uso para arrow functions além de simplificar o código em geral é ser passada como parâmetro em funções que precisam de callback.

Exemplos:

Dado o array de elementos:

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

Usando uma função tradicional temos o seguinte código.

elements.map(function(element) {
  return element.length;
});

Ao fazermos a mudança conforme explicado acima temos:

elements.map((element) => {
  return element.length;
});

Como só temos um parâmetro então podemos remover os parênteses da declaração de parâmetros.

elements.map(element => {
  return element.length;
});

E por fim, como a função é só um return podemos remover também as chaves e o return.

elements.map(element => element.length);

Pontos de atenção Arrow Functions

Return Implícito

Caso você opte por usar chaves então não esqueça que o return não é implícito.

var func = x => x * x;
// Sintaxe com return implícito

var func = (x, y) => { x + y; };
// Aqui o return não pode ser implícito.

//Corrigindo temos:
var func = (x, y) => { return x + y; };

Retornar objetos literais

Para retornar um objeto literal de uma arrow function é preciso encapsular o objeto entre parênteses.

var func = () => ({foo: 1});

Se tentar retornar somente o objeto, então ao chamar a função dará erro.

var func = () => { foo: 1 };

Quebras de linhas

Não pode ter quebra de linha entre a declaração dos parâmetros e a flecha.

var func = (a, b, c)
           => 1;

Porém se a flecha estiver na mesma linha do fim dos parâmetros não há problema.

var func = (
  a,
  b,
  c
) => (
  1
);

Conclusão – Arrow Functions

Certamente essa foi uma das principais adições do ES 6, e vem mudando a forma de escrever Javascript moderno.

Mas temos que ter cuidados, então confira quando não usar.

Agora se você quiser aprender mais sobre o JavaScript e aprender criando projetos, confira o curso Programador JavaScript Profissional dos nossos parceiros da OneBitCode.