Funções Arrow em JavaScript

As funções arrow (arrow functions) permitem reduzir a definição de funções comuns. As funções arrow são definidas usando o operador =>, antes do qual os parâmetros da função são colocados entre parênteses e, após, o corpo da função propriamente dito.

(parâmetros) => ações_da_função;

Vamos começar com um exemplo de uma função primitiva comum que exibe uma mensagem no console:

function hello() {
  console.log("Hello");
}
hello(); // chamamos a função

Agora, vamos transformá-la em uma função arrow:

const hello = () => console.log("Hello");
hello();

Neste caso, a função arrow é atribuída à constante hello, através da qual podemos então chamar essa função.

Aqui não usamos parâmetros, então são especificados parênteses vazios () => console.log("Hello");

A seguir, podemos chamar a função pelo nome da variável.

Passando Parâmetros

Agora, vamos definir uma função arrow que aceita um parâmetro:

const print = (mes) => console.log(mes);

print("Hello www.programicio.com");
print("Welcome to JavaScript");

Aqui, a função arrow recebe um parâmetro mes, cujo valor é exibido no console do navegador.

Se a função arrow tem apenas um parâmetro, os parênteses ao redor da lista de parâmetros podem ser omitidos:

const print = (mes) => console.log(mes);

print("Hello www.programicio.com");
print("Welcome to JavaScript");

Outro exemplo, vamos passar dois parâmetros:

const sum = (x, y) => console.log("Sum =", x + y);

sum(1, 2); // Sum = 3
sum(4, 3); // Sum = 7
sum(103, 2); // Sum = 105

Retorno de Resultado

Para retornar um valor de uma função arrow, basta especificar o valor após a seta. Por exemplo, vamos definir uma função que retorna a soma de dois números:

const sum = (x, y) => x + y;

console.log(sum(1, 2)); // 3
console.log(sum(4, 3)); // 7
console.log(sum(102, 5)); // 107

Outro exemplo, vamos retornar uma string formatada:

const hello = (name) => `Hello, ${name}`;

console.log(hello("Tom")); // Hello, Tom
console.log(hello("Bob")); // Hello, Bob
console.log(hello("Frodo Baggins")); // Hello, Frodo Baggins

Neste caso, a função hello aceita um parâmetro name - um nome hipotético e cria com base nele uma mensagem de saudação.

Retorno de um Objeto

É importante destacar o caso em que uma função arrow retorna um objeto:

const user = (userName, userAge) => ({ name: userName, age: userAge });

let tom = user("Tom", 34);
let bob = user("Bob", 25);

console.log(tom.name, tom.age); // "Tom", 34
console.log(bob.name, bob.age); // "Bob", 25

O objeto também é definido usando chaves, mas é encapsulado em parênteses.

Função com Múltiplas Instruções

Nos exemplos acima, todas as funções arrow tinham apenas uma instrução. No entanto, se a função precisa realizar mais ações, elas, como em uma função comum, são encapsuladas em chaves:

const square = (n) => {
  const result = n * n;
  console.log(result);
};

square(5); // 25
square(6); // 36

E se precisar retornar o resultado, utiliza-se o operador return, como em uma função comum:

const square = (n) => {
  const result = n * n;
  return result;
};

console.log(square(5)); // 25

E se precisar retornar o resultado, utiliza-se o operador return, como em uma função comum:

const square = (n) => {
  const result = n * n;
  return result;
};

console.log(square(5)); // 25