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
}