Navegando en JavaScript: For of & For in

🚀Bienvenid@, a continuación quiero mostrarte la diferencia entre For of y For in. ¡Comenzemos!

JavaScript nos ofrece ciertas estructuras bucle que pueden ser confundidas fácilmente en un principio (y bueno, en el futuro también 🤠). ¿Cuál será la diferencia entre ellos y cuándo debemos usar cada uno?, ahora pasaremos a ver que tipos de colecciones son compatibles con cada For y la forma de iterar sobre sus elementos.

1️⃣For of

Este bucle se utiliza sobre elementos de una colección iterable, como un array. El for of itera directamente sobre los valores, sin la necesidad de acceder a los índices.
Vamos a ver un ejemplo:

//Estructura basica del foroffor (constiteratorofobject) {
  //code
}

Ahora con un arreglo de pájaros 🐦:

const arrayBirds = [ "Parrots", "Falcons", "Eagles", "Emus", "Caracaras", "Egrets" ];

for (const bird of arrayBirds) {
  console.log(bird);
}

Durante cada iteración, bird tomará el valor del siguiente elemento del array y se ejecutará el bloque de código, esto se repite hasta que se hayan recorrido todos los elementos del arreglo.
En este caso, al iterar sobre arrayBirds (recuerda, sin necesidad de usar los índices), nos muestra sus valores en consola:
Parrots Falcons Eagles Emus Caracaras Egrets.
Te invito a que pruebes con tus propios arreglos y los mezcles con la materia que hemos aprendido, como condicionales o funciones, para más placer (o sufrimiento 😄)

Ahora, si convertimos el arrelglo de pájaros en un objeto e intentamos usar el For of, nos arrojará un querido error:
"TypeError: objetoPajaros is not iterable"
Esto es un recordatorio de que los objetos no tienen una secuencia definida que nos deje iterar sobre ellos por defecto, para esto está el For In.

2️⃣For in

Este bucle se utiliza para iterar sobre los nombres de las propiedades o las claves de los objetos.
Vamos a los ejemplos:

//Estructura basica delforinfor (constkey inobject) {
    //code
}

Ahora, con un objeto ya visto en clases anteriores vamos a iterar e imprimir solo sus claves:

const objSuscripciones = {
  "Free": "Solo puedes tomar los cursos gratis",
  "Basic": "Puedes tomar casi todos los cursos de Platzi durante un mes",
  "Expert": "Puedes tomar casi todos los cursos de Platzi durante un año",
  "ExpertPlus": "Tú y alguien más pueden tomar TODOS los cursos de Platzi durante un año"
}

for (const suscripcion in objSuscripciones) {
    console.log(suscripcion);
}

Durante cada iteración, suscripcion representa cada nombre de la propiedad o las claves del objeto y esto nos imprime:
Free Basic Expert ExpertPlus.
Pero, ¿cómo podemos imprimir el objeto completo usando for in?
Aquí es donde entra en juego la memoria y más que eso, si hemos practicado las clases anteriores, vamos a ver como:

const objSuscripciones = {
  "Free": "Solo puedes tomar los cursos gratis",
  "Basic": "Puedes tomar casi todos los cursos de Platzi durante un mes",
  "Expert": "Puedes tomar casi todos los cursos de Platzi durante un año",
  "ExpertPlus": "Tú y alguien más pueden tomar TODOS los cursos de Platzi durante un año"
}

for (const suscripcion in objSuscripciones) {
  console.log(suscripcion+ ": " + objSuscripciones[suscripcion]);
}

Ya que contamos con la clave suscripcion en cada iteración, podemos utilizar objSuscripciones[suscripcion] para acceder al valor correspondiente de esa propiedad, por lo demás toca darle el formato deseado al momento de imprimir los valores.

Finalizando

Es verdad que estos bucles son un tanto confusos de primeras, pero mientras antes entendamos sus diferencias, será mejor y nuestro yo del futuro lo agradecerá bastante, igual no te desanimes si te sigues enredadndo, dale tiempo al tiempo!.
Algún consejo, aparte de practicar y practicar, intenta asociar palabras para no tener que buscar siempre nuestros resumenes o en google, por ej asociar el in = propiedad(objeto), o el of = elementos(colección).

Dicho esto, me despido con una frase de un sabio de por ahí: No me creas nada de lo que te dije, ahora te toca a tí probarlo!