Diferencias entre 'for...of' y 'for...in' en ES6

En JavaScript, 'for...of' y 'for...in' son dos tipos de bucles que se utilizan para iterar sobre diferentes elementos. Una frecuente duda que surge es cómo se diferencia exactamente el bucle 'for...of' en ES6 del 'for...in'. La respuesta a esa incógnita es que 'for...of' itera sobre objetos iterables como son los arreglos.

Bucle For...of

El bucle 'for...of' se introdujo en ECMAScript 6 (ES6) y es utilizado principalmente para objetos que son iterables. Un objeto iterable es aquel que define su comportamiento durante la iteración, como los arreglos.

Un ejemplo de uso del bucle 'for...of' sería el siguiente:

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

for (const val of arr) {
  console.log(val);
}

El bucle anterior imprimirá cada uno de los elementos del arreglo en la consola. Esta herramienta es especialmente útil cuando quieres trabajar con todos los elementos de un arreglo (u otro objeto iterable) en orden.

Bucle For...in

Por otro lado, el bucle 'for...in' se utiliza para iterar sobre las propiedades enumerables de un objeto. 'Enumerable' significa que la propiedad puede aparecer en un bucle 'for...in', lo cual es falso para ciertas propiedades integradas.

Aquí hay un ejemplo de cómo usar el bucle 'for...in':

let obj = {a: 1, b: 2, c: 3};

for (const prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

El código anterior imprimirá el nombre y el valor de cada propiedad del objeto en la consola.

Conclusión

En resumen, la principal diferencia entre 'for...of' y 'for...in' es que 'for...of' itera sobre los valores de los elementos de OBJETOS ITERABLES, como los arreglos. Por otro lado, 'for...in' itera sobre las PROPIEDADES ENUMERABLES de un objeto. Ambas estructuras de control son útiles en diferentes escenarios y puedes usarlas según tus necesidades al programar en JavaScript.