//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; outros não. Alguns usam colchetes e os return palavra chave; outros não. Um abrange até várias linhas, enquanto os outros consistem em uma única linha.
Curiosamente, quando invocamos as funções de seta acima com o mesmo argumento, obtemos o mesmo resultado.
console.log(addTwo(2));
//Result: 4
Como você sabe qual sintaxe da função de seta usar? É isso que este artigo descobrirá: como declarar uma função de seta.
Uma grande diferença
As funções de seta são outra maneira – mais concisa – de escrever expressões de função.
//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 os mesmos argumentos, obtemos o mesmo resultado.
console.log(addNumbers(1, 2));
//Result: 3
As funções de seta não têm sua própria ligação com o this palavra-chave Há também uma importante diferença sintática a ser observada: as funções de seta usam a seta => ao invés de function palavra-chave
Mas há outras diferenças a serem observadas quando você escreve funções de seta, e é isso que exploraremos a seguir.
Parênteses
Algumas funções de seta 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 função de seta determina se precisamos ou não incluir parênteses.
Uma função de seta com zero parâmetros requer parênteses.
const hello = () => "hello";
console.log(hello());
//Result: "hello"
Uma função de seta com um parâmetro faz não exigem 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 função de seta ainda funciona.
const addTwo = (num) => num + 2;
console.log(addTwo(2));
//Result: 4
Uma função de seta com vários parâmetros requer parênteses.
const addNums = (num1, num2) => num1 + num2;
console.log(addNums(1, 2));
//Result: 3
As funções de seta também suportam parâmetros de descanso e desestruturação. Ambos os recursos exigem parênteses.
Este é um exemplo de uma função de seta com um parâmetro de descanso.
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 de descanso 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 temos as regras de parênteses cobertas, vamos passar para o corpo da função de uma função de seta.
Um corpo de função de seta pode ter um “Corpo conciso” ou “corpo de bloco”. O tipo de corpo influencia se precisamos ou não usar o Retorna palavra-chave e colchetes.
Primeiro, a sintaxe do “corpo conciso”.
const addTwo = a => a + 2;
A sintaxe do “corpo conciso” é exatamente isso: é conciso! Observe que não usamos o return palavra-chave ou colchetes. O valor é implicitamente devolvida.
Se o corpo da função da seta contiver uma expressão, ou seja, produzir um valor, você poderá omitir o return palavra-chave e os colchetes. É por isso que nenhum dos dois está incluído no exemplo acima.
Agora, vejamos a sintaxe “bloquear corpo”.
const multiNums = (a, b) => {return a * b;};
Observe que usamos ambos colchetes e os return palavra-chave Aqui está o ponto: se você usar colchetes, precisará explicitamente use o return palavra-chave
Funções de seta multilinha
Vimos muitos exemplos de funções de seta de linha única. Mas as funções de seta também podem abranger várias linhas.
const totalDistance = miles => {
if (miles < 15) {
return "Short distance";
} else {
return "Long distance";
}
};
Observe o corpo da função: ele está entre colchetes. Esse é um ponto importante: quando uma função de seta tem mais de uma linha, o corpo da função deve estar entre colchetes.
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 um 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
Se você acha a sintaxe da função da seta um pouco confusa, não está sozinho. Leva algum tempo para se familiarizar com isso. Mas estar ciente de suas opções e requisitos são etapas nessa direção.
Escrevo sobre aprender a programar e as melhores maneiras de fazer isso (amymhaddad.com)