If you're seeing this message, it means we're having trouble loading external resources on our website.

Si estás detrás de un filtro de páginas web, por favor asegúrate de que los dominios *.kastatic.org y *.kasandbox.org estén desbloqueados.

Contenido principal

Repaso: hacer bucles

Este es un repaso de lo que cubrimos en esta lección sobre bucles.
Cuando estamos escribiendo programas, a menudo nos damos cuenta que queremos repetir una parte del código muchas veces, o repetirlo pero cambiándole algo cada vez. Para ahorrarnos escribir todo ese código, podemos usar un bucle. JavaScript tiene dos tipos de bucles, un bucle while (mientras) y un bucle for (para).
Un bucle while es una forma de repetir el código hasta que una condición sea falsa. Por ejemplo, este bucle while va a desplegar el valor de y en (30, y) mientras y sea menor que 400. El bucle le suma 20 a y cada vez que se ejecuta, de manera que y empieza en 40 pero incrementa a 60, 80, 100, 120, etc.
var y = 40;
while (y < 400) {
    text(y, 30, y);
    y += 20;
}
Es importante que la condición dentro del paréntesis se vuelva falsa en algún momento. ¡De lo contrario tendremos lo que se conoce como un bucle infinito! Eso es lo que pasaría si quitáramos el y += 20, porque y sería 40 por siempre, siempre sería menor a 400, y el programa no sabría cuando parar.
var y = 40;
while (y < 400) {
    text(y, 30, y);
}
El bucle for es parecido a un bucle while, pero con una sintaxis más especializada. Los programadores inventaron el bucle for cuando se dieron cuenta que siempre estaban haciendo las mismas tres cosas: crear variables para contar los bucles (como la y arriba), incrementarlas por una cantidad y verificar que fueran menores que cierto valor. La sintaxis de un bucle for tiene un lugar especial para cada una de esas tres cosas. Aquí está el mismo bucle que el primer bucle while de arriba, como un bucle for:
for (var y = 40; y < 400; y += 20) {
    text(y, 30, y);
}
Los bucles también se pueden anidar. De hecho es muy común anidar bucles for, especialmente en dibujos bidimensionales, porque facilita dibujar figuras en forma de cuadrículas. Cuando anidamos un bucle dentro de otro, le estamos diciendo al programa "haz esta cosa X veces, y por cada vez que lo hagas, haz esta otra cosa Y veces". Piensa acerca de dibujar una cuadrícula. Quisiéramos decirle al programa "crea una columna 10 veces, y por cada columna, también crea 15 celdas dentro de ella". Aquí esta cómo puedes usar bucles anidados para logar eso:
for (var col = 0; col < 10; col++) {
    for (var row = 0; row < 15; row++) {
        rect(col*20, row*20, 20, 20);
    }
}
¿Cuando debes usar un bucle for en lugar de un bucle while? Eso depende de ti. Muchos programadores prefieren los bucles for porque es más difícil crear un bucle infinito por accidente (porque es más difícil olvidar incrementar tu variable de contador), pero a veces un bucle while puede tener más sentido. ¡Prueba ambos!

¿Quieres unirte a la conversación?

¿Sabes inglés? Haz clic aquí para ver más discusiones en el sitio en inglés de Khan Academy.