Este artigo demonstra como usar efetivamente os métodos map() e filter() do JavaScript, individualmente e em combinação, para processamento eficiente de arrays. Exploraremos exemplos práticos para ilustrar seu poder e versatilidade na manipulação de dados.
Sumário
- JavaScript Map
- JavaScript Filter
- Encadeando Map e Filter
- Exemplo do Mundo Real: Filtragem de Produtos em E-commerce
- Conclusão
JavaScript Map
O método map() é uma função de ordem superior que itera sobre cada elemento em um array e aplica uma função de callback fornecida. Essa função transforma cada elemento, e map() retorna um novo array contendo os valores transformados. O array original permanece inalterado.
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2); // [2, 4, 6, 8, 10]
console.log(doubledNumbers);
console.log(numbers); // Array original inalterado
JavaScript Filter
O método filter() também itera sobre um array. No entanto, em vez de transformar elementos, ele inclui seletivamente elementos com base em uma condição definida por uma função de callback. A função de callback deve retornar true para incluir o elemento e false para excluí-lo. filter() retorna um novo array contendo apenas os elementos que satisfazem a condição.
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(number => number % 2 === 0); // [2, 4, 6]
console.log(evenNumbers);
Encadeando Map e Filter
O verdadeiro poder de map() e filter() é revelado quando eles são encadeados. Isso permite uma maneira concisa e eficiente de realizar manipulações de dados complexas. filter() é tipicamente aplicado primeiro para reduzir o array, seguido por map() para transformar os elementos restantes.
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenSquared = numbers
.filter(number => number % 2 === 0)
.map(number => number * number); // [4, 16, 36, 64, 100]
console.log(evenSquared);
Exemplo do Mundo Real: Filtragem de Produtos em E-commerce
Imagine um aplicativo de e-commerce. Temos um array de objetos de produto:
const products = [
{ name: "Camisa", price: 25, inStock: true, category: "roupas" },
{ name: "Calça", price: 40, inStock: false, category: "roupas" },
{ name: "Sapatos", price: 75, inStock: true, category: "calcados" },
{ name: "Chapéu", price: 15, inStock: true, category: "acessorios" },
{ name: "Jaqueta", price: 60, inStock: true, category: "roupas" }
];
Queremos exibir apenas os nomes dos itens de vestuário em estoque. Podemos alcançar isso elegantemente usando filter() e map():
const inStockClothingNames = products
.filter(product => product.inStock && product.category === "roupas")
.map(product => product.name);
console.log(inStockClothingNames); // ['Camisa', 'Jaqueta']
Conclusão
Combinar map() e filter() oferece uma abordagem poderosa e legível para manipulação de arrays em JavaScript. Esse estilo funcional promove código mais limpo, reduz a necessidade de loops verbosos e melhora a manutenção. Lembre-se que ambos os métodos retornam novos arrays, preservando a imutabilidade dos dados originais.