Bucles for of para recorrer listas en JS

Contenido del curso

Descubrir que ya puedes dirigir máquinas

El vocabulario para pensar computacionalmente

La anatomía de una página

Hacer que la página reaccione

El terreno donde vive tu código

Publicar en el mundo

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:23

Bucles for of para recorrer listas en JS

Curso Gratis de Programación Básica

Clase 10 de 27

Clase 10 / 27

Recursos

Repetir cuatro líneas casi idénticas para imprimir métodos de preparación de café funciona, pero no escala. Aquí entran los bucles for of en JavaScript, una estructura que te permite recorrer listas y ejecutar la misma acción sobre cada elemento sin reescribir código. Es útil para cualquiera que empiece a programar y quiera escribir lógica que crezca con el negocio.

¿Por qué la repetición manual es un problema en tu código?

Imagina que en Okini quieres imprimir los métodos de preparación: V60, Kyoto drip, sifón y prensa francesa. Lo intuitivo es escribir cuatro console.log, uno por método. Funciona, pero cada línea es casi idéntica a la anterior y lo único que cambia es el nombre.

El problema aparece mañana: si Okini agrega un quinto método, vuelves al código y sumas una línea. Si son 20, escribes 20. Si son 200, te rendiste a la mitad. Cuando piensas “para cada uno de estos, haz lo mismo”, eso es repetición, y es un patrón que ya usas en la vida real: le pones azúcar a cada taza, saludas a cada cliente, revisas cada reserva del día.

¿Qué es un array en JavaScript?

Un array es una lista: una sola variable que guarda una colección de valores. En JavaScript se escribe entre corchetes y con los elementos separados por comas [02:00].

js const metodos = ["V60", "Kyoto drip", "sifón", "prensa francesa"];

Nota que usamos const. La lista en sí no la vamos a reasignar, aunque su contenido podría cambiar. Esa distinción la profundizamos más adelante, cuando la necesitemos.

¿Cómo funciona el bucle for of en JavaScript?

La instrucción for of se lee casi como en inglés: para cada método dentro de métodos, ejecuta lo que está en las llaves [02:40].

js for (const metodo of metodos) { console.log(metodo); } console.log("fin del programa");

La máquina toma el primer elemento, lo guarda en la variable metodo (en singular, porque dentro del bucle representa uno solo), ejecuta el código de adentro y vuelve al inicio con el siguiente. Cuando ya no hay más elementos, sale del bucle y sigue con el resto del programa.

¿Qué imprime un bucle for of? Ejecuta el bloque interno una vez por cada elemento de la lista. En el ejemplo, imprime los cuatro métodos y luego “fin del programa”.

El nombre metodo lo eliges tú. Podrías llamarlo m, café o x, pero igual que con funciones y variables, el nombre es vocabulario. Cuanto más claro, más fácil de leer. Y leer código es la mitad del trabajo de programar.

¿Cómo sumar valores de una lista con un bucle?

Un caso más interesante: en Okini quieres saber cuántas tazas se reservaron hoy para no pasarte de las 50 que puedes preparar. Cada persona reserva una o dos tazas [04:20].

js const reservas = [2, 1, 2, 1, 2]; let totalTazas = 0; for (const cantidad of reservas) { totalTazas = totalTazas + cantidad; } console.log(totalTazas); // 8

Aquí totalTazas es let y no const porque su valor cambia en cada vuelta del bucle. Eso es lo que permite ir acumulando la suma.

¿Qué errores comunes tienen los bucles generados por IA?

Los bucles son uno de los lugares donde los errores son más fáciles de generar y más difíciles de ver. Si la condición que hace terminar un bucle nunca se cumple, el código corre para siempre y la página se congela [05:30]. El for of no tiene ese riesgo porque la lista es finita, pero otras formas de bucles sí, y la inteligencia artificial puede generarlas. Si tu navegador se queda colgado después de correr código tuyo, sospecha de un bucle.

Cuando le pidas a una IA un bucle, revísalo con tres preguntas:

¿Está iterando sobre la lista correcta? A veces la IA inventa una variable que no existe o se equivoca de colección.
¿Qué pasa si la lista está vacía? Si Okini abre y aún no hay reservas, el bucle no debería romper nada, simplemente no hace nada.
Lo que está dentro del bucle, ¿hace lo que querías en cada vuelta? La estructura puede estar bien y el cuerpo equivocado.

¿Por qué un bucle puede correr sin errores y aun así estar mal? Porque la sintaxis es válida pero la lógica del cuerpo no hace lo que pediste. El programa termina sin fallar y devuelve un resultado incorrecto.

Un ejemplo real de IA equivocándose

Le pides a la IA un bucle que sume las tazas y te genera algo así [06:40]:

js for (const cantidad of reservas) { totalTazas = cantidad; // reasigna en lugar de sumar }

El for está perfecto e itera sobre la lista correcta, pero el cuerpo está mal. En lugar de hacer totalTazas = totalTazas + cantidad, reasigna totalTazas al valor de cantidad. El código corre, no da error, pero al final totalTazas vale el último elemento de la lista en vez del total. Si solo lees la línea del for y dices “está bien”, te perdiste el bug. Lee las dos partes y verifica que juntas hagan lo que querías.

¿Qué sigue después de aprender bucles y condicionales?

Con condicionales aprendiste a ramificar el código: que haga A o B según el caso. Con bucles aprendiste a multiplicarlo: que haga lo mismo muchas veces. Combinando los dos puedes describir cualquier lógica de negocio que se te cruce [07:50].

El siguiente paso es meter bucles, condiciones y variables dentro de un mismo recipiente que tenga nombre y se pueda reutilizar. Cuéntame en los comentarios: ¿cuánto vale totalTazas al terminar el bucle y por qué crees que se declara con let y no con const?