Cargando...

Bucle for

Hasta ahora elegías el camino una vez con if y switch. En una página real a menudo hace falta repetir el mismo trabajo: cinco líneas, una suma, una lista corta. Si copias el mismo comando cinco veces, el primer cambio lo rompe todo. for guarda una sola copia y mueve un contador por las rondas.

¿Cómo avanza un for?

Mientras la condición sea verdadera, se vuelve a ejecutar el bloque { }. Entre paréntesis van tres partes con punto y coma: de dónde parte el contador, hasta cuándo sigue, y cómo cambia tras cada ronda. Cuando la condición falla, el bucle termina y el programa sigue en la línea siguiente.

Las tres piezas del encabezado

📊 Piezas cotidianas de for

Parte Lectura cotidiana Uso típico
inicio (init) empieza el contador aquí… let i = 0
condición sigue mientras esto sea verdadero… i < 5
actualización tras cada ronda cambia el contador… i++

El principiante suele contar con un entero pequeño llamado i. Ese nombre es costumbre, no regla — también vale n o step. Si nunca actualizas el contador, la condición puede no volverse falsa nunca y el bucle se cuelga.

Conteo simple con for

javascript 
for (let i = 0; i < 5; i++) {
console.log(i);
}

Contar del inicio al tope

Empieza en 0. Mientras i sea menor que 5, lo imprime y suma uno. En la consola ves 0 a 4 — cinco rondas. El valor 5 no se imprime porque la condición falla primero.

Lee una ronda con calma: condición → cuerpo → actualización → otra vez la condición. La actualización no va en el cuerpo; está en el encabezado para que cada ronda avance igual.

Registrar un paso claro

javascript 
for (let i = 1; i <= 3; i++) {
console.log("step " + i);
}

Empezar en uno, etiquetas más claras

Aquí el contador parte de 1 y la condición es i <= 3; ves step 1 a step 3. Cero o uno es decisión de diseño — solo alinea la condición con esa elección.

Suma con for

javascript 
let total = 0;
for (let i = 1; i <= 4; i++) {
total = total + i;
}
console.log(total);

Construye la suma ronda a ronda

total empieza en cero y cada ronda toma el i actual. Tras 1+2+3+4 queda 10. El bucle brilla cuando el resultado crece a lo largo de las rondas, no cuando es una sola rama.

Paso de dos

javascript 
for (let i = 0; i < 8; i += 2) {
console.log(i);
}

Salta de dos en dos

i += 2 avanza dos cada ronda: 0, 2, 4, 6. El hueco de actualización no es solo i++ — cualquier cambio honesto que acerque el final vale.

Pegar un texto corto

javascript 
let line = "";
for (let i = 1; i <= 3; i++) {
line = line + "n" + i + " ";
}
console.log(line);

Pega trozos mientras iteras

line empieza vacío y cada ronda añade un trozo. Tras tres rondas tienes algo como n1 n2 n3. El mismo patrón sirve después para armar el mensaje de la página.

Muestra el resultado en la página

Ejecuta un conteo corto, arma el mensaje y escríbelo en la página.

Conteo de página con for

html 
<!DOCTYPE html>
<html>
<head>
<title>For — page count</title>
</head>
<body>
<p id="out">…</p>
<script>
let msg = "";
for (let i = 1; i <= 4; i++) {
msg = msg + i + " ";
}
let box = document.getElementById("out");
box.textContent = "count=" + msg.trim();
</script>
</body>
</html>

La página muestra count=1 2 3 4. Cambia el límite superior, actualiza y lee la lista nueva. La siguiente lección con while también repite, pero comprueba la condición de otra forma — cuando ya conoces el plan del contador, for sigue siendo la herramienta limpia.

Pruébalo tú

  1. Escribe un for con i < 5 que registre 0…4.
  2. Cámbialo para registrar 1…5 con i <= 5.
  3. Suma 1…5 en total y registra el resultado.
  4. Imprime pares menores que 10 con i += 2.
  5. Dentro del bucle arma un texto con tres etiquetas (a, b, c).
  6. En la demo HTML cambia solo el límite, actualiza y lee count=.

Errores frecuentes

  • Fallo de uno: i < 5 en vez de i <= 5 (o al revés) cuando el número de rondas era otro
  • Olvidar la actualización (i++) y que la condición no termine
  • Meter en un bucle de una ronda lo que bastaba con un if
  • Cambiar una variable distinta a la de la condición
  • Asumir que i sigue útil después del bucle si se declaró con let en el encabezado (ámbito de bloque)

Resumen

  • for repite el cuerpo mientras la condición sea verdadera
  • El encabezado tiene tres piezas: inicio, condición, actualización
  • Ideal para contar, sumar y armar textos cortos
  • La actualización puede ser i++, i += 2 u otro paso claro
  • Si el bucle arma un mensaje, muéstralo también en la página
  • Siguiente: bucle while — repetir mientras una condición valga, sin encabezado de tres piezas

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
8
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 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
Tema 23 de 23
Javascript Tutorial