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:
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")
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")
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:
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")
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.
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")
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:
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")
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.
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")
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:
- Uma função reducer que especifica como o valor acumulado deve ser atualizado com o valor atual;
- 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ávelnewTotal.
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.
Top comments (0)