Funções Seta (Arrow Functions)
Faiçal Carvalho
Posted on October 16, 2019
Uma notação especial para definir funções
A partir de 2015, JavaScript passou a ter as funções-seta - em inglês, arrow functions.
Trata-se de uma notação especial para definir funções. Nessa notação não aparece a palavra função
, e você não dá um nome à função. As funções-seta são anônimas.
Elas são sempre usadas como expressões, e podem, por exemplo, da mesma forma que as funções tradicionais, ser atribuídas a uma variável:
seja max = (n1, n2) => {
se (n1 > n2)
retornar n1
retornar n2
}
Esse exemplo mostra uma função-seta sendo atribuída a uma variável chamada max
.
A definição de uma expressão representando uma função-seta começa com a lista de parâmetros da função. Nesse exemplo, a função tem dois parâmetros - n1
e n2
. Eles aparecem entre parênteses.
Em seguida, depois da lista de parâmetros, aparece a seta. Ela é representada pelos caracteres =
e >
, um seguido do outro: =>
.
Depois da seta, vem o bloco da função, entre chaves: {
e }
. Na definição dos comandos da função, não há restrições nem diferenças entre uma função-seta e uma função tradicional.
Há um detalhe: nos comandos de uma função-seta, a referência ao identificador
este
- em inglês,this
- é tratada de forma especial, diferente da forma como essa referência é tratada numa função regular. Mas isso é outro assunto, sobre o qual trataremos em outra oportunidade.
Caso a função tenha apenas um parâmetro, os parênteses do início podem ser omitidos. Por exemplo:
seja duplicar = n => {
retornar n * 2
}
Nesse exemplo, a função-seta está sendo atribuída a uma variável duplicar
. Observe que o parâmetro n
não aparece entre parênteses.
Uma função-seta pode também não ter parâmetros. Nesse caso, é necessário começar a definição com uma lista de parâmetros vazia, ()
. Por exemplo:
seja jogarDado = () => {
retornar Mat.piso(Mat.aleatório() * 6) + 1
}
Quando o código da função-seta consiste apenas em retornar o resultado de uma expressão, a notação pode ficar ainda mais concisa, sem a necessidade do abre e fecha chave. Basta colocar diretamente após a seta a expressão retornada. Por exemplo:
seja duplicar = n => n * 2
Nesse exemplo, a função-seta tem um parâmetro, n
, e retorna o resultado da expressão n * 2
. Funcionalmente, essa implementação da função duplicar
é exatamente igual à anterior, que usa o bloco entre chaves e o comando retornar
.
O objetivo dessa notação é justamente esse: permitir a definição de funções de forma concisa.
A aplicação das funções-seta é bem expressiva, por exemplo, quando usada nos métodos associados às listas. Vários deles recebem como argumento uma função que é chamada para cada elemento da lista. Usar uma função-seta como argumento desses métodos possibilita notações interessantes.
Vamos ver alguns exemplos. Vamos tomar como base a seguinte lista:
seja carros = [
{ marca: 'Renault', modelo: 'Kwid', câmbio: 'automático' },
{ marca: 'Fiat', modelo: 'Mobi Evo', câmbio: 'manual' },
{ marca: 'Chevrolet', modelo: 'Onix', câmbio: 'manual' }
]
carros
é, portanto, uma lista de objetos, cada um contendo as propriedades marca
, modelo
e câmbio
.
Vamos mostrar, então, uma forma de usar, por exemplo, o método encontrar
, que pode ser usado em listas. Nesse caso, vamos usá-lo para obter o primeiro carro da lista que tem câmbio manual.
seja câmbioManual = carros.encontrar(carro => carro.câmbio === 'manual')
// câmbioManual = { marca: "Fiat", modelo: "Mobi Evo", câmbio: "manual" }
A função encontrar
recebe como argumento uma função que retorna sim
ou não
. Essa função é chamada para cada elemento da lista. Nesse exemplo, cada elemento fica representado pelo parâmetro carro
. Quem chama essa função repetidas vezes é o mecanismo interno da função encontrar.
Assim que a função-seta retornar sim
(ou verdadeiro
), a função encontrar
termina imediatamente, e retorna o valor do elemento da lista para o qual a função retornou sim
. No nosso exemplo, esse valor está sendo atribuído à variável câmbioManual
.
Outro exemplo: com base nessa lista carros, vamos criar uma nova lista, na qual cada elemento será o texto correspondente ao modelo do carro. Para isso, a melhor alternativa é usar o método mapear
.
seja modelos = carros.mapear(carro => carro.modelo)
// modelos = ["kwid", "Mobi Evo", "Onix"]
O método mapear
retorna uma nova lista. Para cada elemento da lista original, a nova lista terá um elemento cujo valor - de acorodo com o código desse exemplo - corresponde ao texto com a propriedade modelo
de cada carro.
Na classe Lista
- em inglês Array
-, há vários outros métodos semelhantes a esses. Em outra oportunidade vamos tratar desse assunto com mais detalhes. O objetivo hoje foi introduzir essa notação especial para definir funções como funções-seta.
Posted on October 16, 2019
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.