Bucle for…of de JavaScript explicado: sintaxis, ejemplos y buenas prácticas

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

answer.## 1. Introducción

Al trabajar con datos en JavaScript, la repetición es esencial. Para procesar datos como arreglos y cadenas en orden, JavaScript ofrece varias sintaxis de bucle. Entre ellas, la sentencia for…of destaca como una opción simple pero poderosa.

En este artículo explicaremos la sentencia for…of de JavaScript en detalle, desde lo básico hasta casos de uso más avanzados. Comenzaremos con ejemplos amigables para principiantes y luego cubriremos patrones prácticos utilizados en desarrollo intermedio y del mundo real. Después de leerlo, podrás usar la sentencia for…of con confianza sin quedarte atascado al escribir bucles.

2. ¿Qué es la sentencia for…of de JavaScript? Uso básico

2.1 Visión general de la sentencia for…of

La sentencia for…of de JavaScript es una sintaxis que permite iterar sobre objetos iterables de forma limpia y sencilla. Está diseñada para manejar eficientemente estructuras de datos como arreglos, cadenas, Map y Set.

2.2 Sintaxis básica de la sentencia for…of

Utiliza la siguiente sintaxis para procesar cada elemento de un objeto iterable en orden.

for (const element of arrayOrObject) {
  // 반복 처리
}

Esta sintaxis es útil cuando deseas obtener fácilmente cada elemento de un arreglo o una cadena.

2.3 Ejemplos de código prácticos

Ejemplo 1: Mostrar los elementos de un arreglo en orden

const fruits = ['Apple', 'Banana', 'Orange'];
for (const fruit of fruits) {
  console.log(fruit);
}

Salida:

Apple  
Banana  
Orange

Ejemplo 2: Mostrar cada carácter de una cadena

const word = 'JavaScript';
for (const char of word) {
  console.log(char);
}

Salida:

J  
a  
v  
a  
S  
c  
r  
i  
p  
t

2.4 Tipos de datos compatibles

La sentencia for…of puede usarse con los siguientes objetos iterables:

1. Arreglos (Array)
2. Cadenas (String)
3. Objetos Map
4. Objetos Set
5. El objeto arguments (un objeto pasado como argumentos de función)
6. Objetos NodeList (una colección de elementos HTML)

Nota: No puedes aplicarla directamente a literales de objeto (explicaremos la solución alternativa más adelante).

3. Diferencias y comparaciones con otras sintaxis de bucle

3.1 Diferencias entre for…of y for…in

Ejemplo: Uso de for…in

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key); // a, b, c
}

Nota importante:
Como for…in puede enumerar propiedades de la cadena de prototipos también, debes tener cuidado, sobre todo al iterar sobre objetos.

3.2 Diferencias entre for…of y forEach

Ejemplo: Uso de forEach

const arr = [1, 2, 3];
arr.forEach(num => {
  console.log(num);
});

Nota importante:
Dado que forEach no puede detener el bucle de forma anticipada, se recomienda la sentencia for…of cuando el control del flujo es importante.

4. Ejemplos prácticos y técnicas avanzadas

4.1 Filtrar un arreglo

El siguiente ejemplo muestra solo los números pares.

const numbers = [1, 2, 3, 4, 5];
for (const num of numbers) {
  if (num % 2 === 0) console.log(num); // Output only even numbers
}

Salida:

2  
4

4.2 Obtener claves y valores de un Map

Este ejemplo muestra cómo obtener claves y valores usando un objeto Map.

const map = new Map([
  ['name', 'Taro'],
  ['age', 25]
]);
for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}

Salida:

name: Taro  
age: 25

4.3 Combinar con procesamiento asíncrono

A continuación, un ejemplo de manejo de operaciones asíncronas con la sentencia for…of.

const urls = ['url1', 'url2', 'url3'];

async function fetchData() {
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  }
}
fetchData();

En este ejemplo, cada solicitud a la API se ejecuta en orden, por lo que puedes obtener datos manteniendo la secuencia de ejecución.

.## 5. Notas y Solución de Problemas

5.1 Cuando Obtienes un Error con Objetos

La sentencia for…of no puede usarse con literales de objeto. En su lugar, utiliza Object.entries().

Ejemplo: Procesamiento con Object.entries()

const obj = { a: 1, b: 2 };
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

Salida:

a 1  
b 2

Con este enfoque, puedes iterar eficientemente a través de las claves y valores de un objeto.

5.2 Consideraciones de Rendimiento

La sentencia for…of generalmente ofrece un rendimiento suficiente para casos de uso típicos, pero debes tener cuidado al trabajar con conjuntos de datos grandes. Si es necesario, considera usar un bucle for basado en índices o un bucle while.

Ejemplo: Bucle for basado en índices

const largeArray = Array(1000000).fill(1);
for (let i = 0; i < largeArray.length; i++) {
  // Performance-focused processing
  console.log(largeArray[i]);
}

5.3 Añadiendo Manejo de Errores

Al combinar procesamiento asíncrono con la sentencia for…of, asegúrate de incluir un manejo de errores adecuado.

Ejemplo: Manejo de errores con try…catch

const urls = ['url1', 'url2', 'url3'];

async function fetchData() {
  for (const url of urls) {
    try {
      const response = await fetch(url);
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('An error occurred:', error);
    }
  }
}
fetchData();

6. Sección de Preguntas Frecuentes

P1: ¿Funciona la sentencia for…of en todos los navegadores?

R1:
La sentencia for…of se introdujo en ES6 (ECMAScript 2015). Es compatible con los navegadores modernos, pero no funciona en Internet Explorer.

Navegadores Compatibles:

• Google Chrome 38 o superior
• Firefox 36 o superior
• Safari 7.1 o superior
• Edge 12 o superior

Si necesitas soportar navegadores más antiguos, usa Babel para transpilar tu código o elige otra sintaxis de bucle.

P2: ¿Cómo puedo obtener el índice al usar for…of?

R2:
Con for…of, no puedes acceder directamente a los índices, pero puedes usar el método entries() para obtener tanto el índice como el valor al mismo tiempo.

Ejemplo:

const fruits = ['Apple', 'Banana', 'Orange'];
for (const [index, fruit] of fruits.entries()) {
  console.log(index, fruit);
}

Salida:

0 Apple  
1 Banana  
2 Orange

P3: ¿Puedo usar for…of con literales de objeto?

R3:
No. La sentencia for…of es solo para objetos iterables. Los literales de objeto no son iterables, pero puedes iterar a través de sus claves y valores usando Object.entries().

Ejemplo:

const obj = { a: 1, b: 2 };
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

Salida:

a 1  
b 2

P4: ¿Puedo usar for…of con operaciones asíncronas?

R4:
Sí. Puedes usarlo junto con async/await.

Ejemplo:

const urls = ['url1', 'url2', 'url3'];

async function fetchData() {
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  }
}
fetchData();

P5: ¿Cuál es la diferencia entre for…of y forEach?

R5:
La tabla a continuación resume las diferencias.

7. Resumen

En este artículo, cubrimos los siguientes puntos clave sobre la sentencia for…of de JavaScript.

• Cómo entender la sintaxis básica y ejemplos de uso y aplicarla para iterar sobre arreglos y cadenas
• Las diferencias y mejores casos de uso en comparación con otras sintaxis de bucle como for…in y forEach
• Ejemplos avanzados que incluyen objetos Map y Set, así como combinarlos con procesamiento asíncrono
• Una sección práctica de FAQ para resolver preguntas comunes

7.1 Beneficios de la Sentencia for…of

• Simple y altamente legible
• Soporte flexible para objetos iterables
• Control de bucle sencillo porque soporta break y continue

markdown.## 8. Qué aprender a continuación

Una vez que domines la sentencia for…of, es una buena idea aprender las siguientes características como próximo paso.

1. Sintaxis de propagación (…)

• Una característica útil para expandir y combinar arrays y objetos.

1. Asignación por desestructuración

• Una técnica para extraer valores de arrays y objetos de forma sencilla.

1. Promesas y async/await con más detalle

• Aprende formas eficientes de escribir código asíncrono.

Al combinar estas características, podrás crear programas JavaScript más avanzados.

Reflexiones finales

Este artículo ofreció una guía completa sobre la sentencia for…of de JavaScript, abarcando desde los conceptos básicos hasta casos de uso prácticos para el desarrollo real.

Acciones de ejemplo para tu próximo paso:

• Implementa la sentencia for…of en tu propio código y experimenta con ella.
• Intenta procesar arrays, Map y Set para profundizar tu comprensión.
• Desafíate a ti mismo con características más avanzadas de ES6 para elevar tus habilidades.