Funções arrow em

Sobre Funções arrow

Além das declarações de função e das expressões de função, o JavaScript também tem outra sintaxe bem concisa para definir uma função. Essas funções são chamadas de arrow functions.

Neste conceito, vamos focar na sintaxe usada para escrever uma arrow function. Há diferenças na forma como uma arrow function funciona, como a vinculação de this, que serão abordadas em outros conceitos.

Veja uma comparação entre uma declaração de função e uma arrow function.

function addUpTwoNumbers(num1, num2) {
  return num1 + num2;
}

// function keyword removed and => added
const addUpTwoNumbers = (num1, num2) => {
  return num1 + num2;
};

Acima, você vê que a sintaxe da arrow function:

1. remove a palavra-chave function
2. declara o identificador addUpTwoNumbers como um const
3. adiciona uma seta grossa =>

Se o corpo da função contém apenas uma instrução de retorno, como no exemplo acima, as {} e a palavra-chave return podem ser omitidas.

const addUpTwoNumbers = (num1, num2) => { return num1 + num2 };

// can be shortened to
const addUpTwoNumbers = (num1, num2) => num1 + num2;
// braces {} and return removed

No caso especial de retornar apenas um objeto de uma arrow function, são necessários parênteses em volta do objeto para poder omitir a instrução de retorno.

// explicit return of object
const addUpTwoNumbers = (num1, num2) => {
  return { num1, num2 };
};

// implicit return of object
const addUpTwoNumbers = (num1, num2) => ({ num1, num2 });

O uso de parênteses em volta dos parâmetros depende do número de parâmetros.

// one parameter does not need parenthesis
const square = num => num * num;

// two or more parameters need to be wrapped in parenthesis
const addUpTwoNumbers = (num1, num2) => num1 + num2;

Outros conceitos, como Parâmetros rest e Desestruturação, também podem ser usados com uma arrow function.