Si alguien llega a JavaScript desde la simplicidad de Python le puede costar diferenciar los bucles for in de los for of.
for (valor [in/of] colección) {}valor devuelve: |
|||
|---|---|---|---|
| Bucle | Itera sobre | Sobre Array | Sobre Objeto |
| for in | Propiedades de un objeto | Un índice | Una clave |
| for of | Valores de un iterable, como son: Arrays, Strings, Maps, NodeLists, etc. Pero NO objetos. | Un valor | Error, no es iterable |
// ==== Definamos un Array y un objeto para probar después ====
const array = ["hola", 1,2,3, true, null, "adios"]
array.propiedadPersonalizada = "Esto es una propiedad personalziada";
console.log(array)
// ["hola", 1, 2, 3, true, null, "adios"] -> Observa que no incluye la propiedad
const objeto = {primera_clave: "primer_valor", segunda_clave: "segundo_valor"}
Probemos con for in:
// ==== Hagamos pruebas con los bucles ====
// Problemos FOR IN
for (elemento in array) {
console.log(Esto muestra es un indice: ${elemento} y esto un valor: ${array[elemento]})
}
/
"Esto muestra es un indice: 0 y esto un valor: hola"
"Esto muestra es un indice: 1 y esto un valor: 1"
"Esto muestra es un indice: 2 y esto un valor: 2"
"Esto muestra es un indice: 3 y esto un valor: 3"
"Esto muestra es un indice: 4 y esto un valor: true"
"Esto muestra es un indice: 5 y esto un valor: null"
"Esto muestra es un indice: 6 y esto un valor: adios"
"Esto muestra es un indice: propiedadPersonalizada y esto un valor: Esto es una propiedad personalziada"
/
for (elemento in objeto) {
console.log(Esto muestra la clave: ${elemento} y esto el valor: ${objeto[elemento]})
}
/
"Esto muestra la clave: primera_clave y esto el valor: primer_valor"
"Esto muestra la clave: segunda_clave y esto el valor: segundo_valor"
/
Probemos con for of:
for (elemento of array) {
console.log(elemento)
}
/
"hola"
1
2
3
true
null
"adios"
/
for (elemento of objeto) {
console.log(elemento)
}
// TypeError: objeto is not iterable
El cuadro superior resume bien la situación, pero ver el código puede ser útil.