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.

¿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.

Resumen

• for...of es una estructura de bucle en JavaScript que permite iterar sobre los valores de objetos iterables como arrays, strings, mapas (Map), conjuntos (Set), y más.
• Es más adecuado que for...in cuando necesitas trabajar directamente con los valores en lugar de con los índices o claves.
• Ejemplos comunes: Iterar sobre arrays, cadenas de texto, mapas y conjuntos.

El bucle for...of es una herramienta poderosa y fácil de usar para recorrer elementos en colecciones en JavaScript, proporcionando una sintaxis clara y directa para trabajar con los valores de los objetos iterables.