for...of y for...in
Con for y while tú manejabas el contador. A menudo los datos ya son una lista u objeto — quieres cada valor o cada clave, no un índice casero. for...of te entrega el siguiente valor de un iterable. for...in te entrega la siguiente clave de un objeto. Misma familia de repetir trabajo; otra cosa en la variable del bucle.
¿Qué hace for...of?
Ejecuta el cuerpo una vez por cada valor de un iterable. Para principiantes, arrays y cadenas son el día a día. Escribes for (const item of list) — cada vuelta, item es el siguiente valor. No escribas i < list.length salvo que quieras un bucle de índice a propósito.
for...of, for...in y bucles clásicos
📊 Formas cotidianas de recorrer
| Forma | Qué guarda la variable del bucle | Encaje cotidiano |
|---|---|---|
for...of |
un valor de un iterable | cada fruta en un array; cada carácter en un string |
for...in |
una clave (nombre de propiedad) en un objeto | cada nombre de campo en un objeto sencillo |
for clásico |
un índice que controlas | cuando necesitas el número 0, 1, 2… |
while |
lo que actualices en el cuerpo | seguir mientras valga una regla |
Empieza con arrays para for...of. Usa for...in cuando la historia sea «cada nombre de propiedad de este objeto». Mantén el for clásico cuando importe el propio índice.
const colors = ["red", "green", "blue"];
for (const color of colors) {
console.log(color);
}
Recorre los valores de un array
Cada vuelta imprime un string: red, luego green, luego blue. La variable del bucle es el valor mismo — no 0, 1, 2. Si solo necesitas los ítems, for...of queda más corto que gestionar un índice.
const word = "hi";
for (const ch of word) {
console.log(ch);
}
Recorre los caracteres de un string
Los strings también son iterables. Imprime h, luego i. Trata cada carácter como un valor — útil para trabajo letra a letra antes de APIs de string más pesadas.
const user = { name: "Ada", role: "dev" };
for (const key in user) {
console.log(key + "=" + user[key]);
}
Recorre claves con for...in
Aquí key pasa a ser "name", luego "role". Lees el valor con user[key]. Prefiere for...in para las claves enumerables de objetos sencillos. No lo uses como primera herramienta para valores de array — eso es for...of.
Recuerda la regla corta: of → valores, in → claves. Mezclarlas es el lío clásico del principiante.
const parts = ["A", "B", "C"];
let msg = "";
for (const p of parts) {
msg = msg + p + "-";
}
console.log(msg.slice(0, -1));
Construye un mensaje a partir de valores
Cada vuelta añade una letra y un guion. Tras el bucle, slice quita el guion final y ves A-B-C. Misma idea de pegar de lecciones anteriores de bucles — ahora el recorrido usa valores directamente.
const nums = [10, 20, 30];
for (let i = 0; i < nums.length; i++) {
console.log("i=" + i + " value=" + nums[i]);
}
for (const n of nums) {
console.log("value=" + n);
}
Cuándo el bucle de índice aún ayuda
El for clásico imprime índice y valor. El for...of solo valores. ¿Necesitas el número de posición? Mantén un for indexado. ¿Solo los ítems? Prefiere for...of.
Muestra for...of en la página
Recorre un array con for...of, arma una línea corta y escríbela en la página.
<!DOCTYPE html>
<html>
<head>
<title>for...of — page list</title>
</head>
<body>
<p id="out">…</p>
<script>
const items = ["tea", "milk", "honey"];
let line = "";
for (const item of items) {
line = line + item + " ";
}
let box = document.getElementById("out");
box.textContent = "list=" + line.trim();
</script>
</body>
</html>
La página muestra list=tea milk honey. Cambia una entrada del array, recarga y lee la línea nueva. Usa for...of para valores, for...in para claves de objeto y for clásico cuando importe el índice. Lo siguiente: break y continue para dirigir bucles a mitad de camino.
Pruébalo tú
- Con
for...of, registra cada valor de["a", "b", "c"]. - Con
for...of, registra cada carácter de"ok". - Con
for...insobre{ x: 1, y: 2 }, imprimekey=value. - Une
["1", "2", "3"]en1-2-3confor...of. - Escribe un
forindexado que imprima índice y valor juntos. - En la demo HTML, cambia solo el array, recarga y lee
list=.
Errores frecuentes
- Escribir
for...incuando querías valores de un array (for...of) - Usar
for...ofen un objeto sencillo (para principiantes no es iterable así) - Esperar índices
0,1,2defor...of— da valores, no índices - Olvidar
user[key]trasfor...iny registrar solo claves cuando también hacía falta el valor - Un bucle de índice largo cuando un
for...ofclaro se lee mejor
Resumen
for...ofrecorre valores de iterables (arrays, strings)for...inrecorre claves de objetos- El
forclásico sigue cabiendo cuando necesitas el número de índice whilesigue cabiendo para una condición continua- Arma mensajes pegando valores en el cuerpo
- Siguiente: break y continue — parar o saltar una vuelta
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior