Cargando...

Propiedades de objeto

El literal y la lectura con punto ya están en la caja de herramientas. En un formulario de verdad cambia la bolsa: aparece un color cuando quien compra lo elige, desaparece una bandera de borrador al guardar, y la ciudad vive dentro de la dirección. Esta página es ese trabajo cotidiano con las propiedades.

Más allá del primer literal

La página de objetos armó la bolsa y leyó un campo. Aquí cambias qué claves existen: traes una que faltaba, sueltas una que ya no hace falta, preguntas si un nombre está, entras en un objeto guardado dentro de otro y listas los nombres que de verdad tienes.

Cinco movimientos sobre una propiedad

📊 Añadir, quitar, probar, anidar, listar

Movimiento Escritura Qué obtienes
añadir item.color = "blue" propiedad nueva en el mismo objeto
quitar delete item.draft esa clave ya no está
existe "sku" in item true o false
anidar user.address.city campo dentro de otro objeto
listar Object.keys(user) arreglo de las claves propias

Si nombras el movimiento, la línea se sigue sola. Añadir no acuña un segundo objeto. Quitar no convierte el valor en una cadena vacía. Una lista de nombres no es el mismo oficio que leer un valor.

Añadir una propiedad que no estaba en el literal

javascript 
let item = {
name: "Mug",
price: 8
};
item.color = "blue";
console.log(item.color);

La asignación hace crecer una clave ausente

item empezó solo con name y price. Como color no estaba, item.color = "blue" la crea. Sigues con un solo objeto, ahora con tres propiedades. La consola imprime blue.

Quitar una propiedad con delete

javascript 
let item = {
name: "Mug",
price: 8,
draft: true
};
delete item.draft;
console.log("draft" in item);

delete levanta la clave

delete item.draft quita esa propiedad, no el objeto entero. Después "draft" in item vale false. El nombre y el precio siguen. Guardar "" o null es otro acto: la clave permanece, con un valor nuevo.

Preguntar si una clave existe

javascript 
let item = {
name: "Mug",
price: 8
};
console.log("name" in item);
console.log("sku" in item);

in responde sí o no sobre la clave

"name" in item es true: ese nombre está en el objeto. "sku" in item es false: nunca la añadiste. Una propiedad ausente se lee como undefined, y un undefined guardado se lee igual. in pregunta por la clave, no por el valor sentado ahí.

Leer un campo dentro de un objeto anidado

javascript 
let user = {
name: "Lina",
address: {
city: "Shiraz",
zip: "71345"
}
};
console.log(user.address.city);

Una propiedad puede guardar otro objeto

address no es una cadena. Es un objeto con city y zip. user.address.city da dos pasos: entra en address y luego en city. La consola imprime Shiraz. Anidar mantiene juntas las piezas de la dirección, en vez de aplanar cada una sobre user.

Listar las claves propias del objeto

javascript 
let user = {
name: "Lina",
role: "editor"
};
let names = Object.keys(user);
console.log(names);

Object.keys te entrega los nombres

Object.keys(user) devuelve un arreglo de las claves propias — aquí ["name", "role"]. El valor lo sigues leyendo con punto o con corchetes. La lista sirve cuando no quieres cada nombre escrito de antemano. No imprime los valores por sí sola.

Elige el movimiento y luego escribe

¿Campo nuevo? Asígnarlo. ¿Clave que debe desaparecer? delete. ¿Sí o no? in. ¿Ciudad dentro de una dirección? Anida y camina los puntos. ¿Solo los nombres? Object.keys. Las funciones guardadas en el objeto — métodos — son la lección siguiente.

Pon una ciudad anidada en la página tras un añadido

Empieza con un usuario y una dirección, añade plan en el script y coloca la ciudad en un párrafo.

Demo de página — ciudad anidada

html 
<!DOCTYPE html>
<html>
<head>
<title>object-properties — page</title>
</head>
<body>
<p id="place">…</p>
<script>
let user = {
name: "Lina",
address: { city: "Shiraz" }
};
user.plan = "yearly";
let box = document.getElementById("place");
box.textContent = user.address.city + " — " + user.plan;
</script>
</body>
</html>

El párrafo muestra Shiraz — yearly. La ciudad ya estaba anidada; plan llegó después del literal. Cambia solo city o plan, recarga y lee la línea nueva. Lección siguiente: métodos de objeto — funciones que viven en el objeto.

Pasos de práctica

  1. Arma un objeto con dos propiedades, añade una tercera por asignación y regístrala.
  2. Pon draft, quítala con delete y comprueba "draft" in item.
  3. En un objeto que solo tiene name, registra "name" in item y "sku" in item.
  4. Anida address con city y registra user.address.city.
  5. Registra Object.keys de un objeto con dos claves y lee el arreglo.
  6. En la demo HTML cambia solo city o plan, recarga y lee el párrafo.

Tropezones frecuentes

  • Creer que item.color = "blue" acuña un objeto nuevo — crece el mismo
  • Escribir item.draft = null cuando querías delete item.draft — la clave sigue
  • Tratar una clave ausente y un undefined guardado como la misma pregunta — para la clave usa in
  • Escribir user.city cuando city vive en user.address
  • Esperar que Object.keys devuelva valores
  • Buscar métodos y this en esta página — eso es la lección siguiente

Resumen

  • Asignar a una clave ausente añade esa propiedad
  • delete quita la clave; el resto del objeto se queda
  • "key" in obj dice si la clave existe
  • Una propiedad puede guardar otro objeto; más puntos caminan adentro
  • Object.keys devuelve los nombres, no los valores
  • Un campo anidado y uno recién añadido pueden compartir una línea en la página
  • Siguiente: métodos de objeto — funciones guardadas en el objeto

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
8
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 34 de 36
Javascript Tutorial