hand Inicio

SERVICIOS

Salir

nochedía

DESARROLLO WEB con
GATSBY y WORDPRESS

emoji Cursos [24]
emoji Themes Gatsby [5]
emoji Themes WordPress [2]
emoji Blog [83]
emoji Herramientas [11]

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

200 palabras
1 minutos
May 17, 2020
blogjavascript

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

  1. Antes, qué son los objetos y los arrays?
  2. Iterando objetos con for .. in
  3. Iterando arrays con 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

Qué tal la entrada?
👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏

Más entradas

Privacidad
by kuworking.com
[ 2020 >> kuworking ]