Skip to main content

Capítulo 5 - Bucles

En JavaScript existen diversos bucles que podremos utilizar en función de las necesidades de nuestro programa.

Ahora veremos aquellos bucles que son de uso genérico, pero existen variaciones del bucle for específicas para Arrays forEach) y Objetos For... in) que veremos en próximos capítulos.

Para el caso que os preocupe el rendimiento de vuestros bucles os dejo este link con unos benchmarks bastante interesantes.

While​

El primer bucle que veremos está específicamente diseñado para funcionar de manera constante, mientras una condición dada siga cumpliéndose.

Este bucle está pensado para simplificarnos la sintaxis cuando el control del bucle no se realiza mediante operaciones matemáticas (mayor que... menor que...).

Funcionamiento​

Estructura:

while (-Condición-) {
    -Instrucciones-
};

Ejemplo:

var condicion = true
while (condicion) {
    console.log("hola");
    condicion = false;
};

For​

Este bucle presenta una estructura optimizada para controlar la ejecución de la iteración de manera numérica.

El bucle For se divide en tres partes separadas por un punto y coma.

Expresión inicial

Será todo aquello que se ejecutará al iniciarse el bucle.

Condición

Será evaluada antes de cada iteración. Este es el único parámetro obligatorio.

Expresión de actualización

Se ejecutará al final de cada iteración.

Funcionamiento​

Estructura:

for (-Expresión inicial-; -Condición-; -Expresión Actualización-) {
    -Instrucciones-
};

Ejemplo clásico:

for (var i = 0; i < 10; i++) {
    console.log(i);
}

Do... While​

El tercer bucle que veremos en este capítulo es Do... While que se diferencia de todos los demás en que se ejecuta primero y se evalúa después.

Al utilizar este bucle nos aseguramos que aunque la condición no se cumpla... el código se ejecuta al menos una vez.

Funcionamiento​

Estructura:

do{
    -Instrucciones-
} while (-Condición-);

Ejemplo:

var i = 0;
do {
    i++;
    console.log(i);
} while (i < 10);
Importante

Al menos se ejecutará una vez, aunque la premisa no sea verdadera.

do{
   console.warn("me ejecuto")
} while (false);

Break y Continue​

Dominando la eficiencia

Dos sentencias clave en JavaScript, son break y continue, que nos permiten romper o alterar el flujo normal de nuestra aplicación.

Pueden utilizarse también con las estructuras condicionales que vimos en el capítulo anterior.

Continue​

Nos permite saltar parte del bucle.

for (var i = 0; i < 10; i++) {

    // Salta el 5 y sigue...
    if (i === 5) {
        continue;
    }

    console.log("El valor de i es "+i);
}

Break​

Nos permite salir del bucle.

for (var i = 0; i < 10; i++) {

    // Llega a 5 y sale.
    if (i === 5) {
        break;
    }

    console.log("El valor de i es "+i);
}

Errores comunes​

Bucle infinito​

Es un error muy común y deberías evitarlo a toda costa. Suele ocurrir cuando no tenemos una estructura de control funcionando adecuadamente.

while (true) {
    console.log("Este texto se imprime hasta el infinito...");
};

Bucle que no se ejecutará​

Igualmente es un error más sutil, pero por definición un código que jamas se ejecuta... ¡sobra!

while (false) {
    console.log("Este texto jamas se imprimirá...");
};

Ejemplo:

var control = 1;
while (control <= 10) {
    console.log(control);
    control++;
};

Usos Avanzados​

Decrecimiento:​

Es bastante común utilizar este tipo de bucles, cuando estamos trabajando sobre la representación dinámica de elementos en el DOM.

for (var i = 10; i > 0; i--) {
    console.log(i);
}

Anidación:​

Aunque resulta muy tentador... debemos de evitar en la medida de lo posible la anidación en JavaScript. Por regla general anidar hasta dos o tres niveles es aceptable.

for (var i = 0; i < 10; i++) {
    console.log("Estoy en el primer bucle.");
    for (var j = 10; j > 0; j--) {
        console.log("Estoy en el segundo bucle")
        console.log("Vuelta: " + i + " - " + j);
    }

}

Exprimiendo el For​

Si dominamos las tres partes básicas que componen el bucle for, podemos plantearnos estructuras tan complejas como ésta.

for (var i = 0, x = 1, z = 2, tope = 10; i <= tope; x *= z, i++ ) {
    console.log("i vale "+i+", x vale "+x+", z vale "+z);
}
Consejo

Por lo general la variable i suele reservarse para controlar las iteraciones del bucle, aunque podamos utilizar otros nombres... esto suele estar muy aceptado por la comunidad y se considera una buena práctica.

No refactorizar​

En ocasiones, el código evoluciona y no repasamos lo que habíamos construido previamente... llegando a situaciones tan monstruosas como ésta.

Antes de refactorizar:

// Código
for (;i === true;) {
    // Más Código
}

Después de refactorizar:

// Código
while (i) {
    // Más Código
}