Recorrer arrays con for y for...of

Una vez que sabemos crear y modificar arrays, necesitamos aprender a recorrer sus elementos.

Para ello podemos utilizar el for tradicional o el for...of.

Ambos permiten recorrer un array, pero funcionan de forma diferente.

---

for normal

El for tradicional nos permite recorrer un array utilizando su índice.

Por ejemplo:

let frutas = ["manzana", "plátano", "naranja"];

for (let i = 0; i < frutas.length; i++) {

    console.log(frutas[i]);

}

Salida:

manzana
plátano
naranja

En cada repetición, i contiene el índice del elemento que queremos consultar.

i	frutas[i]
0	"manzana"
1	"plátano"
2	"naranja"

Por eso para acceder al propio elemento escribirmos array[i].

Una ventaja importante del for normal es que tenemos acceso al índice.

Por ejemplo:

for (let i = 0; i < frutas.length; i++) {

    console.log(`Fruta ${i}: ${frutas[i]}`);

}

Salida:

Fruta 0: manzana
Fruta 1: plátano
Fruta 2: naranja

---

for...of

El for...of permite recorrer directamente los elementos del array, sin necesidad de utilizar los índices.

Su sintaxis es:

for (let elemento of array) {

    // Código

}

Por ejemplo:

let frutas = ["manzana", "plátano", "naranja"];

for (let fruta of frutas) {

    console.log(fruta);

}

Salida:

manzana
plátano
naranja

En cada repetición, la variable fruta contiene directamente el elemento actual.

Esto hace que el código sea más sencillo cuando no necesitamos conocer la posición del elemento.

---

Diferencia entre for y for...of

Podemos resumirlo de esta manera:

for normal

Trabajamos con el índice:

for (let i = 0; i < frutas.length; i++) {

    console.log(frutas[i]);

}

for...of

Trabajamos directamente con el elemento:

for (let fruta of frutas) {

    console.log(fruta);

}

Por tanto:

• Utiliza for cuando necesites conocer o utilizar el índice.
• Utiliza for...of cuando simplemente quieras recorrer los elementos.

---

Ejemplo

Dado el siguiente array:

let numeros = [10, 20, 30, 40];

Con for podemos mostrar el índice y el valor:

for (let i = 0; i < numeros.length; i++) {

    console.log(`Índice: ${i}, Valor: ${numeros[i]}`);

}

Con for...of podemos mostrar directamente los valores:

for (let numero of numeros) {

    console.log(numero);

}

Ambos recorren el mismo array, pero el for...of resulta más sencillo cuando no necesitamos trabajar con los índices.