Funções Seta (Arrow Functions)

faicalcarvalho

Faiçal Carvalho

Posted on October 16, 2019

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.

💖 💪 🙅 🚩
faicalcarvalho
Faiçal Carvalho

Posted on October 16, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Funções Seta (Arrow Functions)
javascript Funções Seta (Arrow Functions)

October 16, 2019