Funções Seta (Arrow Functions)
Tags: javascript, webdev, ptbr, timus
Published: 2019-10-16 13:22:07

## 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:

<div class="highlight"><pre class="highlight javascriptbr"><code><span class="kd">seja</span> <span class="nx">max</span> <span class="o">=</span> <span class="p">(</span><span class="nx">n1</span><span class="p">,</span> <span class="nx">n2</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
    <span class="kd">se</span> <span class="p">(</span><span class="nx">n1</span> <span class="o">></span> <span class="nx">n2</span><span class="p">)</span>
        <span class="kd">retornar</span> <span class="nx">n1</span>
    <span class="kd">retornar</span> <span class="nx">n2</span>
<span class="p">}</span></code></pre></div>

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:

<div class="highlight"><pre class="highlight javascriptbr"><code><span class="kd">seja</span> <span class="nx">duplicar</span> <span class="o">=</span> <span class="nx">n</span> <span class="o">=></span> <span class="p">{</span>
    <span class="kd">retornar</span> <span class="nx">n</span> <span class="o">*</span> <span class="mi">2</span>
<span class="p">}</span></code></pre></div>

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:

<div class="highlight"><pre class="highlight javascriptbr"><code><span class="kd">seja</span> <span class="nx">jogarDado</span> <span class="o">=</span> <span class="p">(</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
    <span class="kd">retornar</span> <span class="nx">Mat</span><span class="p">.</span><span class="nx">piso</span><span class="p">(</span><span class="nx">Mat</span><span class="p">.</span><span class="nx">aleatório</span><span class="p">(</span><span class="p">)</span> <span class="o">*</span> <span class="mi">6</span><span class="p">)</span> <span class="o">+</span> <span class="mi">1</span>
<span class="p">}</span></code></pre></div>

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:

<div class="highlight"><pre class="highlight javascriptbr"><code><span class="kd">seja</span> <span class="nx">duplicar</span> <span class="o">=</span> <span class="nx">n</span> <span class="o">=></span> <span class="nx">n</span> <span class="o">*</span> <span class="mi">2</span></code></pre></div>

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:

<div class="highlight"><pre class="highlight javascriptbr"><code><span class="kd">seja</span> <span class="nx">carros</span> <span class="o">=</span> <span class="p">[</span>
    <span class="p">{</span> <span class="nx">marca</span><span class="p">:</span> <span class="s1">'Renault'</span><span class="p">,</span> <span class="nx">modelo</span><span class="p">:</span> <span class="s1">'Kwid'</span><span class="p">,</span> <span class="nx">câmbio</span><span class="p">:</span> <span class="s1">'automático'</span> <span class="p">}</span><span class="p">,</span>
    <span class="p">{</span> <span class="nx">marca</span><span class="p">:</span> <span class="s1">'Fiat'</span><span class="p">,</span> <span class="nx">modelo</span><span class="p">:</span> <span class="s1">'Mobi Evo'</span><span class="p">,</span> <span class="nx">câmbio</span><span class="p">:</span> <span class="s1">'manual'</span> <span class="p">}</span><span class="p">,</span>
    <span class="p">{</span> <span class="nx">marca</span><span class="p">:</span> <span class="s1">'Chevrolet'</span><span class="p">,</span> <span class="nx">modelo</span><span class="p">:</span> <span class="s1">'Onix'</span><span class="p">,</span> <span class="nx">câmbio</span><span class="p">:</span> <span class="s1">'manual'</span> <span class="p">}</span>
<span class="p">]</span></code></pre></div>

`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.

<div class="highlight"><pre class="highlight javascriptbr"><code><span class="kd">seja</span> <span class="nx">câmbioManual</span> <span class="o">=</span> <span class="nx">carros</span><span class="p">.</span><span class="nx">encontrar</span><span class="p">(</span><span class="nx">carro</span> <span class="o">=></span> <span class="nx">carro</span><span class="p">.</span><span class="nx">câmbio</span> <span class="o">===</span> <span class="s1">'manual'</span><span class="p">)</span>

<span class="c1">//  câmbioManual = { marca: "Fiat", modelo: "Mobi Evo", câmbio: "manual" }</span></code></pre></div>

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`.

<div class="highlight"><pre class="highlight javascriptbr"><code><span class="kd">seja</span> <span class="nx">modelos</span> <span class="o">=</span> <span class="nx">carros</span><span class="p">.</span><span class="nx">mapear</span><span class="p">(</span><span class="nx">carro</span> <span class="o">=></span> <span class="nx">carro</span><span class="p">.</span><span class="nx">modelo</span><span class="p">)</span>

<span class="c1">//  modelos = ["kwid", "Mobi Evo", "Onix"]</span></code></pre></div>

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**.