Funções Arrow - 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.

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.

Passagem de 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