Transformar, filtrar y agrupar arrays en JavaScript

Domina los arrays en JavaScript para manipular datos reales: listas de usuarios, comentarios, registros y reviews. Aquí verás cómo transformar, filtrar y agrupar colecciones, calcular estadísticas y mantener inmutabilidad. Todo aplicado en una app con programación orientada a objetos y desde la console del navegador, sin memorizar métodos.

¿Por qué los arrays son la base de datos en JavaScript?

En el día a día casi todo llega como lista: usuarios, comentarios, registros, reviews. El 80 % de los datos aparecen en arrays. No importa cuánto sepas del lenguaje, lo que te hace ganar es manipular datos con intención: transformar, filtrar, reducir y evitar efectos secundarios con inmutabilidad.

El enfoque es práctico: abrir la console del navegador, pegar un array de películas, imprimirlo y aplicar métodos sobre datos reales. Luego, llevar estas técnicas a una app con programación orientada a objetos para crear estadísticas, filtros y más, sin aprender de memoria.

¿Cómo transformar, filtrar y agrupar sin mutar los datos?

Partimos de un array de películas. La meta es enriquecer los objetos, seleccionar lo útil y organizarlos por grupos. Se usan métodos como filter y reduce, y una transformación inmutable apoyada en el split operator para evitar cambiar el estado original.

¿Cómo añadir estrellas según el rating?

Se agrega un dato derivado del rating: una cadena de asteriscos que representa visualmente la puntuación. Para no mutar, primero se crea una copia usando el split operator, y luego se calcula el campo con repeat y Math.round.

// Enriquecer cada película con 'estrellas' sin mutar el original
const peliculasConEstrellas = peliculas.map((p) => ({
  ...p,
  estrellas: "*".repeat(Math.round(p.rating)),
}));

• Se evita mutabilidad al crear nuevos objetos.
• Se redondea el rating con Math.round.
• Se genera una visualización simple con repeat.

¿Cómo filtrar por rating mayor a 7?

Para quedarte con lo mejor, usa filter y una condición directa sobre el rating. El resultado es un nuevo array con solo las películas que cumplen el criterio.

// Filtrar películas con rating > 7
const top = peliculas.filter((p) => p.rating > 7);

• Devuelve un array nuevo sin tocar el original.
• Permite encadenar más transformaciones después.

¿Cómo agrupar por género con reduce?

Con reduce se construye un objeto índice. Empieza con un estado inicial vacío. Si el género no existe como clave en el acumulador, se crea un array vacío. Luego se agrega la película actual con push y se retorna el acumulador.

// Agrupar películas por género
const porGenero = peliculas.reduce((acc, pelicula) => {
  const genero = pelicula.genero;
  if (!acc[genero]) acc[genero] = [];
  acc[genero].push(pelicula);
  return acc;
}, {});

• Construye categorías como acción o ciencia ficción.
• Escala bien para estadísticas por grupo.
• Mantiene un flujo declarativo y legible.

¿Dónde practicar y qué objetivos alcanzar en la app?

Abre una pestaña del navegador, clic secundario, Inspeccionar y usa la console. Pega el array de películas y empieza a experimentar. Luego, lleva estas técnicas a la app en freehabitsjs.netdefy.app para potenciarla con datos procesados.

• Crear estadísticas de uso con transformaciones y reduce.
• Exportar datos a CSV de forma controlada.
• Implementar un motor de búsqueda con filtros encadenados.
• Aplicar inmutabilidad para prevenir efectos secundarios.
• Usar una base en POO ya funcional y llevarla al siguiente nivel.
• Evitar memorizar métodos: enfócate en la intención y el flujo de datos.

¿Quieres que revisemos tu transformación, filtro o agrupación y lo optimicemos juntos? Comparte tu fragmento de código y el objetivo que buscas lograr.