Entendendo as Arrow Function do JavaScript

Você provavelmente já se deparou com as arrow functions escritas de várias maneiras diferentes.

//example 1
const addTwo = (num) => {return num + 2;};

//example 2
const addTwo = (num) => num + 2;

//example 3
const addTwo = num => num + 2;
 
//example 4
const addTwo = a => {
 const newValue = a + 2;
 return newValue;
};

Alguns têm parênteses em torno dos parâmetros, enquanto outros não. Alguns usam colchetes e a palava-chave return, outros não. Um abrange até várias linhas, enquanto os outros consistem em uma única linha.

Curiosamente, quando invocamos as arrow functions acima com a mesma entrada, obtemos o mesmo resultado.

console.log(addTwo(2));
//Result: 4

Neste momento você deve estar se perguntando: mas qual é a melhor maneira de se fazer? neste posto vou tentar responder essa questão.

Uma grande diferença

As arrow functions  são uma mais concisa de escrever expressões de função. No entanto, em resumo, elas não tem ligação com this.

//Function expression
const addNumbers = function(number1, number2) {
   return number1 + number2;
};

//Arrow function expression
const addNumbers = (number1, number2) => number1 + number2;

Quando invocamos essas funções com as mesmas entradas, obtemos o mesmo resultado.

console.log(addNumbers(1, 2));
//Result: 3

Há uma importante diferença sintática a ser observada: as arrow functions usam a seta  => em vez da palavra-chave function. Há outras diferenças a serem observadas quando você escreve uma arrow function, e é isso que exploraremos a seguir.

Parênteses

Algumas arrow functions têm parênteses em torno dos parâmetros e outras não.

//Example with parentheses
const addNums = (num1, num2) => num1 + num2;

//Example without parentheses
const addTwo = num => num + 2;

Como se vê, o número de parâmetros que uma arrow function determina se precisamos ou não incluir parênteses.

Uma arrow function com zero parâmetros requer parênteses.

const hello = () => "hello";
console.log(hello());
//Result: "hello"

Uma arrow function com um parâmetro que não requer parênteses. Em outras palavras, parênteses são opcionais.

const addTwo = num => num + 2;

Portanto, podemos adicionar parênteses ao exemplo acima e a arrow function ainda funciona.

const addTwo = (num) => num + 2;
console.log(addTwo(2));
//Result: 4

Uma arrow function com vários parâmetros requer parênteses.

const addNums = (num1, num2) => num1 + num2;
console.log(addNums(1, 2));
//Result: 3

As arrow functions também suportam parâmetros rest e desestruturação . Ambos os recursos exigem parênteses.

Este é um exemplo de uma arrow function com um parâmetro rest .

const nums = (first, ...rest) => rest;
console.log(nums(1, 2, 3, 4));
//Result: [ 2, 3, 4 ]

E aqui está um que usa desestruturação .

const location = {
   country: "Greece",
   city: "Athens"
};

const travel = ({city}) => city;

console.log(travel(location));
//Result: "Athens"

Para resumir: se houver apenas um parâmetro  e você não estiver usando parâmetros rest ou desestruturação, os parênteses são opcionais. Caso contrário, não se esqueça de incluí-los.

O Corpo da Função

Agora que já entendemos as regras de parâmetros, vamos passar para o corpo da função de uma arrow function.

Um corpo de uma arrow function pode ter um "corpo conciso" ou "corpo de bloco" . O tipo de corpo influencia a sintaxe.

Primeiro, a sintaxe do "corpo conciso".

const addTwo = a => a + 2;

A sintaxe do "corpo conciso" é exatamente isso: é conciso, o mínimo necessário!

Observe que não usamos a palavra-chave return ou colchetes. Se o corpo da função de seta contiver apenas uma expressão , seu valor será retornado implicitamente . Portanto, você pode omitir a return e os colchetes.

Agora, vejamos a sintaxe "corpo em bloco".

const multiNums = (a, b) => {
    return a * b;
};

Nós usamos ambos os colchetes e return na arrow function acima. Aqui está outro exemplo que abrange várias linhas.

const totalDistance = miles => {
 if (miles < 15) {
   return "Short distance";
 } else {
   return "Long distance";
 }
};

Observe que o corpo da função está entre colchetes e usamos o return.

E esse é o ponto: se você usar colchetes, precisará usar explicitamente a return palavra - chave.

Objetos e funções de seta

Há mais uma nuance de sintaxe a saber: coloque o corpo da função entre parênteses quando desejar retornar uma expressão literal do objeto .

const f = () => ({
 city:"Boston"
})
console.log(f().city)

Sem os parênteses, obtemos um erro.

const f = () => {
   city:"Boston"
}
//Result: error

Concluindo

Vimos que as arrow funcitons permitem uma variedade grade de formas de escrever. É importante conhecer todas elas, e usá-las apropriadamente em seus projetos.

Se você achou a sintaxe das arrow functions um pouco confusa, não estará sozinho. Leva algum tempo para se familiarizar com isso. Mas estar ciente de suas opções e requisitos são etapas nessa direção.

Vou fincando por aqui, forte abraço e até o próximo post!