Funções arrow em

Sobre Funções arrow

Para além das declarações de funções e das expressões de funções, o JavaScript tem também uma sintaxe muito concisa para definir uma função. Estas funções chamam-se arrow functions.

Neste conceito, vamos centrar-nos na sintaxe usada para escrever uma arrow function. Existem diferenças na forma como uma arrow function funciona, como a ligação de this, que serão abordadas noutros conceitos.

Aqui está 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, vais ver que a sintaxe da arrow function:

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

Se o corpo da função contiver apenas uma instrução de retorno, como no exemplo acima, as chavetas {} 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 devolver apenas um objeto a partir de uma arrow function, são necessários parênteses à 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 });

A utilização de parênteses à 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.