Aprenda / JavaScript do zero

FundamentosAula 4 de 1618 min0% da trilha

Arrays e seus métodos

map, filter e reduce — os três métodos que substituem quase todo loop manual sobre array.

Quase toda vez que você pensaria em escrever um for pra transformar, filtrar ou somar um array, existe um método pronto — mais curto e mais claro sobre a intenção do código.

map — transforma cada item, devolve um array do mesmo tamanho

const precos = [10, 20, 30];
const comDesconto = precos.map((preco) => preco * 0.9);
// [9, 18, 27] — mesmo tamanho, cada item transformado

filter — mantém só os itens que passam num teste

const produtos = [
  { nome: "Teclado", preco: 250 },
  { nome: "Mouse", preco: 80 },
  { nome: "Monitor", preco: 900 },
];

const caros = produtos.filter((produto) => produto.preco > 100);
// [{ nome: "Teclado", ... }, { nome: "Monitor", ... }] — Mouse ficou de fora

reduce — junta tudo num valor só

const precos = [10, 20, 30];
const total = precos.reduce((acumulador, precoAtual) => acumulador + precoAtual, 0);
// 0 é o valor inicial do acumulador; a cada item, soma e segue
// total = 60

reduce é o mais poderoso e o mais confuso no começo: pense nele como "eu tenho uma caixa (acumulador) que começa com um valor, e cada item do array pode mudar o que está na caixa."

Encadeando os três

const produtos = [
  { nome: "Teclado", preco: 250 },
  { nome: "Mouse", preco: 80 },
  { nome: "Monitor", preco: 900 },
];

const totalDosCaros = produtos
  .filter((p) => p.preco > 100)   // tira o Mouse
  .map((p) => p.preco)             // vira [250, 900]
  .reduce((total, preco) => total + preco, 0); // 1150

Outros que valem conhecer

[1, 2, 3].find((n) => n > 1);        // 2 — primeiro item que passa no teste
[1, 2, 3].some((n) => n > 2);        // true — algum item passa?
[1, 2, 3].every((n) => n > 0);       // true — TODOS os itens passam?
[1, 2, 3].includes(2);                // true — o array contém esse valor?

Exercício

Dado const nomes = ["ana", "bia", "caio"], produza um novo array com cada nome capitalizado (["Ana", "Bia", "Caio"]) usando map.

Quiz rápido

Qual método usar pra manter só os itens de um array que passam num teste?
O que o segundo argumento de reduce (o '0' no exemplo) representa?