JavaScript Funções Básico
map, filter e reduce
Os métodos map, filter e reduce são ferramentas poderosas para processar arrays em JavaScript. Eles permitem transformar, filtrar e agregar dados de forma declarativa, sem usar loops explícitos como for ou while. Isso torna o código mais legível e menos propenso a erros.
map: cria um novo array aplicando uma função a cada elemento do array original. O novo array tem o mesmo comprimento do original.filter: cria um novo array contendo apenas os elementos que passam em um teste (função que retornatrueoufalse).reduce: reduz o array a um único valor (número, string, objeto, etc.) aplicando uma função acumuladora da esquerda para a direita.
Esses métodos podem ser encadeados: o resultado de um map pode ser filtrado com filter, e o resultado pode ser reduzido com reduce. Além disso, find e some são úteis para buscar um elemento específico ou verificar se algum elemento satisfaz uma condição.
Todos esses métodos recebem uma função de callback que é chamada para cada elemento. A callback pode receber até três argumentos: o elemento atual, o índice e o array original. Para reduce, a callback também recebe o acumulador. É importante lembrar que map e filter não modificam o array original; eles retornam novos arrays.
Pontos-chave
maptransforma cada elemento e retorna um novo array de mesmo tamanho.filterseleciona elementos com base em uma condição e retorna um novo array.reduceagrega todos os elementos em um único valor usando um acumulador.- É possível encadear
map,filterereducepara processar dados em etapas. findretorna o primeiro elemento que satisfaz a condição, esomeverifica se pelo menos um elemento satisfaz.
// Exemplo prático: processar uma lista de produtos
const produtos = [
{ nome: 'Camiseta', preco: 50, quantidade: 2 },
{ nome: 'Calça', preco: 120, quantidade: 1 },
{ nome: 'Tênis', preco: 200, quantidade: 1 },
{ nome: 'Boné', preco: 30, quantidade: 3 }
];
// 1. map: criar array com nomes dos produtos
const nomes = produtos.map(produto => produto.nome);
console.log('Nomes:', nomes);
// 2. filter: produtos com preço acima de 80
const caros = produtos.filter(produto => produto.preco > 80);
console.log('Caros:', caros.map(p => p.nome));
// 3. reduce: calcular valor total do estoque (preco * quantidade)
const totalEstoque = produtos.reduce((acumulador, produto) => {
return acumulador + (produto.preco * produto.quantidade);
}, 0);
console.log('Total do estoque: R$', totalEstoque);
// 4. encadeamento: nomes dos produtos caros em maiúsculas
const nomesCarosMaiusculos = produtos
.filter(produto => produto.preco > 80)
.map(produto => produto.nome.toUpperCase());
console.log('Nomes caros em maiúsculas:', nomesCarosMaiusculos);
// 5. find: encontrar o primeiro produto com quantidade > 1
const primeiroComEstoque = produtos.find(produto => produto.quantidade > 1);
console.log('Primeiro com mais de 1 unidade:', primeiroComEstoque.nome);
// 6. some: verificar se há algum produto com preço < 40
const temBarato = produtos.some(produto => produto.preco < 40);
console.log('Tem produto barato?', temBarato);