En JavaScript los bucles (loops) son utilizados para realizar tareas repetitivas con base en una condición. Las condiciones típicamente devuelven true (verdadero) o false(falso) al ser evaluados. El bucle continuará ejecutándose hasta que la condición devuelva  false.

Los tres tipos más comunes de bucles son:

  • for
  • while
  • do while

Puedes escribir js for, js while o js do while para obtener más información acerca de cualquiera de estos bucles. Démosles ahora un vistazo más detallado y también veamos algunas variaciones:

for loop

Sintaxis

for ([initializacion]); [condicion]; [expresion-final]) {
   // sentencias
}

La sentencia for en javascript consiste de tres expresiones y una declaración:

Descripción

  • inicialización - Sucede antes de la primera ejecución del bucle. Esta expresión es comúnmente utilizada para crear contadores. Las variables creadas tienen un alcance (scope) limitado al cuerpo del bucle. Una vez que el bucle ha terminado su ejecución las variables son destruidas.
  • condición - Expresión que es evaluada antes de la ejecución de cada iteración. Si se omite, esta expresión es evaluada como verdadera. Si devuelve true, la sentencia del cuerpo del bucle se ejecuta. Si devuelve false, el bucle se detiene.
  • expresión-final - Expresión que se ejecuta luego de cada iteración. Usualmente es utilizada para incrementar un contador. Pero también puede ser utilizada para decrementar el contador.
  • sentencia o declaración - Código que será ejecutado repetidamente por el bucle.

Cualquiera de estas tres expresiones o la sentencia del cuerpo del bucle pueden ser omitidas. Los bucles For son comúnmente utilizados para contar un cierto número de iteraciones para repetir una sentencia. Puedes utilizar una sentencia break para salir del bucle antes que la expresión de condición devuelva false.

Complicaciones comunes

Exceder los límites del array.

Cuando recorremos un array utilizando los índices es fácil exceder los límites (ej. intentar referenciar el 4º elemento de un array de 3 elementos).

    // Esto ocasionará un error.
    // Los límites del array serán excedidos.
    var arr = [ 1, 2, 3 ];
    for (var i = 0; i <= arr.length; i++) {
       console.log(arr[i]);
    }

    resultado:
    1
    2
    3
    undefined

Hay dos maneras de arreglar este código. Que la condición sea i < arr.length o i <= arr.length - 1.

Ejemplos

Iterar a través de los enteros del 0-8

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

resultado:
0
1
2
3
4
5
6
7
8

Sal de un bucle antes que la condición evalúe a false

for (var elefante = 1; elefante < 10; elefante+=2) {
    if (elefante === 7) {
        break;
    }
    console.info('elefante es ' + elefante);
}

resultado:
elefante es 1
elefante es 3
elefante es 5

for...in loop

La declaración for...in itera sobre las propiedades enumerables de un objeto, en orden arbitrario. Para cada propiedad distinta, se pueden ejecutar sentencias.

for (variable in object) {
...
}

Descripción

variable: Un nombre distinto es asignado a la variable en cada iteración.

objeto: Objeto cuyas propiedades enumerables (no de tipo symbol) son iteradas.

Ejemplos

// Inicializar objecto.
a = { "a": "Athens", "b": "Belgrade", "c": "Cairo" }

// Iterar sobre las propiedades.
var s = ""
for (var key in a) {
    s += key + ": " + a[key];
    s += "<br />";
    }
document.write (s);

// Resultado:
// a: Athens
// b: Belgrade
// c: Cairo

// Inicializar el array (arreglo).
var arr = new Array("cero", "uno", "dos");

// Agregar algunas propiedades expando al array.
arr["naranja"] = "fruta";
arr["zanahoria"] = "vegetal";

// Iterar sobre las propiedades y elementos.
var s = "";
for (var key in arr) {
    s += key + ": " + arr[key];
    s += "<br />";
}

document.write (s);

// Output:
//   0: cero
//   1: uno
//   2: dos
//   naranja: fruta
//   zanahoria: vegetal

// Forma eficiente de obtener los índices (keys) de un objeto usando la expresión dentro de las condiciones del bucle for-in

var myObj = {a: 1, b: 2, c:3}, myKeys = [], i=0;
for (myKeys[i++] in myObj);

document.write(myKeys);

//Resultado:
//   a
//   b
//   c

for...of loop

La declaración for...of crea un bucle que itera a través de objetos iterables (incluyendo Array, Map, Set, el objeto Argumentos y así sucesivamente), invocando un hook (función) de iteración con sentencias a ejecutar para el valor de cada propiedad distinta.

    for (variable of object) {
        statement
    }

Descripción

variable: En cada iteración se asigna un valor de una propiedad distinta a la variable.

objeto: Objeto cuyas propiedades son iteradas.

Ejemplos

Array

    let arr = [ "fred", "tom", "bob" ];

    for (let i of arr) {
        console.log(i);
    }

    // Resultado:
    // fred
    // tom
    // bob

Map

    var m = new Map();
    m.set(1, "negro");
    m.set(2, "rojo");

    for (var n of m) {
        console.log(n);
    }

    // Resultado:
    // 1,negro
    // 2,rojo

Set

    var s = new Set();
    s.add(1);
    s.add("rojo");

    for (var n of s) {
        console.log(n);
    }

    // Resultado:
    // 1
    // rojo

Arguments object

    // tu navegador debe tener soporte para el for..of loop
    // y variables con alcance-let (let-scoped) en bucles for

    function mostrarObjetoArguments() {
        for (let n of arguments) {
            console.log(n);
        }
    }


    mostrarObjetoArguments(1, 'rojo');

    // resultado:
    // 1
    // rojo

while loop

El bucle while empieza por evaluar la condición. Si la condición es verdadera (devuelve true), entonces las sentencias son ejecutadas. Si la condición es falsa (devuelve false), entonces las sentencias no son ejecutadas. Luego el bucle finaliza.

Aquí la sintaxis del bucle while:

Sintaxis:

while (condicion)

{

  sentencia(s);

}

sentencia(s): Una sentencia es código que se ejecuta si la condición devuelve verdadero ( true ).

condición: Es una expresión booleana (Boolean) que es evaluada antes de cada paso (iteración) por el bucle. Si esta condición evalúa a verdadero ( true ), las sentencias son ejecutadas. Cuando la condición evalúa a falso ( false ), la ejecución continúa con la siguiente sentencia luego del bucle while.

Ejemplo:

    var i = 1;
    while (i < 10) 
    {
      console.log(i);
       i++; // i=i+1 esto sería lo mismo 
    }

    Resultado:
    1 
    2 
    3 
    4
    5
    6
    7
    8
    9

Como iterar usando bucles en JavaScript

Los bucles while se ejecutan mientras que la condición dentro de los ( ) devuelve verdadero ( true ). Ejemplo:

while(condicion){
codigo...
}

Pista 1:

Usa una variable de iteración como la variable i en la condición de tu bucle. 

var i = 0;
while(i <= 4){
}

Spoiler Alert aquí la solución!

Solución:

// Preparación
var miArray = [];

// Sólo modifica el código bajo esta línea.
var i = 0;
while (i <= 4){
    miArray.push(i);
    i++;
}

Do...while loop

El bucle  do...while está cercanamente relacionado al bucle while . En el bucle  do...while , la condición se evalúa al final.

Aquí la sintaxis para el bucle do...while:

Sintaxis:

 do {

   *Sentencias;*

} while (*condicion*);

sentencia(s): Una sentencia es ejecutada por lo menos una vez antes de que la condición o expresión booleana sea evaluada y es re-ejecutada cada vez que la condición devuelve true.

condición: Aquí la condición es una expresión booleana. Si la expresión booleana evalúa a true, las sentencias son ejecutadas de nuevo. Cuando la expresión booleana devuelve false, el bucle finaliza.

Ejemplo:

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

Resultado:
1
2
3
4
5

Como iterar con bucles Do...While en Javascript.

  • Los bucles Do...While aseguran que el código se ejecute por lo menos una vez, y luego de esta primera ejecución, si la condición dentro del while() es true, continúa con el bucle, de otra forma, se detiene.

Solución:

var miArray = [];
var i = 10;

do {
  miArray.push(i);
  i++;
} while(i <= 10);


Traducido del artículo JavaScript Loops Explained: For Loop, While Loop, Do...while Loop, and More