Objetos
## Objetivos de Aprendizaje
- Crear y usar objetos
- Acceder y modificar propiedades
- Trabajar con métodos de objeto
- Entender destructuring
## Creando Objetos
### Literales
```javascript
const persona = {
nombre: "Juan",
edad: 30,
ciudad: "Madrid"
};
```
### new Object()
```javascript
const persona = new Object();
persona.nombre = "Juan";
persona.edad = 30;
```
### Constructor
```javascript
function Persona(nombre, edad) {
this.nombre = nombre;
this.edad = edad;
}
const persona = new Persona("Juan", 30);
```
## Accediendo a Propiedades
### Notación de Punto
```javascript
const persona = {
nombre: "Juan",
edad: 30
};
console.log(persona.nombre); // "Juan"
console.log(persona.edad); // 30
```
### Notación de Corchetes
```javascript
const persona = {
nombre: "Juan",
edad: 30
};
console.log(persona["nombre"]); // "Juan"
console.log(persona["edad"]); // 30
// Dinámico
const propiedad = "nombre";
console.log(persona[propiedad]); // "Juan"
```
## Modificar Objetos
### Agregar Propiedades
```javascript
const persona = { nombre: "Juan" };
persona.edad = 30;
persona["ciudad"] = "Madrid";
console.log(persona); // { nombre: "Juan", edad: 30, ciudad: "Madrid" }
```
### Eliminar Propiedades
```javascript
const persona = { nombre: "Juan", edad: 30 };
delete persona.edad;
console.log(persona); // { nombre: "Juan" }
```
### Modificar Valores
```javascript
const persona = { nombre: "Juan", edad: 30 };
persona.edad = 31;
console.log(persona); // { nombre: "Juan", edad: 31 }
```
## Métodos de Objeto
### Definir Métodos
```javascript
const calculadora = {
valor: 0,
sumar: function(n) {
this.valor += n;
},
restar: function(n) {
this.valor -= n;
},
obtenerValor: function() {
return this.valor;
}
};
calculadora.sumar(10);
calculadora.restar(3);
console.log(calculadora.obtenerValor()); // 7
```
### Métodos shorthand
```javascript
const calculadora = {
valor: 0,
sumar(n) {
this.valor += n;
},
obtenerValor() {
return this.valor;
}
};
```
## this en Objetos
```javascript
const persona = {
nombre: "Juan",
saludar: function() {
return `¡Hola! Soy ${this.nombre}`;
}
};
console.log(persona.saludar()); // "¡Hola! Soy Juan"
```
## Iterar sobre Objetos
### for...in
```javascript
const persona = { nombre: "Juan", edad: 30, ciudad: "Madrid" };
for (const clave in persona) {
console.log(`${clave}: ${persona[clave]}`);
}
```
### Object.keys()
```javascript
const persona = { nombre: "Juan", edad: 30 };
const claves = Object.keys(persona);
console.log(claves); // ["nombre", "edad"]
```
### Object.values()
```javascript
const persona = { nombre: "Juan", edad: 30 };
const valores = Object.values(persona);
console.log(valores); // ["Juan", 30]
```
### Object.entries()
```javascript
const persona = { nombre: "Juan", edad: 30 };
const entradas = Object.entries(persona);
console.log(entradas); // [["nombre", "Juan"], ["edad", 30]]
// Con forEach
entradas.forEach(([clave, valor]) => {
console.log(`${clave}: ${valor}`);
});
```
## Destructuring
### Destructuring de Objetos
```javascript
const persona = { nombre: "Juan", edad: 30, ciudad: "Madrid" };
// Extraer todas las propiedades
const { nombre, edad } = persona;
console.log(nombre); // "Juan"
console.log(edad); // 30
// Con alias
const { nombre: nom, ciudad: city } = persona;
console.log(nom); // "Juan"
console.log(city); // "Madrid"
// Con valores predeterminados
const { nombre, pais = "España" } = persona;
console.log(pais); // "España"
```
### Destructuring en Funciones
```javascript
function saludar({ nombre, edad }) {
return `¡Hola! Soy ${nombre} y tengo ${edad} años.`;
}
const persona = { nombre: "Juan", edad: 30 };
console.log(saludar(persona));
```
### Destructuring de Arrays
```javascript
const colores = ["rojo", "verde", "azul"];
const [primero, segundo] = colores;
console.log(primero); // "rojo"
console.log(segundo); // "verde"
// Ignorar elementos
const [ , , tercer] = colores;
console.log(tercer); // "azul"
// Rest pattern
const [primero, ...resto] = colores;
console.log(resto); // ["verde", "azul"]
```
## Spread Operator
### Copiar y Combinar
```javascript
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinado = { ...obj1, ...obj2 };
console.log(combinado); // { a: 1, b: 2, c: 3, d: 4 }
// Copiar (shallow)
const copia = { ...obj1 };
```
### En Funciones
```javascript
function mostrar(a, b, c) {
console.log(a, b, c);
}
const nums = [1, 2, 3];
mostrar(...nums);
```
## Object.assign
```javascript
const objetivo = { a: 1 };
const origen = { b: 2, c: 3 };
Object.assign(objetivo, origen);
console.log(objetivo); // { a: 1, b: 2, c: 3 }
```
## Optional Chaining
### Acceso Seguro
```javascript
const usuario = {
perfil: {
nombre: "Ana"
}
};
// Sin optional chaining (error si falta nivel)
const nombre = usuario.perfil?.nombre;
const ciudad = usuario.direccion?.ciudad; // undefined
// Con múltiples niveles
const calle = usuario.direccion?.contacto?.calle;
```
## Resumen
- Objetos: `{ clave: valor }` o `new Object()`
- Acceso: `obj.prop` o `obj["prop"]`
- Métodos: funciones dentro de objetos
- `this` referencia al objeto actual
- Iterar: `for...in`, `Object.keys/values/entries`
- Destructuring: `const { a, b } = obj`
- Spread: `{ ...obj1, ...obj2 }`
- Optional chaining: `obj?.prop?.nested`
Comments
Comments powered by Giscus
To enable comments, add your Giscus embed code here.
Learn more about Giscus →