JavaScript Academy · Aula

Transformação declarativa de dados

Transforme dados com map, filter e reduce.

Transformação declarativa de dados é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Declarativo vs. imperativo

O código imperativo diz HOW (laços, contadores, mutação). O código declarativo diz WHAT. Métodos de matriz como map, filter e reduce permitem descrever transformações sem laços manuais.

const nums = [1, 2, 3, 4];
const doubled = nums.map((n) => n * 2);
console.log(doubled); // [2, 4, 6, 8]

map: transformando cada elemento

map retorna uma nova matriz de mesmo tamanho, com cada elemento transformado pela sua função. A matriz original permanece intacta.

const names = ["ada", "bob"];
const upper = names.map((n) => n.toUpperCase());
console.log(upper); // ["ADA", "BOB"]
console.log(names); // unchanged

filter: mantendo alguns elementos

filter retorna uma nova matriz contendo apenas os elementos para os quais seu predicado retorna um valor considerado verdadeiro.

const nums = [1, 2, 3, 4, 5, 6];
const evens = nums.filter((n) => n % 2 === 0);
console.log(evens); // [2, 4, 6]

reduce: reduzindo a um valor

reduce transforma uma matriz em um único valor por meio da acumulação. Forneça um redutor e um valor inicial.

const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, n) => acc + n, 0);
console.log(sum); // 10

Encadeando operações

Como cada método retorna uma nova matriz, é possível encadeá-los em um fluxo de processamento legível, que pode ser lido de cima para baixo.

const nums = [1, 2, 3, 4, 5, 6];
const result = nums
  .filter((n) => n % 2 === 0)
  .map((n) => n * 10);
console.log(result); // [20, 40, 60]

Um fluxo de processamento realista

Combine filter, map e reduce para responder a uma pergunta sobre um conjunto de dados em uma única expressão.

const orders = [
  { item: "pen", price: 3, paid: true },
  { item: "ink", price: 8, paid: false },
  { item: "pad", price: 5, paid: true }
];
const paidTotal = orders
  .filter((o) => o.paid)
  .map((o) => o.price)
  .reduce((a, p) => a + p, 0);
console.log(paidTotal); // 8

Mapeando para novas estruturas

map pode reestruturar objetos, não apenas números. Projete cada registro nos campos relevantes.

const users = [{ id: 1, name: "Ada", age: 36 }];
const summary = users.map((u) => ({ id: u.id, label: u.name }));
console.log(summary); // [{ id: 1, label: "Ada" }]

reduce pode construir qualquer coisa

reduce não serve apenas para somas. Pode construir objetos, agrupar dados ou até reimplementar map e filter.

const words = ["a", "bb", "a", "ccc"];
const counts = words.reduce((acc, w) => {
  acc[w] = (acc[w] || 0) + 1;
  return acc;
}, {});
console.log(counts); // { a: 2, bb: 1, ccc: 1 }

A ordem importa

Filtrar antes de mapear evita transformar elementos que serão descartados. Coloque filtros baratos no início da sequência para obter clareza e eficiência.

const data = [1, 2, 3, 4, 5];
const out = data
  .filter((n) => n > 2)   // shrink first
  .map((n) => n * n);     // then transform
console.log(out); // [9, 16, 25]

Nenhuma mutação em lugar algum

Esses métodos nunca alteram a matriz de origem. Isso torna os fluxos de processamento seguros e previsíveis, adequando-se perfeitamente ao estilo funcional.

const src = [3, 1, 2];
const sorted = [...src].sort((a, b) => a - b);
console.log(sorted); // [1, 2, 3]
console.log(src);    // [3, 1, 2] untouched

flatMap para resultados aninhados

Quando map produz matrizes, flatMap mapeia e achata um nível em uma única etapa.

const pairs = [1, 2, 3].flatMap((n) => [n, n * 10]);
console.log(pairs); // [1, 10, 2, 20, 3, 30]

Verificação rápida

Transformações declarativas.

Recapitulação

Uma transformação declarativa descreve WHAT, não HOW. map transforma, filter seleciona e reduce reduz a um valor; encadeie-os em fluxos de processamento legíveis. Nenhum deles modifica a origem, filtrar cedo é eficiente e reduce pode construir qualquer estrutura. Use flatMap quando map produzir matrizes.

Perguntas Frequentes

A aula “Transformação declarativa de dados” é grátis?

Sim — o texto completo de “Transformação declarativa de dados” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Transformação declarativa de dados”?

Transforme dados com map, filter e reduce. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Transformação declarativa de dados”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy