Introducción a JavaScript

1

¿Por qué aprender JavaScript?

2

¡Hola Mundo! en Mac

3

¡Hola Mundo! en Windows

4

Anatomía de una variable

5

Tipos de datos en JavaScript

6

Creación de strings

7

Operadores aritméticos

8

Conversión de tipos: Type Casting y Coerción

9

Conversión de tipos explícita e implícita

Estructuras de Control y Lógica

10

Operadores de comparación

11

Operadores lógicos

12

Ejecución condicional: if

13

Ejercicio: Adivina el número

14

Ejecución condicional: switch

15

Loop: for

16

Loop: for of

17

Loop: for in

18

Loop: while

19

Loop: do while

Funciones y This

20

Anatomía de una función

21

Funciones vs Métodos

22

Funciones puras e impuras

23

Arrow function y enlace léxico

24

Contextos de ejecución y scope chain

25

¿Qué es Closure?

26

Preguntas a Desarrolladores Senior: ¿Por qué aprender Desarrollo Web?

Manipulación de Arrays

27

Introducción a Arrays

28

Mutabilidad e inmutabilidad de Arrays

29

Modificación básica del final con push( ), pop( )

30

Iteración con map( ) y forEach( )

31

Filtrado y reducción con filter( ) y reduce( )

32

Búsqueda de elementos con find( ) y findIndex( )

33

Crear copias con slice( )

34

Spread operator: casos de uso

Programación Orientada a Objetos

35

Anatomía de un Objeto

36

Trabajando con objetos en JavaScript

37

Función constructora

38

¿Qué es una clase?

39

Prototipos y herencias

40

Herencia en la práctica

41

Prototipos en la práctica

42

this en JavaScript

43

Proyecto: Crea una red social

44

Proyecto: Crea una red social parte 2

Asincronía en JavaScript

45

¿Cómo funciona el JavaScript Engine?

46

Promesas en JavaScript

47

Usando Async y await en JavaScript

48

For await of

49

¿Cómo funciona la web?

50

¿Cómo funciona HTTP?

51

Método GET en JavaScript

52

Método POST en JavaScript

53

Método DELETE en JavaScript

54

Importancia del id en el método DELETE

55

ECMAScript 6 y tus siguientes pasos

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Loop: for in

17/55
Recursos

¿Cómo utilizar el bucle forIn en JavaScript?

El bucle forIn es una poderosa herramienta en JavaScript, especialmente útil para iterar sobre propiedades de objetos. A diferencia del forOff, que trata con elementos iterables como arreglos y cadenas, forIn se centra en objetos innumerables. Pero, ¿por qué es tan importante entender esta distinción? Porque los objetos en JavaScript poseen propiedades, cada una con un valor asociado, y el conocimiento de cómo navegar por estas estructuras es crucial para cualquier desarrollador. Vamos a explorar en detalle cómo utilizar el bucle forIn para sacar el máximo provecho al trabajar con objetos.

¿Cuál es la estructura de un objeto en JavaScript?

Los objetos en JavaScript son estructuras de datos que permiten almacenar información de manera más compleja que los arreglos o cadenas. A diferencia de estos últimos, que son sencillamente listas de elementos, los objetos están compuestos por "propiedades" y "valores" asociados.

  • Propiedad: un identificador dentro del objeto.
  • Valor: cualquier tipo de dato asociado a la propiedad, que puede ser un número, string, booleano, función, u otro objeto.

Ejemplo de un objeto:

const listaDeCompras = {
  manzana: 5,
  pera: 3,
  naranja: 2,
  uva: 1
};

En este caso, manzana, pera, naranja y uva son las propiedades del objeto, y los números asociados representan los valores deseados de cada fruta.

¿Cómo funciona el bucle forIn?

El forIn se utiliza principalmente para iterar sobre objetos, permitiendo acceder a todas sus propiedades y valores. La sintaxis básica del forIn es:

for (variable in objeto) {
  // Código a ejecutar
}

Donde:

  • variable es la que representará cada propiedad del objeto durante la iteración.
  • objeto es el objeto que estamos iterando.

Un ejemplo práctico mostrando cómo funciona:

const listaDeCompras = {
  manzana: 5,
  pera: 3,
  naranja: 2,
  uva: 1
};

// Iterar sobre cada propiedad del objeto
for (let fruta in listaDeCompras) {
  console.log(fruta); // Imprime la propiedad (manzana, pera, etc.)
  console.log(listaDeCompras[fruta]); // Imprime el valor de la propiedad (5, 3, etc.)
}

En este ejemplo, el bucle forIn recorre cada propiedad del objeto listaDeCompras, imprimiendo tanto la propiedad como su valor.

¿Por qué no usar forOff con objetos?

Es crucial comprender que forOff se emplea únicamente con estructuras iterables como arrays y strings. Los objetos, al no ser iterables, generan un error cuando se intenta iterar sobre ellos con forOff. Aquí se ilustra por qué usar forIn es necesario para objetos:

for (let fruta of listaDeCompras) {
  console.log(fruta);
}

// Esto generará un error: "listaDeCompras no es iterable"

El uso de forOff en un objeto lanzará un error porque JavaScript no reconoce a los objetos como colecciones sobre las cuales pueda iterar directamente. Esta diferenciación entre objetos iterables e innumerables es clave para evitar errores y garantizar que las operaciones sobre objetos se realicen correctamente.

Buenas prácticas al usar forIn

  1. Verificar propiedades del objeto: En casos donde estás iterando sobre objetos que pueden heredar propiedades, es recomendable verificar si la propiedad pertenece directamente al objeto.

    for (let prop in objeto) {
      if (objeto.hasOwnProperty(prop)) {
        // Código a ejecutar
      }
    }
    
  2. Documentación clara: Al trabajar con objetos complejos, asegúrate de mantener una buena documentación sobre las propiedades y los valores que estás manejando, para facilitar la lectura y el mantenimiento del código.

  3. Considerar métodos avanzados: Aunque el forIn es útil, también existen métodos en ECMAScript más avanzados como Object.keys(), Object.values(), o Object.entries(), que pueden proporcionar un manejo más directo de las propiedades y valores de un objeto.

En resumen, la elección adecuada entre forIn y forOff no solo depende de la estructura de datos que estemos manejando sino también de la operación que queramos realizar, asegurando así un código eficiente y libre de errores.

Aportes 27

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Como se mencionaba en la clase anterior, los objetos (`{}`) en Javascript no son iterables, por eso el método `for... of` no es compatible con ellos, pero no te preocupes que para ello tenemos el ciclo `for... in`! Este ciclo nos permite iterar sobre objetos enumerables, más especificamente sobre las propiedades de estos objetos! **OJO** 👀 este ciclo nos da el nombre de la propiedad en vez del valor de esta como sucedía con el ciclo `for... of` > 💡 [Aquí puedes encontrar la documentación del ciclo for...in](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in)
🟡 **¿Qué sucede si utilizo un ciclo** `for ... in` **para un iterable?** Como se mencionó en la clase, si intentas recorrer un objeto con la estructura `for ... of`, existirá un error, porque **un objeto no es un iterable**. Por otro lado, si intentas recorrer un iterable con la estructura `for propiedad in iterable`, no obtendrás los valores de los elementos, sino los **índices de cada uno**. Esto se debe a que los iterables son objetos en JavaScript, donde su **propiedad es el índice de cada valor o elemento**. Por ejemplo: el *array* `["Python", "JavaScript", "Java", "C++"]`, en realidad, es el siguiente objeto. ```js let array = { "0": "Python", "1": "JavaScript", "2": "Java", "3": "C++" } ``` Entonces, si utilizar `for ... in`, lo que obtendrás es el **índice del iterable**. ```js let numeros = ["Python", "JavaScript", "Java", "C++"] for (let propiedad in numeros) { console.log(propiedad) // 0 1 2 3 } ``` Espero te haya servido. ¡Nunca pares de aprender! 💚
***Apuntes:*** ### **For of** Nos sirve para crear bucles con elementos iterables (string o array) ```js //for of para Arrays let menu = ['pambazo','quesadilla','pizza','tacos'] for (comida of menu){ console.log(comida); } ``` ### **For in** Nos sirve para crear bucles con elementos numerables (objetos) ```js // for in Objetos let listaCompra = { pan: 3, leche: 2, frutas: 6, carne: 4, especias: 7 } for (item in listaCompra){ console.log(item); } ``` ![](https://static.platzi.com/media/user_upload/Untitled-19352f1b-faa7-410c-8306-edcc1280505c.jpg)
## For in El bucle `for...in` en JavaScript es una estructura de control que se utiliza para iterar sobre las propiedades enumerables de un objeto. A diferencia del bucle `for...of`, que itera sobre los valores de un objeto iterable como un array o un string, `for...in` itera sobre todas las propiedades enumerables de un objeto, incluyendo aquellas heredadas de su prototipo. ### Sintaxis del Bucle `for...in` La sintaxis básica de `for...in` es la siguiente: `for (variable in objeto) {` ` // Código a ejecutar para cada propiedad` `}` * **variable**: Una variable que se asigna al nombre de cada propiedad durante cada iteración. * **objeto**: El objeto cuyas propiedades serán iteradas. ### Ejemplo Básico `let persona = {` ` nombre: "Juan",` ` edad: 30,` ` ciudad: "Madrid"` `};` `for (let propiedad in persona) {` ` console.log(propiedad + ": " + persona[propiedad]);` `}` ### Limitaciones y Consideraciones * **Orden de las Propiedades**: No se garantiza el orden en que se iteran las propiedades del objeto. Pueden no seguir el orden en que fueron definidas. * **Solo para Propiedades Enumerables**: `for...in` itera sobre las propiedades enumerables de un objeto. Las propiedades no enumerables (aquellas que tienen el atributo `enumerable` configurado como `false`) no se iteran. * **No es Adecuado para Arrays**: Aunque puede iterar sobre arrays en JavaScript, generalmente no es recomendado usar `for...in` para esto debido a su comportamiento no predecible con propiedades heredadas y la posibilidad de iterar sobre índices del array en lugar de valores.
Un **string** es como una palabra o frase escrita, por ejemplo, "hola" o "buenos días". Un **array** es como una caja donde puedes guardar varias cosas, como números, letras o palabras, todas en su propio espacio. Ahora, un **objeto** es como un juguete avanzado, por ejemplo, un robot que tiene partes (propiedades) como su color, tamaño o nombre, y también puede hacer cosas (métodos) como caminar o hablar. Así que, mientras un string es solo texto y un array es una lista de cosas, un objeto puede tener mucha información y hacer cosas también. Por ejemplo, este sería un objeto: `let auto = {` ` color: "rojo",` ` modelo: 2022,` ` arrancar: function() {` ` console.log("El auto ha arrancado.");` ` }` `};`
Aprovecho este ejercicio practico para mostrar algunos articulos que me encantaria ver en PlatziConf 2024 ![]()![](https://static.platzi.com/media/user_upload/image-fd3c7176-b3ee-476d-beb4-d3a9f01a8934.jpg)
Dejo el codigo con mas detalles y bueno me di cuenta de algo en especial en la parte de que podemos llamar con let o sin let la variable y a su vez tambien al momento de imprimir agregar nombres para que se detalle ![](https://static.platzi.com/media/user_upload/image-52cec935-3af9-4233-89ff-274ff0639785.jpg)
Buenas! tengo una duda, los objetos en JS serían similares a los diccionarios en Python??
### **for...of con Object.entries()** Este enfoque también convierte el objeto en un array de pares `[clave, valor]` y permite usar `for...of` para iterar de manera simple y clara. javascriptCopy code`const shoppingList = { apple: 5, orange: 6` }; for (const \[key, value] of Object.entries(shoppingList)) { console.log(`${key}: ${value}`); }
Un objeto en JavaScript tiene propiedades que, por defecto, son enumerables. Sin embargo, al definir una propiedad como no enumerable, esta propiedad no aparecerá en las iteraciones con un `for in`. El bucle `for in` es exclusivo para objetos y permite iterar sobre propiedades enumerables. Por lo tanto, al hacer que una propiedad sea no enumerable, efectivamente la ocultas de las iteraciones, pero no afecta su accesibilidad directamente. Esta característica es útil para encapsular datos en objetos.
En JavaScript, un "enumerable" se refiere a una propiedad de un objeto que puede ser listada en un bucle, como el `for...in`. Por defecto, todas las propiedades de un objeto son enumerables, excepto aquellas que se definen usando `Object.defineProperty()` con la opción `enumerable` establecida en `false`. Esto significa que si intentas iterar sobre un objeto, las propiedades enumerables serán las que aparezcan. Para entender esto mejor, recuerda que el método `for...in` se utiliza precisamente para iterar sobre las propiedades enumerables de un objeto.
![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202025-03-28%20203114-e6f1e7c0-6d1f-40b1-9a1a-db0622300a48.jpg)![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202025-03-28%20203144-f97fc946-3cdd-45a8-8bfd-60d0b4fea4d5.jpg)
Un objeto enumerable es aquel que puede ser iterado con un bucle como `for...in`. Esto significa que puedes acceder a sus propiedades directamente. En cambio, un objeto iterable, como un array o un string, puede ser recorrido con `for...of`, lo que permite iterar sobre sus elementos. En resumen, todos los objetos enumerables son iterables, pero no todos los objetos iterables son enumerables. En JavaScript, usa `for...in` para objetos y `for...of` para arrays o strings.
```js let diaDeLaSemana = { lunes:1, martes:2, miercoles:3, jueves:4, viernes:5, sabado:6, domingo:7 } function escribirDiaDeLaSemana(){ for (dia in diaDeLaSemana) console.log(`El dia ${dia} es el numero ${diaDeLaSemana[dia]}`) } escribirDiaDeLaSemana() ```
Los objetos son tan parecidos a los dataframes en python cuando usas pandas
![](https://static.platzi.com/media/user_upload/image-ce4f15ae-4c32-4a17-8631-abd88b7d20cd.jpg)
```js let listaDeCompras = { manzanas: 5, pera: 3, naranja: 2, uva: 1, piñas: 3, papayas: 2, }; let i = 1; console.log("####### LISTA DE FRUTAS #######") for(fruta in listaDeCompras){ console.log(`${i++}. ${fruta}`); } ```####### LISTA DE FRUTAS ####### 1\. manzanas 2\. pera 3\. naranja 4\. uva 5\. piñas 6\. papayas
```js let platzi = { materia: "javascript basico", tema: "for in", clase: 17, año: 2024, } console.log(`Hola estoy viendo un curso que a continuacion detallare de la siguiente manera:`) for (const curso in platzi) { console.log(`${curso}: ${platzi[curso]}`) } ```let platzi = {  materia: "javascript basico",  tema: "for in",  clase: 17,  año: 2024,} console.log(`Hola estoy viendo un curso que a continuacion detallare de la siguiente manera:`)for (const curso in platzi) {  console.log(`${curso}: ${platzi\[curso]}`)}
let canasta  = \["manzana","pera","naranja","uva"];/\*  lista original  \*/ for(frutas of canasta) {  console.log(frutas);   canasta.push("mangos"); /\* agrega una fruta adicional al final de la lista \*/  console.log(canasta);   canasta.unshift("kiwi");  /\* agrega una fruta al inicio de la lista  \*/ console.log(canasta);  canasta.pop();/\*  aqui elimina el ultimo elemento de la lista  \*/ console.log(canasta)  canasta.shift(); console.log(canasta);  /\* aqui elimina el primer elemento de la lista  \*/  /\*  aqui eliminamos el elemento que escojamos  \*/ let index = canasta.indexOf("uva"); if (index !== -1) {    canasta.splice(index, 1); // Elimina "pera" } console.log(canasta);   canasta.splice(2, 0, "fresa"); // Inserta "fresa" en la posición 2 console.log(canasta);  canasta.splice(0, 1, "durasno"); // quitamos manzano y la renplazamos por durasno   console.log(canasta);   break; } /\*  esto es un objeto llamado lista de compras \*//\*  for in interatua con objeto enumerables de nuestra lista  \*/ const listaDeCompras = {manzana: 5,pera:  3,naranja: 2,uva : 1 }; for (frutas in listaDeCompras) {  console.log(listaDeCompras);  break;} for (frutas in listaDeCompras){  console.log(`${frutas} : ${listaDeCompras\[frutas]}`);  } for (frutas in listaDeCompras) {  console.log(`${frutas} : ${listaDeCompras\[frutas]}`);  if (frutas === "pera") {    console.log("¡Encontré la pera, detengo el ciclo!");    break; // Detenemos el ciclo al encontrar "pera".  }} /\*  en este espacio cambio el valor si lo deseo hacer  \*/ let listaDeCompras2 = {}; // Declarar un objeto vacíolistaDeCompras2.manzana = 8;listaDeCompras2.pera = 4;listaDeCompras2.naranja = 3;listaDeCompras2.uva = 2; console.log(listaDeCompras2);
## Método `for...in` en JavaScript * El método `for...in` se utiliza para iterar sobre las propiedades de un objeto enumerable. * Es ideal para trabajar con objetos que tienen propiedades con valores asociados. ## Diferencias entre Arrays, Strings y Objetos * **Arrays y Strings**: Son objetos iterables que contienen listas de elementos. * **Objetos**: Son estructuras de datos que constan de propiedades y valores. ## Estructura del Método `for...in` * La sintaxis básica es: `for (variable in objeto) { código a ejecutar }`. * `variable` representa la propiedad actual en la iteración. * `objeto` es el objeto cuyos elementos se están iterando. ### Ejemplo de Código const listaDeCompras = { manzana: 5, pera: 3, naranja: 2, uva: 1 }; for (let fruta in listaDeCompras) { console.log(fruta); } ### Explicación del Código * Declaramos un objeto `listaDeCompras` con propiedades y valores. * Usamos el método `for...in` para iterar sobre cada propiedad en `listaDeCompras`. * `console.log(fruta);` imprime el nombre de cada propiedad en la consola. ## Iteración de Propiedades y Valores * Para imprimir tanto las propiedades como sus valores, se accede al valor usando la sintaxis de corchetes `objeto[propiedad]`. ### Ejemplo de Código const listaDeCompras = { manzana: 5, pera: 3, naranja: 2, uva: 1 }; for (let fruta in listaDeCompras) { console.log(`${fruta}: ${listaDeCompras\[fruta]}`); } ### Explicación del Ejemplo * Declaramos el objeto `listaDeCompras`. * Usamos `for (let fruta in listaDeCompras) { console.log(${fruta}: ${listaDeCompras[fruta]}); }` para imprimir cada propiedad y su valor. * La variable `fruta` representa cada propiedad en `listaDeCompras`, y `listaDeCompras[fruta]` obtiene el valor correspondiente. ## Comparación entre `for...of` y `for...in` * `for...in`: Se usa para iterar sobre las propiedades de objetos enumerables. * `for...of`: Se usa para iterar sobre elementos de objetos iterables como arrays y strings. ### Ejemplo de Uso Incorrecto * Usar `for...of` en un objeto enumerable genera un error. const listaDeCompras = { manzana: 5, pera: 3, naranja: 2, uva: 1 }; for (let fruta of listaDeCompras) { console.log(fruta); } // Error: listaDeCompras is not iterable ### Explicación del Error * `for...of` no se puede usar con objetos como `listaDeCompras` porque no son iterables. ## Próximos pasos * Practicar con el método `for...in` para iterar sobre las propiedades de objetos en diferentes escenarios. * Explorar otras formas de iteración en JavaScript para entender mejor cuándo usar cada método. * Aplicar `for...in` en proyectos más complejos para ver su utilidad en contextos reales.
por lo que vi en esta clase, los objetos en javascript se parecen a los diccionarios en python (llave:clave)
\# Entendiendo los bucles for...in en JavaScript Los bucles `for...in` son una característica poderosa de JavaScript que te permite iterar sobre las propiedades enumerables de un objeto. Veamos cómo funcionan y cuándo usarlos. ```js for (let key in object) { // código a ejecutar ``` \## Sintaxis básica \## Ejemplo práctico Supongamos que tenemos un objeto `persona`: ```js const persona = { nombre: "Ana", edad: 28, profesion: "Ingeniera" }; // Iterando sobre las claves (nombres de propiedades) for (let key in persona) { console.log(key); } // Salida: nombre, edad, profesion // Iterando sobre los valores for (let key in persona) { console.log(persona[key]); } // Salida: Ana, 28, Ingeniera ``` \## Puntos clave a recordar 1\. \*\*Propiedades enumerables\*\*: `for...in` itera sobre todas las propiedades enumerables, incluyendo las heredadas. 2\. \*\*Orden de iteración\*\*: No está garantizado un orden específico. 3\. \*\*Uso con arrays\*\*: No se recomienda para arrays, ya que puede incluir propiedades no numéricas. 4\. \*\*Verificación de propiedad\*\*: Es buena práctica usar `hasOwnProperty()` para excluir propiedades heredadas si es necesario. \## Cuándo usar for...in \- Ideal para objetos con propiedades dinámicas. \- Útil para depuración o cuando necesitas trabajar con nombres de propiedades.
¿Cómo alteramos los valores de las propiedades del objeto iterativamente con for...in? . Usando la variable del objeto y haciendo condiciones respecto a ella: ```js const power_tools = { drill: 47, saw: 92, hammer: 18, screwdriver: 65, grinder: 33, router: 7, sander: 21, jigsaw: 56, nailGun: 88, impactWrench: 12 } for (tool in power_tools) { if (tool.startsWith('s')){ power_tools[tool] = power_tools[tool] + 100 } } console.log(power_tools) /* { drill: 47, saw: 192, hammer: 18, screwdriver: 165, grinder: 33, router: 7, sander: 121, jigsaw: 56, nailGun: 88, impactWrench: 12 } */ ```...Aquí incrementamos en 100 el valor de la herramienta si esta empezaba por 's'
```js const listDeCompras = { manzana: 5, pera: 3, naranja: 2, uva: 1 }; let i = 1; console.log("########## LISTA DE FRUTAS OP. 1 ##########"); for(fruta in listDeCompras){ console.log(`${i}. ${fruta}`); i++; } console.log("########## LISTA DE FRUTAS OP. 2 ##########"); for(fruta in listDeCompras){ console.log(`${i}. ${fruta}: ${listDeCompras[fruta]}`); i++; } RESULTADO ########## LISTA DE FRUTAS OP. 1 ########## 1. manzana 2. pera 3. naranja 4. uva ########## LISTA DE FRUTAS OP. 2 ########## 5. manzana: 5 6. pera: 3 7. naranja: 2 8. uva: 1 ```
```js for(let in object) { } ```
*Object*.prototype.color = "rojo ";*Object*.prototype.PropiedadHeredada = "Otra propiedad Heredada " ; const ListaDeCompras ={ manzanas : 5, peras: 6, uvas: 9,} for (const frutas in ListaDeCompras) { if (Object.hasOwnProperty.call(ListaDeCompras,frutas)) { *// Object.hasOwnProperty es un metodo que permite verificar si la propiedad iterada es heredada o propia* console.log(`${frutas} es el nonmbre de la propiedad y su valor es : ${ListaDeCompras\[frutas]}.`); console.log(` Es una propiedad PROPIA del objeto ListaDeCompras `); }else{ console.log(`${ListaDeCompras\[frutas]} Es una propiedad Heredada`); }}
```js // for...in recorre las propiedades de un objeto o los índices de un array. Es útil para iterar sobre propiedades de un objeto o claves de un array, pero no sobre los valores directamente. for (let propiedad in objeto) { // Código a ejecutar en cada iteración } const persona = { nombre: "Juan", edad: 30, ciudad: "Madrid" }; for (let propiedad in persona) { console.log(propiedad + ": " + persona[propiedad]); } // Output: // nombre: Juan // edad: 30 // ciudad: Madrid ```