Recorrer arrays: for, for...of y forEach

Lo que más harás con una lista es RECORRERLA: visitar cada elemento para mostrarlo, sumarlo o procesarlo. Hay tres formas —el for clásico, for...of y forEach— y aquí aprendes cada una y cuándo conviene. También es tu primer contacto formal con los BUCLES, la herramienta para repetir código sin copiarlo.

Visitar cada casillero

El for clásico: control total

El for tiene tres partes entre paréntesis: inicio (let i = 0, arranca el contador), condición (i < gastos.length, sigue mientras sea verdadera) y avance (i++, qué hacer tras cada vuelta). Da control total —tienes el índice i—, pero hay que escribir las tres partes bien: el error clásico es i <= length (se pasa un elemento, el undefined del final). Úsalo cuando necesites el índice o control fino.

for...of: solo los valores

Cuando solo te importan los VALORES (no el índice), for...of es más limpio:

for (const valor of array) te entrega cada VALOR directamente, sin manejar índices. Es más legible y con menos errores para el caso común "haz algo con cada elemento". Si NO necesitas el índice, prefiérelo sobre el for clásico.

forEach: delegar la acción

forEach es un MÉTODO del array: le pasas una función y la ejecuta con cada elemento:

forEach recibe una función (un "callback") que se ejecuta por cada elemento, dándote el valor y —opcional— el índice. Es muy legible con arrow functions. Una diferencia con los otros: no puedes break para detenerlo a mitad (si necesitas parar, usa for/for...of). forEach es la antesala de los métodos estrella (map, filter, reduce) que vienen ahora, que también reciben una función por elemento.

Mini-reto

En "Mi Bolsillo": con un array de gastos, calcula de DOS formas el total (una con for clásico, otra con for...of) y confirma que dan lo mismo. Luego usa forEach para imprimir cada gasto con su número ("Gasto 1: ..."). Practicar las tres te deja elegir la adecuada según el caso — y prepara el terreno para los métodos que automatizan todo esto.

Qué sigue

Ya recorres a mano. Empieza la MAGIA de los arrays: map, el método que TRANSFORMA una lista en otra (aplica algo a cada elemento y devuelve la lista resultante) sin escribir bucles. Es el primero de los tres métodos que todo programador de JavaScript usa a diario, y cambia tu forma de pensar las listas.