Veja nesse artigo
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