Fundamentos de jQuery

2.6. Bucles

Los bucles (en inglés loops) permiten ejecutar un bloque de código un determinado número de veces.

Bucles

// muestra en la consola 'intento 0', 'intento 1', ..., 'intento 4'
for (var i=0; i<5; i++) {
    console.log('intento ' + i);
}

Note que en el ejemplo se utiliza la palabra var antes de la variable i, esto hace que dicha variable quede dentro del "alcance" (en inglés *scope) del bucle. Más adelante en este capítulo se examinará en profundidad el concepto de alcance.*

2.6.1. Bucles utilizando for

Un bucle utilizando for se compone de cuatro estados y posee la siguiente estructura:

for ([expresiónInicial]; [condición]; [incrementoDeLaExpresión])
    [cuerpo]

El estado expresiónInicial es ejecutado una sola vez, antes que el bucle comience. Éste otorga la oportunidad de preparar o declarar variables.

El estado condición es ejecutado antes de cada repetición, y retorna un valor que decide si el bucle debe continuar ejecutándose o no. Si el estado condicional evalúa un valor falso el bucle se detiene.

El estado incrementoDeLaExpresión es ejecutado al final de cada repetición y otorga la oportunidad de cambiar el estado de importantes variables. Por lo general, este estado implica la incrementación o decrementación de un contador.

El cuerpo es el código a ejecutar en cada repetición del bucle.

Un típico bucle utilizando for

for (var i = 0, limit = 100; i < limit; i++) {
    // Este bloque de código será ejecutado 100 veces
    console.log('Currently at ' + i);
    // Nota: el último registro que se mostrará
    // en la consola será "Actualmente en 99"
}

2.6.2. Bucles utilizando while

Un bucle utilizando while es similar a una declaración condicional if, excepto que el cuerpo va a continuar ejecutándose hasta que la condición a evaluar sea falsa.

while ([condición]) [cuerpo]

Un típico bucle utilizando while

var i = 0;
while (i < 100) {
    // Este bloque de código se ejecutará 100 veces
    console.log('Actualmente en ' + i);
    i++; // incrementa la variable i
}

Puede notar que en el ejemplo se incrementa el contador dentro del cuerpo del bucle, pero también es posible combinar la condición y la incrementación, como se muestra a continuación:

Bucle utilizando while con la combinación de la condición y la incrementación

var i = -1;
while (++i < 100) {
    // Este bloque de código se ejecutará 100 veces
    console.log('Actualmente en ' + i);
}

Se comienza en -1 y luego se utiliza la incrementación previa (++i).

2.6.3. Bucles utilizando do-while

Este bucle es exactamente igual que el bucle utilizando while excepto que el cuerpo es ejecutado al menos una vez antes que la condición sea evaluada.

do [cuerpo] while ([condición])

Un bucle utilizando do-while

do {
    // Incluso cuando la condición sea falsa
    // el cuerpo del bucle se ejecutará al menos una vez.
    alert('Hello');
} while (false);

Este tipo de bucles son bastantes atípicos ya que en pocas ocasiones de necesita un bucle que se ejecute al menos una vez. De cualquier forma debe estar al tanto de ellos.

2.6.4. break y continue

Usualmente, el fin de la ejecución de un bucle resultará cuando la condición no siga evaluando un valor verdadero, sin embargo también es posible parar un bucle utilizando la declaración break dentro del cuerpo.

Detener un bucle con break

for (var i = 0; i < 10; i++) {
    if (something) {
        break;
    }
}

También puede suceder que quiera continuar con el bucle sin tener que ejecutar más sentencias del cuerpo del mismo bucle. Esto puede realizarse utilizando la declaración continue.

Saltar a la siguiente iteración de un bucle

for (var i = 0; i < 10; i++) {
    if (something) {
        continue;
    }

    // La siguiente declaración será ejecutada
    // si la condición 'something' no se cumple
    console.log('Hello');
}