Estructura iterativa: for

Estructura iterativa: for

En JavaScript contamos con otra estructura iterativa que nos permite tener un poco mas de control sobre los ciclos ejecutados, se trata de bucle o “Loop” for y en este apartado hablaremos de el.

La instrucción for nos permite crear bucles que repitan su bloque de código una cierta cantidad de veces, esto gracias a las expresiones opcionales que podemos declarar en su condición:

for (inicialización; condición; actualización) {
    // Bloque a ejecutar
}

La estructura básica del bucle for es la siguiente :

  1. Inicializador: Se ejecuta antes de que comience el ciclo y generalmente se emplea para inicializar cualquier variable utilizada en este.
  2. Condición: Como su nombre lo indica, esta especifica una condición que debe evaluarse como verdadera para la siguiente iteración.
  3. Actualizador: Esta expresión final es una declaración que se ejecuta al final de cada ciclo, se usa con mayor frecuencia para aumentar o disminuir el valor del contador, pero se puede usar para cualquier propósito.
    for (i = 1 ; i<=10 ; i++) {
        document.write(i + "<br />");
    }
    document.write(i);

    En el ejemplo anterior inicializamos la variable i con valor de 1, la condición comprueba que el valor de i sea menor o igual a 10, al cumplirse la condición ejecuta el bloque de código de la estructura y el contador actualiza el valor de i en 1, esto se ejecuta hasta que la condición no se cumpla, es decir hasta que i sea mayor a 10.

    Veamos el siguiente ejemplo:

    for (var uvas = 10 ; uvas > 0 ; uvas--) {
      console.log("Tengo " + uvas + " me comeré una...");
    }
    console.log("Ya no tengo uvas :(");
    "Tengo 10 me comeré una..."
    "Tengo 9 me comeré una..."
    "Tengo 8 me comeré una..."
    "Tengo 7 me comeré una..."
    "Tengo 6 me comeré una..."
    "Tengo 5 me comeré una..."
    "Tengo 4 me comeré una..."
    "Tengo 3 me comeré una..."
    "Tengo 2 me comeré una..."
    "Tengo 1 me comeré una..."
    "Ya no tengo uvas :("

    En el ejemplo anterior declaramos una variable y la inicilizamos en 10, luego en la siguiente expresión comprobamos si es mayor a 0, de ser así el actualizador pasa a restarle 1 al valor guardado en esta variable y ejecuta el bloque con el valor actual de la variable, este ciclo se hace siempre y cuando 10 sea menor a 0.

    Podemos usar los bucles while, do-while y for para lograr los mismos resultados, sin embargo la estructura for es el más común ya que mantiene todos los detalles del bucle (la inicialización, la condición y el incremento) en un lugar y separados del bloque de código.

    Expresiones opcionales

    Cabe decir que las tres expresiones del ciclo for son opcionales dentro de su condición pero estas deben de estar respaldadas en otra parte de la estructura para evitar resultados no deseados. Veamos:

    Podemos escribir la estructura sin la expresión de inicialización pero la inicializamos fuera del ciclo.

    var i = 0;
    
    for ( ; i < 4; i++) {
        console.log(i);
    }
    "0"
    "1"
    "2"
    "3"

    Cuando omitimos la inicialización es necesario colocar el ; para indicar la separación de las expresiones aunque no sean establecida.

    También podemos eliminar la condición del bucle, para esto usaremos la instrucción break para decirle al ciclo que deje de funcionar una vez se cumpla la condición.

    var i = 0;
    
    for (  ;  ; i++) {
      if (i > 3) {
         break;
      }
        console.log(i);
    }
    "0"
    "1"
    "2"
    "3"

    La declaración break debe incluirse si la condición se omite en la estructura, de ​​lo contrario, el ciclo entrará en un bucle infinito bloqueando la aplicación y el navegador.

    Por último, la expresión final (Actualizador) la podemos omitir de la condición, colocandola al final de la estructura. Cabe recordar que ambos puntos y coma deben estar incluidos o el ciclo no funcionará.

    var i = 0;
    
    for ( ; ; ) {
      if (i > 3) {
         break;
      }
      console.log(i);
      i++;
    }
    "0"
    "1"
    "2"
    "3"

    Como podemos ver en los ejemplos anteriores, las tres expresiones de la estructura for hacen que el código más conciso y legible. Sin embargo puede ser útil saber que estas se pueden omitir por algún motivo.

    Más adelante veremos como esta estructura nos puede ayudar a trabajar e iterar sobre otros objetos en JavaScript.

    avatar