Sección 1: JavaScript

Lección 19: Iteraciones

En esta lección vamos a aprender sobre iteraciones, sobre cómo hacer que el flujo de nuestro programa nos permita ejecutar repetidamente partes de nuestro código.

Vamos a crear un HTML que posea una etiqueta “script” que se encuentra enlazada a un archivo de JavaScript por ahora vacío.

Ahora declaramos un array llamado cosasParaHacer

¿Cuántos elementos posee mi array? Para saberlo podemos ejecutar el método length(), el cual nos devolverá el número de elementos.

También podríamos saber la longitud de cada uno de los elementos del array. Por ejemplo del primer elemento:

Ahora intentemos colocar un punto al final de cada elemento del array.

Imprimamos en la consola cada uno de los valores del array.

Comentemos todo el código salvo la definición del array cosasParaHacer.

Como vemos son un montón de líneas que debemos escribir. Imaginémonos lo que sería si tuviéramos que hacer para decenas o cientos de elementos. Como desarrolladores debemos hacer las cosas de una manera eficiente. Es por ello que debemos apoyarnos en las computadoras para nuestras tareas.

En este caso vamos a hacerlo a través de la incorporación de sentencias de iteración. La primera sentencia de iteración que vamos a ver es “for”. Incorporemos esta sentencia y luego analicemos cada una de sus partes.

La palabra “for” nos indica que vamos a definir un ciclo iterativo. Luego lo que hacemos es definir una variable llamada “i” y asignarle el valor 0. El nombre de la variable “i” es arbitrario, y generalmente se usa la letra “i” para hacer referencia a la palabra índice. Luego tenemos un punto y coma que indica el fin de la definición del índice.

Luego definimos una expresión, la cual permitirá que nunca ciclo se ejecute siempre y cuando esta expresión sea true (verdadera). En este caso vamos a decir que nuestro ciclo se ejecute mientras la variable “i”, que inicia en 0, sea menor al tamaño del array cosasParaHacer.

Finalmente definimos la variación de nuestro índice, que en este caso es un incremento de uno, definido por la expresión “i++”. La expresión “i++” es lo mismo que escribir “i = i + 1”.

Por lo tanto, podemos resumir la definición de nuestro ciclo “for” de la siguiente manera: itera teniendo en cuenta un índice definido por la variable “i” que inicia con el valor 0, itera mientras el valor del índice sea menor que el tamaño del array cosasParaHacer, y luego de cada iteración incrementa el valor del índice en uno.

Veamos qué sucede si imprimimos el valor del índice en la consola.

Como podemos ver, nuestro ciclo iterativo se repite 5 veces, arrancando con el índice con un valor 0 y finalizando con el índice con un valor de 4. Además, podemos apreciar cómo el valor de nuestro índice se incrementar de uno en uno.

Ahora añadamos un punto al final de cada elemento del array.

Ahora intentemos vaciar nuestro array utilizando una ciclo for. Para ello deberíamos usar el método pop() de nuestro array. Podríamos hacerlo de la siguiente manera:

Como podemos ver nuestro array no hay quedado vacío como queríamos. ¿Por qué ocurre esto? Porque al momento de comparar en cada iteración, nuestro índice se va incrementando en uno, pero al mismo tiempo el tamaño de nuestro array va decrementando en uno gracias al método pop().

Por lo que nuestro for no se ejecuta cinco veces, sino que se ejecuta tres veces, hasta el momento en que el índice es igual a tres, y el tamaño del de array es igual a dos. ¿Cómo podemos solucionar esto?

Para solucionarlo debemos lograr que en la comparación de nuestro for, el índice siempre se compare con el tamaño inicial de nuestro array, el cual en nuestro ejemplo es cinco. Para ello vamos a definir una variable antes de nuestro for, y en dicha variable almacenaremos el valor del tamaño inicial de nuestro array.

Comentemos todo el código salvo la definición del array cosasParaHacer.

Como vemos ahora nuestro programa funciona correctamente.

Veamos ahora el ciclo iterativo conocido como “while”, el cual se puede ver de la siguiente manera:

Como podemos ver el ciclo “while” (mientras) posee los mismos elementos del ciclo for, pero con la particularidad de que en la definición del while solo tendremos la expresión que deberá cumplirse para que se ejecute el código dentro del ciclo.

Podemos ver que la definición de la variable índice, en este caso llamado contador, se realiza antes de la definición del “while”, y que el incremento del contador se realiza dentro del bloque de código del ciclo “while”.

Podemos leer el ejemplo anterior de la siguiente manera: mientras la variable contador sea menor que 10, ejecuta el bloque de código que tienen esta sentencia “while”.

Ejecutemos este código para ver su salida en consola.

Como podemos ver nuestro contador toda los valores de 0 a 9, ya que cuando toma el valor 10 el código ya no se ejecuta.

¿Podemos cambiar la sentencia para que la ejecución iterativa de código ocurra diez veces siempre que nuestro contador sea mayor que cero? Si, claro que podemos. Veamos cómo se debería hacer.

Como podemos ver, en este caso inicializamos nuestro contador con el valor 10, cambiamos la expresión del “while” para que se ejecute siempre que el contador sea mayor que cero, y aplicamos un decremento de uno en nuestro contador por cada ejecución del ciclo.

Al usar un ciclo “while” debemos asegurarnos de que en algún momento nuestra condición dejará de ser true (verdadera) y por lo tanto el ciclo terminará. Caso contrario nuestro ciclo se ejecutará por siempre.

Esto es lo que se conoce como ciclo infinito, y debemos evitarlo, ya que llevará a que nuestro programa se ejecute por siempre dentro del ciclo de un “while”.

Ahora veamos el tercer ciclo iterativo: do while.

¿Nos parece igual al ciclo “while”? No son iguales. La diferencia es que el ciclo “while” chequea la condición primero, y luego ejecuta el código en caso de que esta condición se cumpla, y lo seguirá haciendo mientras lo haga.

En cambio el ciclo “do while” ejecuta primero el bloque de código y luego evalúa la condición.

Veamos con un ejemplo esto:

Como podemos ver solo nos imprimirá el contador del ciclo do while ya que en este caso ejecuta el código y luego evalúa la condición, que claramente no se cumple ya que 10 no es mayor que 10.

Para ser sinceros, la mayoría de las veces usaremos los ciclos for, pero JavaScript nos brinda una mejor manera de hacerlo. A partir de la versión 5 del estándar ECMAScript, JavaScript posee una nueva sentencia para iterar: el método forEach.

¿Qué es el método forEach? Veamos la diferencia entre un ciclo “for” y uso del método “forEach”. Ambos hacen lo mismo, pero su sintaxis difiere un poco. Veamos la sintaxis de ambos:

Como podemos ver ambas sentencias imprimen el mismo resultado. Analicemos la sintaxis del método forEach. Primo, forEach es un método del objeto array, el cual se llama enviándole como parámetro una función, la cual a su vez tiene dos parámetros:

el nombre del objeto con el que podremos acceder al contenido de la posición del array que estamos visitando en la iteración, y como segundo parámetro al índice que nos indicará el número de la posición del array que estamos visitando en la iteración.

¿Podemos definir la función fuera del forEach? Por supuesto que si. Veamos como quedaría:

Vemos que tenemos el mismo resultado. Además a la función imprimirCosasParaHacer la podríamos convocar desde otras partes de nuestro código.

Por último, vimos que forEach es parte del estándar ECMAScript 5. Como vimos en el curso de diseño web, debemos corroborar que los elementos sean compatibles con los distintos navegadores web.

Para ello, vamos a ingresar al sitio caniuse.com, el cual ya usamos para corroborar la compatibilidad de elementos de CSS en distintos navegadores web. En este caso comprobaremos la compatibilidad del método forEach.

Como podemos ver, forEach pertenece a ECMAScript 5 y posee compatibilidad con todos los navegadores web en sus últimas versiones, salvo una compatibilidad parcial en el navegador Opera Mini.

Bueno, eso fue todo por esta lección.

Nos vemos en la siguiente.

¡Adios!