Lección 20: Métodos de Arrays (Parte 2) — Iteración

🧠 Concepto

Los métodos de iteración son quizás las herramientas más poderosas de los arrays en JavaScript. Permiten recorrer y transformar arrays de forma declarativa y elegante. A diferencia de los bucles tradicionales, estos métodos suelen ser más legibles y expresivos.

.forEach() — Ejecutar para cada elemento

forEach ejecuta una función por cada elemento del array. No devuelve un nuevo array (solo ejecuta efectos secundarios).

let frutas = ['manzana', 'pera', 'uva'];

frutas.forEach(function(fruta, indice) {
  console.log(`${indice + 1}: ${fruta}`);
});
// 1: manzana
// 2: pera
// 3: uva

.map() — Transformar cada elemento

map crea un nuevo array con el resultado de aplicar una función a cada elemento. Es el rey de la transformación de datos.

let numeros = [1, 2, 3, 4, 5];
let dobles = numeros.map(function(n) {
  return n * 2;
});
console.log(dobles); // [2, 4, 6, 8, 10]
console.log(numeros); // [1, 2, 3, 4, 5] (original intacto)

.filter() — Filtrar elementos

filter crea un nuevo array con los elementos que cumplen una condición.

let edades = [15, 22, 18, 30, 12, 17, 25];
let mayores = edades.filter(function(edad) {
  return edad >= 18;
});
console.log(mayores); // [22, 18, 30, 25]

.reduce() — Reducir a un solo valor

reduce acumula los elementos del array en un solo valor (suma, promedio, etc.).

let numeros = [10, 20, 30, 40];
let suma = numeros.reduce(function(acumulador, actual) {
  return acumulador + actual;
}, 0); // 0 es el valor inicial
console.log(suma); // 100

Inmutabilidad

Excepto forEach, todos estos métodos no modifican el array original, sino que crean uno nuevo. Esto es fundamental en programación moderna (programación funcional).

💻 Ejemplo

// Datos de ejemplo: carrito de compras
let carrito = [
  { producto: 'Laptop', precio: 25000, cantidad: 1 },
  { producto: 'Mouse', precio: 500, cantidad: 2 },
  { producto: 'Teclado', precio: 1200, cantidad: 1 }
];

// forEach: mostrar resumen del carrito
carrito.forEach(function(item) {
  let subtotal = item.precio * item.cantidad;
  console.log(`${item.producto} x${item.cantidad} = $${subtotal}`);
});

// map: obtener solo los nombres
let nombres = carrito.map(function(item) {
  return item.producto;
});
console.log('Productos:', nombres); // ['Laptop', 'Mouse', 'Teclado']

// map: calcular total por producto
let subtotales = carrito.map(function(item) {
  return item.precio * item.cantidad;
});
console.log('Subtotales:', subtotales); // [25000, 1000, 1200]

// filter: productos caros (> 1000)
let caros = carrito.filter(function(item) {
  return item.precio > 1000;
});
console.log('Productos caros:', caros);

// reduce: total del carrito
let total = carrito.reduce(function(acum, item) {
  return acum + item.precio * item.cantidad;
}, 0);
console.log('Total a pagar: $' + total); // $27200

📝 Ejercicio

1. Crea un archivo metodos-arrays-2.js.
2. Declara un array notas con 5 números (calificaciones).
3. Usa .forEach() para imprimir cada nota con “Nota: X”.
4. Usa .map() para sumar 1 punto extra a cada nota.
5. Usa .filter() para obtener solo las notas aprobatorias (>= 60).
6. Usa .reduce() para calcular el promedio de las notas.

let notas = [55, 78, 92, 45, 88];

// forEach
notas.forEach(function(nota, i) {
  console.log(`Nota ${i + 1}: ${nota}`);
});

// map: agregar punto extra
let notasExtra = notas.map(function(nota) {
  return nota + 1;
});
console.log('Notas con extra:', notasExtra);

// filter: solo aprobadas
let aprobadas = notas.filter(function(nota) {
  return nota >= 60;
});
console.log('Aprobadas:', aprobadas);

// reduce: promedio
let suma = notas.reduce(function(acum, nota) {
  return acum + nota;
}, 0);
let promedio = suma / notas.length;
console.log('Promedio:', promedio.toFixed(2));

⚠️ Nota

map(), filter() y reduce() siempre devuelven un nuevo array/valor. Si no usas el valor de retorno, probablemente deberías usar forEach(). Es un error común usar map() solo para efectos secundarios:

// ❌ Incorrecto: map sin usar el resultado
numeros.map(n => console.log(n));

// ✅ Correcto: forEach para efectos secundarios
numeros.forEach(n => console.log(n));

🎯 Tip

Puedes encadenar estos métodos porque cada uno devuelve un array:

let resultado = numeros
  .filter(n => n > 10)   // filtra
  .map(n => n * 2)       // transforma
  .reduce((a, b) => a + b, 0); // reduce

// Todo en una línea funcional