Iteración y Recorrido de Arrays

Tienes un array con tres frutas y quieres mostrarlas todas. Podrías escribir frutas[0], frutas[1] y frutas[2], pero ¿y cuando sean trescientas? Lo que necesitas es recorrer el array: pasar por cada elemento, uno a uno, y hacer algo con él.

Ya conoces dos herramientas que sirven para esto, los bucles while y for. Aquí les sumamos una estructura nueva, for...of, y un método que traen los propios arrays: .forEach().

Bucle while#

Para recorrer un array, esa condición suele basarse en el índice. Creas una variable con let que hace de puntero, empieza en 0 y en cada vuelta le sumas 1 para apuntar al siguiente elemento.

let frutas = ['🍎', '🍌', '🍓']let i = 0 // lo usaremos como índicewhile (i < frutas.length) {  console.log(frutas[i]) // imprime el elemento en la posición i  i++ // incrementamos el índice en 1 para la siguiente iteración}

Cuando i llega a 3 ya no es menor que frutas.length, la condición deja de cumplirse y el bucle termina. Si te olvidas del i++, el bucle no acaba nunca.

Bucle for#

El bucle for hace lo mismo, pero lo junta todo en una línea: dónde empieza el índice, hasta cuándo sigue y cómo avanza. La condición vuelve a ser la longitud del array.

let frutas = ['🍎', '🍌', '🍓']for (let i = 0; i < frutas.length; i++) {  console.log(frutas[i]) // imprime el elemento en la posición i}

Como el índice lo controlas tú, también puedes recorrer el array al revés. Empiezas en el último elemento, sigues mientras no bajes de 0 y usas i-- en lugar de i++:

let frutas = ['🍎', '🍌', '🍓']for (let i = frutas.length - 1; i >= 0; i--) {  console.log(frutas[i]) // imprime el elemento en la posición i}

El último índice es frutas.length - 1 y no frutas.length, porque los índices empiezan en 0.

Bucle for...of#

Vale, pero muchas veces el índice te da igual: solo quieres cada fruta. Para ese caso existe for...of, una estructura de control más simple que for porque no necesitas crear ni mantener ningún índice.

let frutas = ['🍎', '🍌', '🍓']for (let fruta of frutas) {  console.log(fruta) // imprime el elemento de esta vuelta}

Se lee casi como una frase: «para cada fruta de frutas». En cada vuelta, la variable fruta contiene directamente el elemento que toca.

El método array.forEach()#

En la clase anterior viste que los arrays tienen métodos para añadir o eliminar elementos. Tienen muchos más, y uno de ellos es array.forEach(), que ejecuta una función por cada elemento del array.

Esa función recibe tres parámetros: el elemento de esa vuelta, su índice y el propio array.

let frutas = ['🍎', '🍌', '🍓']frutas.forEach(function (fruta, index, originalArray) {  console.log(fruta) // imprime el elemento de esta vuelta})

No estás obligado a usar los tres. Con una arrow function y solo los parámetros que necesitas queda mucho más corto:

let frutas = ['🍎', '🍌', '🍓']frutas.forEach((fruta) => {  console.log(fruta) // imprime el elemento de esta vuelta})

Fíjate en qué te da cada uno en cada vuelta:

¿Cuál usar? Depende...#

Cuatro formas de hacer lo mismo. ¿Con cuál te quedas? Depende de lo que necesites en cada caso:

* Técnicamente no puedes usar la sentencia break para salir de un forEach. Se puede simular lanzando una excepción y capturándola en un bloque try/catch externo, pero es una mala práctica que no te recomiendo.

A la hora de elegir:

• for y while son los más generales. Tú controlas el índice, así que puedes saltar a posiciones concretas, cambiar el orden de iteración o salir del bucle antes de que termine.
• for...of es el más cómodo cuando solo necesitas los valores y el índice no te importa. Además sirve para otros iterables que no son arrays, como las cadenas de texto o los conjuntos (sets).
• forEach es una forma muy legible de recorrer un array si no necesitas break ni controlar el índice a mano.