DEV Community

Cover image for Funções Seta (Arrow Functions)
Faiçal Carvalho for Programe com Faiçal e Conrado

Posted on • Originally published at programecomfaicaleconrado.com

Funções Seta (Arrow Functions)

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.

Top comments (0)