hand Inicio

Loops de JavaScript, diferencias entre FOR..IN versus FOR..OF

En una frase, el for in aplica a objetos, y el for of aplica a arrays, para el primero deberíamos utilizar siempre hasOwnProperty por lo que yo normalmente me quedo con el for of

Antes, qué son los objetos y los arrays?

Los dos son estructuras de datos, pero

  • los objetos no son iterables mientras que las arrays lo son
  • los objetos tienen keys de cualquier valor, los arrays tienen keys numéricos y por estricto orden
js
const myObject = { name: 'kuworking', description: 'Aprende desarrollo web en kuworking.com' }
const myArray = ['kuworking', 'Aprende desarrollo web en kuworking.com']

console.log(myObject.name) // 'kuworking'
console.log(myObject[name]) // 'kuworking'
console.log(myArray[0]) // 'kuworking'

Y puedo convertir el objeto en arrays extrayendo sus keys, sus values, o todo a la vez

js
const myObject = { name: 'kuworking', description: 'Aprende desarrollo web en kuworking.com' }

console.log(Object.keys(myObject)) // ['name', 'description']
console.log(Object.values(myObject)) // ['kuworking', 'Aprende desarrollo web en kuworking.com']
console.log(Object.entries(myObject)) // [['name','kuworking'],['description', 'Aprende desarrollo web en kuworking.com']]

Visto esto, ya podemos pasar a los loops

Iterando objetos con for .. in

El for in nos sirve exclusivamente para iterar objetos

js
const myObject = { name: 'kuworking', description: 'Aprende desarrollo web en kuworking.com' }

for (const property in myObject) {
if (myObject.hasOwnProperty(property)) {
console.log(property)
console.log(myObject.property) // no funciona, porque no tenemos ninguna propiedad de nombre 'property'
console.log(myObject[property]) // sí funciona
}
}

/*
name
undefined
"kuworking"
description
undefined
"Aprende desarrollo web en kuworking.com"
*/

El problema de utilizar este loop es que nos vemos obligador a utilizar myObject.hasOwnProperty(property)

Por qué? Para asegurarnos que estamos iterando sobre propiedades del objeto que yo he definido, porque pueden existir otras propiedades en el objeto si se ha modificado su prototype

Al final a mi me resulta incómodo tener que escribir esta validación, por lo que encuentro más útil prescindir de este loop e irme al siguiente, al for of

Iterando arrays con for .. of

Este loop sólo itera arrays, por lo que no nos servirá para objetos

Pero antes hemos visto cómo convertir objetos en arrays 😎

El único pero es que nadie garantizará el orden en esos arrays ya que esto no es necesario según la especificación, pero en la práctica sí parece que se respeta ese orden (Stack Overflow)

Para utilizar el for of con objects podemos hacer lo siguiente

js
const myObject = { name: 'kuworking', description: 'Aprende desarrollo web en kuworking.com' }
for (const entry of Object.entries(myObject)) {
console.log(entry)
console.log(entry[0])
console.log(entry[1])
}

/*
[
"name",
"kuworking"
]
"name"
"kuworking"

[
"description",
"Aprende desarrollo web en kuworking.com"
]
"description"
"Aprende desarrollo web en kuworking.com"
*/

O en la versión desestructurada

js
const myObject = { name: 'kuworking', description: 'Aprende desarrollo web en kuworking.com' }
for (const [key, entry] of Object.entries(myObject)) {
console.log(key + ' -> ' + entry)
}

/*
"name -> kuworking"
"description -> Aprende desarrollo web en kuworking.com"
*/

Y para los arrays, pues exactamente lo mismo, pero sin el Object.entries

draw of me

Hola, tienes en mente desarrollar una web?

Si quieres, te ayudo

Escríbeme