Saltar la navegación

El bucle estándar for

Exploremos algunos constructores de bucles específicos. El primero, que usarás la mayoría de las veces, es el bucle for - este tiene la siguiente sintaxis:

Aquí tenemos:

  1. La palabra reservada for, seguida por algunos paréntesis.
  2. Dentro de los paréntesis tenemos tres ítems, separados por punto y coma (;):
  3. Un inicializador - Este es usualmente una variable con un número asignado, que aumenta el número de veces que el bucle ha sido ejecutado. También se le llama contador o variable de conteo.
  4. Una condición de salida - como se mencionó previamente, ésta define cuando el bucle debería detenerse. Generalmente es una expresión que contiene un operador de comparación, una prueba para verificar que la condición de término o salida ha sido cumplida.
  5. Una expresión final - que es siempre evaluada o ejecutada cada vez que el bucle ha completado una iteración. Usualmente sirve para modificar al contador (incrementando su valor o algunas veces disminuyéndolo), para aproximarse a la condición de salida.
  6. Algunos corchetes curvos que contienen un bloque de código - este código se ejecutará cada vez que se repita el bucle.

Observa un ejemplo real para poder entender esto más claramente.

Esto nos da el siguiente resultado:

Ver Resultado

Esto muestra un bucle siendo usado para iterar sobre los elementos de un arreglo (matriz), y hacer algo con cada uno de ellos - un patrón muy común en JavaScript. Aquí:

  1. El iterador, i, inicia en 0 (var i = 0).
  2. Se le ha dicho que debe ejecutarse hasta que no sea menor que la longitud del arreglo cats. Esto es importante - la condición de salida muestra la condición bajo la cual el bucle seguirá iterando. Así, en este caso, mientras i < cats.length sea verdadero, el bucle seguirá ejecutándose.
  3. Dentro del bucle, concatenamos el elemento del bucle actual (cats[i] es cats[lo que sea i en ese momento]) junto con una coma y un espacio, al final de la variable info. Así:
  4. Durante la primera ejecución, i = 0, así cats[0] + ', ' se concatenará con la información ("Bill, ").
  5. Durante la segunda ejecución, i = 1, así cats[1] + ', ' agregará el siguiente nombre ("Jeff, ").
  6. Y así sucesivamente. Después de cada vez que se ejecute el bucle, se incrementará en 1 el valor de i (i++), entonces el proceso comenzará de nuevo.
  7. Cuando i sea igual a cats.length, el bucle se detendrá, y el navegador se moverá al siguiente segmento de código bajo el bucle.

Nota:

Hemos programado la condición de salida como i < cats.length, y no como i <= cats.length, porque los computadores cuentan desde 0, no 1 - inicializamos la variable i en 0, para llegar a i = 4 (el índice del último elemento del arreglo). cats.length responde 5, ya que existen 5 elementos en el arreglo, pero no queremos que i = 5, dado que respondería undefined para el último elemento (no existe un elemento en el arreglo con un índice 5). for the last item (there is no array item with an index of 5). Por ello, queremos llegar a 1 menos que cats.length (i <), que no es lo mismo que cats.length (i <=).

Nota:

Un error común con la condición de salida es utilizar el comparador "igual a" (===) en vez de "menor o igual a" (<=). Si queremos que nuestro bucle se ejecute hasta que i = 5, la condición de salida debería ser i <= cats.length. Si la declaramos i === cats.length, el bucle no debería ejecutarse , porque i no es igual a 5 en la primera iteración del bucle, por lo que debería detenerse inmediatamente.

Un pequeño problema que se presenta es que la frase de salida final no está muy bien formada:

Idealmente querríamos cambiar la concatenación al final de la última iteración del bucle, así no tendríamos una coma en el final de la frase. Bueno, no hay problema - podemos insertar un condicional dentro de nuestro bucle para solucionar este caso especial:

Importante:

Con for - como con todos los bucles - debes estar seguro de que el inicializador es repetido hasta que eventualmente alcance la condición de salida. Si no, el bucle seguirá repitiéndose indefinidamente, y puede que el navegador lo fuerce a detenerse o se interrumpa. Esto se denomina bucle infinito.