Você sabe o que é uma arrow function em JavaScript? Se não sabe e o nome parece um pouco intimidador, vou adiantando que é algo bem simples e tranquilo de se entender 😁 .
Um dos objetivos de uma arrow function é deixar a função mais simples, mais curta. Veja o exemplo de uma função sem arrow function:
const double = function (x) {
return 2 * x
}
// Função clássica, sem armazenar em uma constante.
function double (x) {
return 2 * x
}
Agora vamos ver com ela implementada:
const double = (x) => {
return 2 * x
}
Se você der um console.log(double(Math.PI)); // console.log(multiply(Math.PI));
nas duas funções, a sem e com arrow function o resultado será o mesmo. Conforme a imagem:
Então a expressão com a seta => está representando function. Os parênteses (x), é por onde a função recebe os seus argumentos ( do mesmo modo que na function ). E obviamente que temos as chaves {}, que representa o corpo da função.
Mas podemos deixar mais curta ainda a nossa arrow function. Podemos passar com o retorno implícito. Como assim? Veja o exemplo abaixo:
const multiply = (x) => 3 * x
Veja que neste caso o return não está presente, pois ele está sendo passado de forma implícita, quando nós retiramos o corpo da função o return está sendo inferido. Além disso estamos passando o x dentro do parênteses mas poderíamos deixar sem, já que a função só tem um argumento. Mas isso fica de sua preferencia. Obviamente se a sua função tiver mais de um argumento como (x, y) é obrigatório passar ela dentro do parênteses. Ok?
É importante lembrar que a sintaxe do exemplo é válida para qualquer tipo de dado, mas quando trabalhamos com objetos não podemos fazer dessa maneira, pois a anotação (sintaxe) usada para objetos é {}. Então como ficaria uma arrow function com retorno implícito quando eu estiver trabalhando com objetos?
Veja o exemplo abaixo, com o return explicito e implícito na função:
// return explicito
const jedi = () => {
return {
name: 'Obi-Wan-Kenobi',
hierarchical: 'Jedi Master'
}
}
// return implícito
const jedi = () => ({
name: 'Luke Skywalker',
hierarchical: 'Jedi Master'
})
Notou a diferença? Apenas tivemos que envolver em um parênteses o objeto. Mas por que tivemos que fazer isso?
Utilizamos parênteses para dar a prioridade na execução de alguma expressão, então resumindo é que toda a expressão dentro do parênteses é o que será retornado pela nossa função const jedi. Então lembre sempre que se quiser retornar um objeto de maneira implícita utilizando de arrow function é preciso envolver o objeto por parênteses ({}).
Outra ponto que devemos nos atentar é que a função arrow é uma função anônima, não é possível dar um nome como fazemos com uma função clássica. Se você desejar chamar ela depois para realizar um map, filter, reduce ou dentro de outra função especifica, você precisa declarar ela dentro de uma variável como let ou const. Mas por que precisamos fazer isso? Veja o exemplo abaixo:
const starwars = ['Anakin', 'Skywalker', 'Obi', 'Wan', 'Kenobi']
const firstLetter = text => text
const letter = starwars.map(firstLetter)
console.log(letter)
Veja que no exemplo estamos utilizando uma arrow function armazenada na constante firstLetter. Se eu retirar o const e deixar apenas firstLetter = text => text veja o resultado no terminal:
O erro nos diz tudo, não estamos definindo firstLetter, pois se quisermos utilizar ela, precisamos armazenar ela em memoria utilizando de uma variável. Por isso nunca se esqueça de sempre armazenar arrow functions dentro de variáveis. Como já é de se esperar, se armazenarmos isso dentro de uma const o código vai funcionar perfeitamente:
Existem mais coisas a se estudar e entender em arrow functions, mas aos poucos vamos nos aprofundando, é importante ir entendendo conceito por conceito, para que nada fique confuso. Mas o que foi abordado aqui é muito importante e vai te ajudar a entender com mais facilidade as sintaxes de códigos JS quando estiver em um ambiente de trabalho.
Agradeço por ler até o final, caso tenha alguma dúvida ou sugestão entre em contato comigo pelo LinkedIn ou deixe um comentário. Muito obrigado e até o próximo post! 😉