JS map(), filter() e reduce() em React
Tags: javascript, react, beginners, webdev
Published: 2023-01-04 00:59:13

**Map**, **Filter** e **Reduce** são funções de alta ordem que são amplamente utilizadas em aplicações JavaScript, incluindo aplicações React.

**Map** é usado para iterar sobre um array e transformar cada elemento do array em alguma outra coisa.

**Filter** é usado para iterar sobre um array e remover elementos que não atendem a um determinado critério.

**Reduce** é usado para iterar sobre um array e reduzi-lo a um único valor, com base em uma função de acumulação fornecida.

Essas funções são muito úteis quando se deseja realizar transformações ou operações em conjuntos de dados, pois permitem fazer isso de maneira concisa e legível. Elas também são muito populares no React devido ao seu uso em conjunto com o paradigma de programação funcional, que é amplamente utilizado no React.

No React, essas funções são usadas principalmente para se trabalhar com componentes baseados em dados, já que é comum precisar exibir ou manipular dados provenientes de fontes externas em aplicações web.

---

# Map()

**Map** é uma função de **alta ordem** que itera sobre um array e aplica uma função de transformação a cada elemento do array. Ela retorna um novo array com os elementos transformados.

A sintaxe da função `map` é a seguinte:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ip6pznle3d4o82zd9odo.png)

No React, a função `map` é muito utilizada para renderizar elementos de lista. Por exemplo, digamos que você tenha um array com uma lista de nomes e deseja exibi-los em um componente de lista. Você pode usar a função `map` para iterar sobre esse array e retornar um array de elementos `JSX` para cada nome:
_`(Acompanhe em "Show files>src>App.jsx")`_
{% embed https://replit.com/@MarceloPetry/map-Names-List-React?v=1 %}

Neste exemplo, a função `map` itera sobre o array de posts e retorna um elemento `<li>` para cada nome. Cada elemento é preenchido com o nome e é dado uma `key` única com base no próprio nome.

Outra forma muito empregada de `map` em React é na iteração sobre um **array de objetos**. No exemplo abaixo, a função `map` é usada em um componente React para renderizar uma lista de produtos com seus nomes e preços:
_`(Acompanhe em "Show files>src>App.jsx")`_

{% embed https://replit.com/@MarceloPetry/map-Products?v=1 %}

1 - A função `App` é um componente React que renderiza uma lista de produtos;

2 - Dentro da função `App`, uma constante chamada `products` é declarada com um array de objetos, cada um representando um produto com um ID, nome, preço e emoji;

3 - A função `App` retorna um elemento `<ul>` que contém uma lista de elementos `<li>`;

4 - A função `map()` é usada para percorrer cada item no array `products` e retornar um elemento `<li>` para cada um; O argumento da função `map()` é uma função anônima que recebe um parâmetro `product` e retorna o elemento `<li>` para esse produto;

5 - O elemento `<li>` retornado pelo `map()` inclui um elemento `<div>` com a classe "card" que contém informações sobre o produto, incluindo o emoji, o nome e o preço;

6 - O atributo `key` é usado para identificar de forma única cada elemento `<li>` e é importante para otimizar o desempenho do React;

7 - O atributo `style` é usado para remover o marcador padrão dos elementos `<li>` e substituí-lo por um estilo `list-style-type: none`;

8 - A função `App` é exportada para ser usada em outro arquivo.

É importante notar que cada elemento gerado pelo map deve ter uma propriedade `key` única, pois isso é necessário para o React realizar **otimizações de performance** em sua renderização.

---

#Filter()

`Filter()` é uma função de array que permite filtrar elementos de um array baseado em um determinado critério. No contexto do React, você pode usar a função `filter()` para filtrar elementos de um array de dados antes de renderizá-los em uma lista.

A sintaxe da função `filter()` é a seguinte:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkynj48nagqt5f2zlqlv.png)

O primeiro argumento da função `filter()` é uma função de callback que é chamada para cada elemento do array. Essa função de callback deve retornar `true` se o elemento atual deve ser incluído no novo array ou `false` se o elemento atual deve ser ignorado.

O segundo argumento opcional da função `filter()` é o valor de `this` a ser usado dentro da função de callback.

Veja na prática com um simples exemplo abaixo, no qual utilizamos a função `filter()` para retornar somente as pessoas maiores de idade em uma lista:
_`(Acompanhe em "Show files>src>App.jsx")`_
{% embed https://replit.com/@MarceloPetry/filter-Age?v=1 %}

O código mostra uma lista de pessoas, com seus respectivos nomes e idades. A função `filter()` é utilizada para selecionar apenas as pessoas que são maiores de 18 anos. Isso é feito através da verificação da idade de cada pessoa, e aquelas que possuem idade maior ou igual a 18 são adicionadas em um novo array, que é chamado de "maiores".

Em seguida, a função `map()` é usada para renderizar cada pessoa selecionada pelo `filter()`. Cada pessoa é mostrada em um elemento `<li>` dentro de uma lista `<ul>`, e cada `<li>` possui um elemento `<div>` com a classe `card`. Dentro do `<div>`, há um título com o nome da pessoa e um parágrafo com sua idade.
<br>
Abaixo, usamos o mesmo exemplo da lista de produtos em `map()`, porém, para filtrar somente os produtos com preço maior ou igual ao definido pelo usuário com no `input`:
_`(Acompanhe em "Show files>src>App.jsx")`_
{% embed https://replit.com/@MarceloPetry/Filter-with-Products?v=1 %}

1 - O componente `App` importa o módulo `useState` do React, que permite gerenciar o estado de um componente;

2 - A constante `valor` e a função `setValor` são criadas pelo useState, que inicialmente possui o valor "";

3 - A constante `products` é criada com um array de objetos que representam produtos. Cada produto possui um id, nome, preço e emoji;

4 - A constante `expensiveProducts` é criada pelo método filter(), que recebe como parâmetro uma função anônima que possui um argumento `product`. Esse argumento representa cada produto do array `products` e a função verifica se o preço desse produto é maior ou igual ao valor atual de `valor`. Os produtos que passam nessa verificação são adicionados em `expensiveProducts`;

5 - O componente App possui um input que é vinculado ao estado `valor` através do atributo `value` e da função `onChange`. Quando o usuário digita algo no input, o estado `valor` é atualizado com o novo valor digitado;

6 - A lista `ul` é renderizada com a função `map()`, que recebe como parâmetro uma função anônima que possui um argumento `product`. Esse argumento representa cada produto de `expensiveProducts` e a função retorna um elemento `li` com uma div `card` que possui o emoji, nome e preço do produto;

7 - O componente `App` é exportado para ser utilizado em outro lugar da aplicação.

---

# Reduce()

O método `reduce()` é uma função de alta ordem que recebe um **acumulador** e um **valor atual** como argumentos e **retorna um único valor**. É aplicado ao React para agregar todos os elementos de um array em um único elemento.

Aqui está a sintaxe básica da função `reduce`:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mso622yq0deyrknuvfam.png)
O valor inicial é opcional e é o valor inicial do acumulador. Se não for fornecido, o primeiro elemento do array será usado como valor inicial.

Para entender melhor o funcionamento dessa função, veja o exemplo abaixo:
_`(Acompanhe em "Show files>src>App.jsx")`_
{% embed https://replit.com/@MarceloPetry/reduce-accumulator?v=1 %}

No código acima, a função `App()` é um componente React que retorna um elemento `<>` que contém dois elementos `<p>`. O primeiro elemento `<p>` exibe uma string estática e o segundo elemento `<p>` exibe o resultado da soma dos elementos de um array de números inteiros.

O array de números é declarado como uma constante chamada `numbers` e é inicializada com os valores 1, 2, 3, 4 e 5. A soma dos elementos do array é calculada usando a função `reduce()` e armazenada na constante `sum`.

A função `reduce()` é chamada no array `numbers` e recebe como argumento uma função de acumulação que soma o acumulador atual (`accumulator`) com o valor atual da iteração (`currentValue`). O valor inicial do acumulador é 0.

A função `reduce()` itera sobre todos os elementos do array `numbers` e retorna o valor total, que é armazenado na constante `sum`.

Por fim, o componente `App` é exportado para ser usado em outros locais do projeto. Quando o componente é renderizado, os elementos `<p>` são exibidos na tela, exibindo a string estática e o resultado da soma dos elementos do array.
<br>
Vamos avançar um pouco mais?
No próximo exemplo, utilizamos a função `reduce()` com React hooks para calcular o preço total dos itens em um carrinho de compras:
_`(Acompanhe em "Show files>src>App.jsx")`_
{% embed https://replit.com/@MarceloPetry/Reduce-ex2?v=1 %}

O código acima é uma implementação de um carrinho de compras em React.
Ele permite que o usuário adicione ou remova itens do carrinho e exibe o valor total do carrinho.
Ele começa importando alguns módulos e criando uma função `App`, que é o componente principal. Dentro da função `App`, são declaradas duas variáveis de estado: `cart` e `total`. `cart` é um array de objetos que representam itens adicionados ao carrinho de compras e `total` é um número que representa o valor total do carrinho.
O hook `useEffect` é então usado para definir um efeito que será executado sempre que o valor de `cart` for atualizado. O efeito consiste em chamar a função `reduce()` em `cart` para calcular o valor total do carrinho. O valor total é então atualizado usando a função `setTotal`.

O código percorre cada item do carrinho (representado por `currentValue`) e acumula o valor total (representado por `accumulator`) usando a fórmula `accumulator + currentValue.price * currentValue.quantity`. Isso significa que o valor total é a soma dos preços dos itens multiplicados pela quantidade de cada item.
A função `reduce()` é chamada com dois argumentos:
1. Uma função reducer que especifica como o valor acumulado deve ser atualizado com o valor atual;
2. Um valor inicial para o acumulador. No código acima, o valor inicial é 0.
Quando a função `reduce()` é chamada, ela retorna o valor final acumulado após todos os elementos do array terem sido processados. Esse valor é então atribuído à variável `newTotal`.

O componente também define duas funções: `handleAddToCart` e `handleRemoveFromCart`. A função `handleAddToCart` é chamada quando o usuário clica em um dos botões "Adicionar" e adiciona o item correspondente ao carrinho de compras. Se o item já existir no carrinho, sua quantidade é atualizada. Caso contrário, um novo item é adicionado ao carrinho. A função `handleRemoveFromCart` é chamada quando o usuário clica no botão "Remover" e remove o item correspondente do carrinho.
Por fim, o componente renderiza uma lista de itens no carrinho, exibindo cada item com seu nome, preço e quantidade. Também é exibido o valor total do carrinho e os botões "Adicionar" para cada tipo de item.


Obrigado se você acompanhou até aqui! Espero que isso tenha ajudado a esclarecer a função reduce e o seu uso.

---

[marcelopetry.com](https://marcelopetry.com)