La estructura for...of

En JavaScript, la estructura for...of se utiliza para iterar sobre valores de objetos iterables, como arrays, strings, mapas (Map), conjuntos (Set), y más. A diferencia de for...in, que itera sobre las claves (o índices) de un objeto, for...of itera directamente sobre los valores de esos objetos.

1. Cómo funciona for...of? #

El bucle for...of recorre los elementos de un objeto iterable uno por uno, asignando cada valor a una variable en cada iteración.

Sintaxis básica:

1for (variable of iterable) {
2  // Código a ejecutar en cada iteración
3}

• variable: Es una variable que se asigna al valor de cada elemento del iterable en cada iteración.
• iterable: Es un objeto que se puede iterar, como un array, string, Map, Set, etc.

Ejemplo con un array #

Supongamos que tienes un array de frutas y quieres imprimir cada una de ellas:

 
1let frutas = ["Manzana", "Banana", "Cereza"];
2
3for (let fruta of frutas) {
4  console.log(fruta);
5}
Salida de consola
Manzana
Banana
Cereza

En este ejemplo:

• El bucle for...of itera sobre cada elemento del array frutas.
• En cada iteración, la variable fruta toma el valor de un elemento del array.

Ejemplo con un string #

Puedes usar for...of para iterar sobre los caracteres de un string:

 
1let palabra = "JavaScript";
2
3for (let letra of palabra) {
4  console.log(letra);
5}
Salida de consola
J
a
v
a
S
c
r
i
p
t

En este ejemplo:

• El bucle for...of recorre cada carácter de la cadena "JavaScript".
• En cada iteración, la variable letra toma el valor de un carácter.

Ejemplo con un Map #

for...of también es útil para iterar sobre las entradas de un Map, que es una colección de pares clave-valor.

 
1let mapa = new Map([
2  ["nombre", "Juan"],
3  ["edad", 30]
4]);
5
6for (let [clave, valor] of mapa) {
7  console.log(`${clave}: ${valor}`);
8}
Salida de consola
nombre: Juan
edad: 30

En este ejemplo:

• El bucle for...of recorre cada entrada (par clave-valor) en el Map.
• Usando la desestructuración de arrays, la variable clave toma el valor de la clave y valor toma el valor asociado.