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

You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

2 Días
11 Hrs
35 Min
37 Seg

Trabajando con objetos en JavaScript

36/55
Resources

What are objects in programming?

Objects in programming are data structures that allow us to store information in an organized way. They work with a key-value structure, where each key is associated with a value, which helps us to maintain a collection of related data in a coherent way.

Objects not only store data, they can also contain methods that are actions executable by the object itself. This ability to store both data and behavior makes objects versatile and powerful tools in many programming languages.

How to create an object in JavaScript?

Creating an object in JavaScript starts by declaring a constant and using braces to define properties and methods within the object. Here's how:

const person = { name: 'John', age: 30, address: { street: { street: 'Avenida Insurgentes', number: 187, city: 'Mexico City' }, greet: function() { console.log(`Hello, my name is ${this.name}`); } } };

In this example, we have created an object called person with properties such as name, age and address. In addition, the greet method prints a message using the name property.

How to work with object methods?

Methods on an object are created as functions within the object. These methods allow the object to perform actions using its own properties.

To execute the greet method of the person object, we simply call:

person.greet(); // Print: Hello, my name is John.

This code executes the action defined in the greet method, displaying the greeting with the person's name.

How to add and delete properties and methods?

Adding properties and methods

Adding new properties or methods to an existing object is easy. You just need to use the dot operator (.) followed by the name of the new property or method:

person.phone = '555-555-5555';
person.goodbye = () => { console.log('Goodbye');};
console.log(person.phone); // Print: 555-555-5555person.goodbye(); // Print: Goodbye.

Deleting properties and methods

To delete a property or method from an object, use the delete keyword:

delete person.phone;deleteperson.fire;

With this, the properties or methods are removed from the object, and will no longer be accessible.


Objects are fundamental in many programming paradigms, especially in object-oriented paradigms. They allow you to create real-world models in code, handling both data and functionality. Remember that as a programmer, mastering objects and their manipulations opens the door to developing more complete and robust applications. Keep exploring and experimenting to strengthen your skills!

Contributions 19

Questions 3

Sort by:

Want to see more contributions, questions and answers from the community?

# Resumen de la clase * **Accedemos a las propieades** o **métodos** de un objeto usando el caracter `.`, es decir: `miObjeto.unaPropiedad` o `miObjeto.unMetodo()` * Para **añadir propiedades** o **métodos** a un objeto ya existente podemos definir su valor como lo haríamos con otras variables, es decir: `miObjeto.nuevaPropiedad = 7`! Podemos usar esta misma sintaxis para redefinir propiedades ya existentes dentro del obejto * Para **eliminar una propiedad** usamos al sentencia `delete`, por ejemplo si quiero eliminar la propiedad `age` de mi objeto `user`, la sintaxis a usar sería `delete user.age` > 👀🚧 OJO, no podemos borrar métodos con la sentencia `delete`pero si podemos asignar el valor `undefined` a los métodos que ya no queremos usar > 📃 [Aquí encuentras la documentación del tema de objetos](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)
como dato curioso recuerden que es en forma de cascada como se lee el codigo , si ponen -- persona.telefono = "222-222-2222"; \--despues del console.log no lo leera, tiene que ser antes algo asi : persona.telefono = "222-222-2222"; console.log(persona); persona.saludar();
Chicos tengo una duda. ¿En este momento ya podemos acceder a las propiedades de un objeto js tanto con this como con el nombre del objeto, dentro de sus mismas funciones? Lo digo porque la profe en una clase anterior nos indicó que no se podía, pero a mi si me esta dejando con ambas opciones. ![](https://static.platzi.com/media/user_upload/image-5f9a1fd2-89af-4b86-99a5-757d7490fd22.jpg) ![](https://static.platzi.com/media/user_upload/image-c12260cc-a5ee-4400-ae0f-0ab0aaf96e80.jpg) De ambas maneras me lo está permitiendo
Esta classe es repetida a la anterior
En JavaScript, la coma (`,`) se utiliza para separar elementos en listas, como en arrays, o para separar propiedades en objetos. Por ejemplo: ```javascript const persona = { nombre: "John", edad: 30, ciudad: "México" }; ``` El punto y coma (`;`) se usa para finalizar instrucciones. Es opcional en muchos casos, pero es una buena práctica incluirlo para evitar errores, especialmente en líneas que contienen múltiples instrucciones. Por ejemplo: ```javascript let x = 10; let y = 20; let z = x + y; ``` Usar ambos correctamente ayuda a mantener el código claro y libre de errores.
My tiny shared code snippet .\[bellow]\n ```js const User = { userName : "Mariano", userAge : 19 , userEmail : "[email protected]", phoneNumber : 3167363546, UserAddress : { StreetName : "1243 WhisperyWood 45th", city : "Cleveland", state : "OH", ZIP : 45746 }, UserStatus : true , greet () { console.log(`Hello ppl, My Name is ${User.userName} \nI am ${this.userAge} and I live ${this.UserAddress.city}`); }, }; console.log(User); console.log("\n"); console.log(User.userName); console.log("\n"); User.greet(); User.BloodType = "A+"; User.phoneNumber = 31656890345 ; User.Leave = () => { console.log(`${User.userName} says GoodBye to You. \n`); } console.log(User.BloodType); console.log(User.phoneNumber); User.Leave(); ```const User = { userName : "Mariano", userAge : 19 , userEmail : "[email protected]", phoneNumber : 3167363546, UserAddress : { StreetName : "1243 WhisperyWood 45th", city : "Cleveland", state : "OH", ZIP : 45746 }, UserStatus : true , greet () { console.log(`Hello ppl, My Name is ${User.userName} \nI am ${this.userAge} and I live ${this.UserAddress.city}`); }, }; console.log(User); console.log("\n"); console.log(User.userName); console.log("\n"); User.greet(); User.BloodType = "A+";User.phoneNumber = 31656890345 ; User.Leave = () => { console.log(`${User.userName} says GoodBye to You. \n`); } console.log(User.BloodType);console.log(User.phoneNumber); User.Leave();
### **Trabajando con objetos en JavaScript** ### Agregar una Propiedad Agrega una nueva propiedad `telefono` al objeto `persona`. ```js persona.telefono = "555-555-5555"; console.log(persona.telefono); // "555-555-5555" ``` ### Agregar un Método Agrega un método `despedir` al objeto `persona` que imprime “Adios”. ### Acceder a una Propiedad de un Objeto Anidado Accede a la propiedad `calle` del objeto anidado `direccion` dentro de `persona`. ### Eliminar una Propiedad Elimina la propiedad `telefono` del objeto `persona`. ```js delete persona.telefono; console.log(persona.telefono); // undefined ``` ### Eliminar un Método Elimina el método delete persona.despedir; ```js delete persona.despedir; console.log(persona.despedir); // undefined ```
**RESUMEN:** ![](https://static.platzi.com/media/user_upload/image-09b01df1-4761-485a-8594-ff1b22dcea9b.jpg)
Es molesto que no este estructurada la forma de probar el codigo. Este chico usa una extension para correlo en el navegador y la chica usa node desde terminal. Para darle seriedad al curso, deberían hacerlo todo de una forma estandarizada
Los objetos en JavaScript son estructuras que permiten almacenar datos y funcionalidades. Algunos casos de uso son: 1. **Modelar entidades**: Representar objetos del mundo real, como usuarios o productos. 2. **Organizar datos**: Agrupar información relacionada para un acceso más fácil. 3. **Métodos**: Incluir funciones que operan sobre los datos del objeto, facilitando la lógica de negocio. 4. **Prototipos**: Permiten la herencia y reutilización de código, optimizando la creación de objetos similares. Estos conceptos son fundamentales en la Programación Orientada a Objetos, que estás aprendiendo en el curso de Fundamentos de JavaScript.
Cuando usas `delete persona.despedir`, se elimina la referencia al método `despedir` en el objeto `persona`. Sin embargo, si antes de eliminarlo, ya habías invocado `persona.despedir()`, el mensaje "Adiós" se habrá mostrado en ese momento. Por lo tanto, el método solo se eliminará para futuras invocaciones después de la eliminación. Esto significa que cualquier llamada al método antes de su eliminación seguirá mostrando el mensaje correspondiente.
Haciendo pruebas, me di cuenta que en la funciona declarada dentro de un objeto podemos mandar a llamar propiedades de otro
`me encanta como explica este profe, le entiendo todo`
![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202025-01-29%20153015-5afe8a50-af80-4fbd-8e34-092f5d158075.jpg)
En JavaScript, el uso de `;` (punto y coma) es para indicar el final de una instrucción. Aunque en algunos casos JavaScript puede agregarlo automáticamente, es una buena práctica usarlo para evitar errores inesperados, especialmente en declaraciones complejas o al combinar varios comandos en una sola línea. Esto asegura una mejor legibilidad y mantenimiento del código, y ayuda a prevenir problemas en la ejecución.
Como hemos visto en el tema de objetos, hemos aprendido dos maneras distintas de declarar funciones dentro de un objeto: `{printId: function() {code}}` Y la otra manera es: `{printId() {code}}` . La primera opción es la manera tradicional de declarar funciones en objetos. . He estado investigando y la 2da opción donde ya no optamos por escribir la función en base a clave:valor es la manera moderna actual, y fue introducida en ES6. . Aunque ambas maneras funcionen igual, la 2da opción introducida en ES6 es más utilizada en la industria moderna debido a su concisión y porque refleja un estilo de programación más actual. . Se considera como estándar para escribir código más limpio y profesional.
## Consumo de Objetos en Programación * Para consumir un objeto en programación, primero debemos entender cómo acceder y utilizar sus propiedades y métodos. * Usamos `console.log` para visualizar el objeto completo y sus detalles en la consola del navegador. ## Visualización de un Objeto * Al ejecutar `console.log(persona)`, podemos ver la estructura completa del objeto en la consola.const persona = { nombre: "John", edad: 30, direccion: { calle: "Avenida Insurgentes", numero: 187, ciudad: "Ciudad de México" }, saludar: function() { console.log("Hola, mi nombre es " + this.nombre); } }; console.log(persona); ## Acceso a Propiedades y Métodos * Para acceder a una propiedad específica de un objeto, utilizamos la notación de punto.console.log(persona.nombre); // John console.log(persona.edad); // 30 * Para llamar a un método de un objeto, utilizamos la notación de punto seguida de paréntesis.persona.saludar(); // Hola, mi nombre es John ## Agregar Nuevas Propiedades * Podemos agregar nuevas propiedades a un objeto existente utilizando la notación de punto.persona.telefono = "555-555-5555"; console.log(persona.telefono); // 555-555-5555 ## Agregar Nuevos Métodos * De manera similar, podemos agregar nuevos métodos a un objeto.persona.despedir = function() { console.log("Adiós, mi nombre es " + this.nombre); }; persona.despedir(); // Adiós, mi nombre es John ## Acceso a Propiedades Anidadas * Para acceder a propiedades de objetos anidados, encadenamos la notación de punto.console.log(persona.direccion.calle); // Avenida Insurgentes ## Eliminación de Propiedades y Métodos * Podemos eliminar propiedades de un objeto utilizando la palabra clave `delete`.delete persona.telefono; console.log(persona.telefono); // undefined * Aunque los métodos no se pueden eliminar directamente, podemos asignarles `undefined`.persona.despedir = undefined; console.log(persona.despedir); // undefined ## Corrección de Errores Comunes * Es importante no duplicar acciones dentro de los métodos. Por ejemplo, si un método ya tiene un `console.log`, no necesitamos un `console.log` adicional al llamarlo.persona.saludar(); // Correcto // Incorrecto: console.log(persona.saludar()); ## Resumen * Los objetos permiten organizar datos de manera eficiente y acceder a sus propiedades y métodos de manera sencilla. * Podemos agregar y eliminar propiedades y métodos dinámicamente según las necesidades de nuestro programa. * La correcta manipulación de objetos es fundamental para el desarrollo en JavaScript y otros lenguajes de programación orientada a objetos.
![](https://static.platzi.com/media/user_upload/image-7876d273-7c06-4789-82d1-dbd974e8c637.jpg)
![]()![](https://static.platzi.com/media/user_upload/image-c0635607-03ca-4b37-a0a0-d5e4d75600d6.jpg)