JavaScript Academy · Lección

Transformación declarativa de datos

Transforme datos con map, filter y reduce.

Transformación declarativa de datos es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

Declarativo frente a imperativo

El código imperativo indica CÓMO (bucles, contadores y modificaciones). El código declarativo indica QUÉ. Los métodos de array como map, filter y reduce permiten describir transformaciones sin bucles manuales.

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

map: transformar cada elemento

map devuelve un array nuevo de la misma longitud, con cada elemento transformado por su función. El original no se modifica.

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

filter: conservar algunos elementos

filter devuelve un array nuevo que contiene solo los elementos para los que el predicado devuelve un valor truthy.

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

reduce: combinar en un valor

reduce convierte un array en un único valor mediante la acumulación. Proporcione un reducer y un valor inicial.

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

Encadenar operaciones

Como cada método devuelve un array nuevo, puede encadenarlos en un pipeline legible que se lee de arriba abajo.

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]

Un pipeline realista

Combine filter, map y reduce para responder a una pregunta sobre un conjunto de datos en una sola expresión.

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

Transformar a nuevas estructuras

map puede cambiar la estructura de objetos, no solo de números. Proyecte cada registro en los campos que le interesen.

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 puede construir cualquier cosa

reduce no sirve únicamente para realizar sumas. Puede construir objetos, agrupar datos o incluso volver a implementar map y 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 }

El orden importa

Filtrar antes de transformar evita transformar elementos que va a descartar. Coloque los filtros económicos al principio de la cadena para mejorar la claridad y la eficiencia.

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]

No modificar nada

Estos métodos nunca cambian el array de origen. Esto hace que los pipelines sean seguros y predecibles, y encajen perfectamente con el 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 anidados

Cuando un map produce arrays, flatMap aplica el map y aplana un nivel en un solo paso.

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

Comprobación rápida

Transformaciones declarativas.

Resumen

La transformación declarativa describe QUÉ, no CÓMO. map transforma, filter selecciona y reduce combina en un único valor; encadénelos en pipelines legibles. Ninguno modifica el origen, filtrar al principio es eficiente y reduce puede construir cualquier estructura. Recurra a flatMap cuando un map produzca arrays.

Preguntas frecuentes

¿La lección «Transformación declarativa de datos» es gratis?

Sí — el texto completo de «Transformación declarativa de datos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Transformación declarativa de datos»?

Transforme datos con map, filter y reduce. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Transformación declarativa de datos»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a JavaScript Academy