Arrow function Javascript

Introdução

A arrow function foi introduzida no ES6 e basicamente deixa a função padrão do Javascript com uma escrita mais curta.

Esta feature implementou algumas funcionalidades para deixar a escrita de uma função padrão mais sucinta.

Atualmente este recurso está sendo muito utilizado, principalmente pela sua praticidade na escrita.

Função normal x arrow function

Veja um exemplo de função comum e um de arrow function para observar algumas diferenças entre elas:

//função normal
let soma = function (a, b) {
  return a + b;
};
console.log(soma(2, 3)); //5

//arrow function
let soma = (a, b) => {
  return a + b;
};
console.log(soma(3, 3)); //6

Com essas duas já é possível observar as diferenças de sintaxe.

O primeiro ponto é que não é necessário utilizar a palavra reservada function, antes dos parênteses, agora já está implícito que o que está sendo declarado é uma função.

Outra coisa é que com ela é necessário colocar uma seta, e depois a chave para indicar a abertura da função.

Em primeira vista, pode ser que não mudou muita coisa, mas com a arrow function é possível escrever este código em apenas uma linha.

Retorno implícito

Com este método de escrita, é possível escrever uma função em uma linha.

Quando uma função, é criada e ela só irá retornar um valor resultante de algum cálculo ou algum processamento único, da para criar a função e colocar somente este processamento.

Ao colocar somente este processamento dentro da função, ela entende que este valor deve ser retornado, então ela o retorna implicitamente, veja o exemplo:

let soma = (a, b) => a + b;
console.log(soma(4, 3)); //7

Dessa forma o a + b será retornado automaticamente, porque é implícito que a função deve fazer isso.

E este é um outro benefício da arrow function, não é necessário colocar a palavra reservada return, caso a função tenha somente uma linha.

Função com um parâmetro

Caso a função tenha somente um parâmetro, é possível passar esse parâmetro sem o parênteses, veja:

let saudacao = nome => {
  return `Olá ${nome}, seja bem vindo!`;
};
console.log(saudacao("João"));

Nesse caso o parâmetro é o nome, e ele não é passado entre parênteses, é só passado após o igual e antes da flecha, e funciona normalmente dentro da função.

Eu particularmente prefiro sempre utilizar os parênteses, mesmo que tenha um parâmetro só, para mim, isso me ajuda a bater o olho e identificar que é um parâmetro.

Função sem parâmetros

Caso a função não tenha parâmetros, é possível declarar isso de duas formas, primeira é utilizando os parênteses vazio, e a outra é colocar um underline para indicar que não existe parâmetros.

//arrow function sem parâmetros 1
let saudacao = () => {
    return `Seja bem vindo!`;
};
console.log(saudacao("João"));

//arrow function sem parâmetros 2
let saudacao = _ => {
    return `Seja bem vindo!`;
};
console.log(saudacao("João"));

Utilizando em conjunto com outras funções (map)

É muito comum utilizar esse tipo de função, combinado com outras, que antes também era utilizado a função tradicional.

Uma função dessas é o map, que é utilizado para percorrer objetos, a função que executa o map, pode ser uma arrow function.

//arrow function com map
let pessoas = ['Joao', 'Maria', 'Paulo'];
pessoas.map(pessoa => {
    console.log(pessoa);
});

Neste caso, o parâmetro é pessoa, e tem a arrow function que faz a execução de um processamento, nesse caso é só um console.log, porém poderia conter qualquer outra lógica.

Vídeo

Código fonte

O código fonte dos exemplos estão no meu CodeSandbox

Para ver outros canais onde o posto conteúdo e meu Github, veja os Links do Programando Soluções.

Aprenda a testar Aplicações Javascript

Referências

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Functions/Arrow_functions

https://www.w3schools.com/js/js_arrow_function.asp