Aprende leyendo en orden

Objetos — leer y escribir propiedades

Aprende los objetos, que agrupan valores bajo nombres, desde cómo crearlos hasta cómo leer y escribir sus propiedades.

Maneja un solo producto con su nombre, precio y stock en variables separadas, y los nombres de variable empiezan a chocar en cuanto tienes un 2.º producto. Agrúpalos en un array en su lugar, y los estás manejando por posición — quien escribe el código tiene que recordar si product[1] es el precio o el stock.

Un objeto (una estructura de datos que alinea pares clave-valor en una sola variable) te deja obtener y fijar valores por nombre en su lugar, como en product.price.

Construir pares clave-valor — literales de objeto

Construyes un objeto listando pares clave: valor, separados por comas, dentro de { y }. A esto se le llama literal de objeto (escribir claves y valores directamente entre llaves para construir un objeto).

Cada par individual es una propiedad (un par clave-valor que guarda un objeto). length, del artículo 4, también es una propiedad — para un objeto, este par clave-valor es a lo que se refiere esa palabra.

Una clave es una cadena, y puedes omitir las comillas para nombres como name o price. Un valor puede ser un número, cadena o booleano — o incluso otro array u objeto. Escribe la misma clave dos veces, y solo se queda la que se escribió al final.

Para leer un valor, escribe un punto después del objeto seguido del nombre de la clave, como en product.price. Esto es notación de punto (escribir un nombre de clave directamente después de un punto para leer una propiedad).

El orden en que escribiste las cosas no importa para leerlas, así que no hace falta recordarlo.

Leer una clave que no está registrada no da error — devuelve undefined, lo mismo que leer un index fuera de rango en un array.

Cómo se conectan las claves con los valores
namepricestock"Wireless Mouse"398024product.nameproduct.priceproduct.stock
Cada clave está conectada a un valor. Para leerla, escribe el nombre de la clave después de un punto.
const product = {
  name: "Wireless Mouse",
  price: 3980,
  stock: 24,
};

console.log(product.name);    // Wireless Mouse
console.log(product.price);   // 3980

// Leer una clave no registrada no da error
console.log(product.color);   // undefined

// Sobrescribir usa la misma sintaxis que una asignación
product.stock = 23;
console.log(product.stock);   // 23

Agrupa el perfil de un miembro en un solo objeto y saca los campos que necesitas. Los valores a usar están en los comentarios de la consola.

① Crea un objeto con 3 propiedades: name, plan y points.

② Muestra el name y el plan en una línea, con el formato "Alice Kim / Standard".

③ Muestra los points.

④ Lee la propiedad email no registrada y muéstrala tal cual.

(Si se ejecuta correctamente, aparecerá una explicación.)

Editor JavaScript / TypeScript

Ejecutar el código para ver el resultado

Poner un objeto dentro de otro objeto

Como los datos de un pedido que vuelven de una API, a veces un solo registro necesita guardar dentro otro paquete de información. Pon un objeto como valor, y se anida — puedes encadenar . para leer hasta el fondo, como en order.customer.name.

Ten cuidado cuando falta una clave a mitad de la cadena.

order.shipping.address usa . sobre order.shipping, que es undefined, y eso se detiene con un TypeError. Una forma de leer a través de un paso que falta sin detenerse se cubre en el siguiente artículo.

Un objeto anidado
orderorderId"ORD-1042"customer(un objeto)total12800name"Grace Lee"email"grace@..."
El valor de customer es otro objeto. Lee lo que hay dentro encadenando puntos.
const order = {
  orderId: "ORD-1042",
  customer: {
    name: "Grace Lee",
    email: "grace@example.com",
  },
  total: 12800,
};

console.log(order.customer.name);    // Grace Lee
console.log(order.customer.email);   // grace@example.com

// Puedes encadenar operaciones de cadena sobre un valor que saques
console.log(order.customer.name.length);   // 9

Especificar una clave con una cadena o variable — notación de corchetes

En una pantalla donde el usuario elige qué campo mostrar, qué clave leer no se decide en el momento en que escribes el código. La notación de punto escribe el nombre de la clave directamente en el código, así que no sirve aquí.

Escribe una cadena dentro de [], como en product["price"], y esa cadena se lee como la clave. Esto es notación de corchetes (leer una propiedad usando como clave la cadena escrita entre corchetes).

Lo que hay dentro de [] se evalúa primero, y el resultado se usa como nombre de clave — hasta puedes escribir algo como product["item" + "Name"]. Pon una variable ahí, y la clave se decide en tiempo de ejecución.

La notación de punto solo funciona con nombres de clave sin símbolos ni espacios que no empiecen por un dígito. Una clave como "release-date", con un guion, solo se puede leer con notación de corchetes.

SintaxisCómo se decide la claveCuándo usarla
product.priceEscrita directamente en el códigoEl nombre de la clave es fijo
product["release-date"]Escrita como una cadenaUna clave con símbolos o espacios
product[field]Decidida por el contenido de una variableLa clave cambia en tiempo de ejecución
const product = {
  name: "Wireless Mouse",
  price: 3980,
  "release-date": "2026-04-01",
};

// Escribe el nombre de la clave directamente como cadena
console.log(product["price"]);          // 3980

// El nombre de la clave vive en una variable
const field = "name";
console.log(product[field]);            // Wireless Mouse

// Una clave con un símbolo solo se puede leer con notación de corchetes
console.log(product["release-date"]);   // 2026-04-01

// La notación de punto buscaría una clave llamada literalmente "field"
console.log(product.field);             // undefined

Lee un valor con la clave dada por una variable, para que el campo que muestras pueda cambiar en tiempo de ejecución. product ya está declarado.

① Crea una variable que guarde un nombre de campo, y muestra el precio leyendo a través de esa variable.

② Cambia el contenido de esa misma variable al nombre del campo de stock, y muestra el stock.

③ Muestra el valor de la clave que contiene un guion.

④ Lee el nombre del producto tanto con notación de punto como de corchetes, y muestra si son el mismo valor.

Editor JavaScript / TypeScript

Ejecutar el código para ver el resultado

Añadir, eliminar y comprobar propiedades

Como los datos de una pantalla de configuración, algunos objetos ganan campos con el tiempo, o pierden campos que ya no se usan. Puedes añadir o eliminar propiedades en un objeto incluso después de haberlo creado.

Añadir es simplemente asignar un valor a una clave que aún no existe. Escribe settings.notifications = true;, y aparece una propiedad nueva justo ahí. Igual que con los arrays, puedes añadir o eliminar incluso en un objeto declarado con const.

Para eliminar una, escribe delete settings.language;. delete (un operador que elimina una propiedad de un objeto) elimina la clave por completo, así que leerla después devuelve undefined.

Comprueba si una clave existe con "language" in settings. in (un operador que devuelve, como true o false, si una clave existe en un objeto) toma un nombre de clave en cadena a la izquierda y un objeto a la derecha.

Incluso una propiedad cuyo valor sea undefined devuelve true, siempre que la clave en sí exista.

Qué pasa al añadir, eliminar y comprobar
Añadir porasignaciónEliminar condeleteComprobarcon insettings.notifications= truedeletesettings.language"language"in settingsUna clave másLa clavedesapareceDevuelve trueo false
Añadir y eliminar reescriben el propio objeto. in solo comprueba — nunca reescribe nada.

Un nombre de clave mal escrito no da error

Lee una clave que no existe, como member.piont, y la ejecución no se detiene — simplemente devuelve undefined. Sin un error, puede que no lo notes hasta que una pantalla salga en blanco o un cálculo se convierta en NaN. Para comprobar si una clave existe, usa in, como en "points" in member.

const settings = {
  theme: "dark",
  language: "en",
};

// Añadir es simplemente una asignación
settings.notifications = true;
console.log(settings.notifications);   // true

// delete elimina la clave por completo
delete settings.language;
console.log(settings.language);        // undefined

// in devuelve si la clave existe
console.log("language" in settings);   // false
console.log("theme" in settings);      // true

// Incluso con un valor undefined, true si la clave existe
settings.theme = undefined;
console.log("theme" in settings);      // true

Añade y elimina campos en el objeto de configuración de una app, y comprueba qué queda. settings ya está declarado.

① Añade un campo notifications, para si se reciben notificaciones, con el valor true.

② Elimina el campo language.

③ Comprueba y muestra, uno a uno, si el campo que añadiste y el que eliminaste siguen existiendo.

④ Muestra el contenido del objeto settings tal cual tras los cambios.

Editor JavaScript / TypeScript

Ejecutar el código para ver el resultado

Sacar claves y valores juntos — Object.keys / values / entries

Cuando quieres contar cuántos ajustes existen, o listar todos los campos registrados, escribir cada nombre de clave uno a uno no escala. Convierte el contenido de un objeto en un array, y toda operación de array se vuelve disponible para ti.

Object.keys(object) devuelve un array con solo las claves. Object.values(object) devuelve un array con solo los valores, y Object.entries(object) devuelve un array de pares [clave, valor], cada uno un array de 2 elementos.

Ninguno cambia el objeto original.

Como lo que vuelve es un array, puedes contar los campos con length, unirlos con join, o buscarlos con includes. Object.keys(settings).length es exactamente el conteo de propiedades del objeto.

Los arrays que devuelve cada método
Object.keysObject.valuesObject.entries["name", "price"]["Mouse", 3980][["name", "Mouse"], ["price", 3980]]Un array desolo clavesUn array desolo valoresUn array depares clave-valor
Un ejemplo pasando un objeto con name y price. Solo entries tiene un array como uno de sus propios elementos.
const order = {
  orderId: "ORD-1042",
  customer: "Grace Lee",
  total: 12800,
};

// Saca solo las claves / solo los valores como arrays
console.log(Object.keys(order).join(", "));       // orderId, customer, total
console.log(Object.values(order).join(" / "));    // ORD-1042 / Grace Lee / 12800

// Cuenta los campos con el length del array
console.log(Object.keys(order).length);           // 3

// entries devuelve un array de pares [clave, valor]
console.log(Object.entries(order)[1].join(": ")); // customer: Grace Lee

Saca el contenido de un objeto de pedido como claves, valores y pares, y lístalos. order ya está declarado.

① Saca solo las claves, unidas con ", ", y muéstralas.

② Muestra si "Grace Lee" está incluido entre los valores.

③ Muestra cuántos pares clave-valor hay.

④ Formatea cada par, uno a uno, como "clave: valor", y muestra las 3 líneas.

Editor JavaScript / TypeScript

Ejecutar el código para ver el resultado
QUIZ

Verificación de conocimientos

Responde cada pregunta una a una.

Pregunta 1Con const user = { name: "Sato" };, ¿qué pasa al leer user.age?

Pregunta 2El nombre de clave que quieres leer vive en una variable llamada field. ¿Qué sintaxis saca ese valor?

Pregunta 3¿Qué devuelve Object.entries(order)?