Objetos en JavaScript
Ya conoces funciones y closures: puedes agrupar lógica. Las páginas reales también necesitan datos estructurados: el título, el precio y el stock de un producto van juntos. Un objeto es un valor que guarda varias piezas con nombre.
Qué significa un objeto
Un objeto guarda datos relacionados como propiedades. Cada propiedad tiene una clave (key) — el nombre — y un valor (value). Al empezar suele usarse un literal de objeto: llaves { } con pares clave: valor. No hace falta una clase en este primer paso.
Cuatro piezas a observar
📊 Literal, clave, valor y acceso
| Pieza | Rol | Pista para principiantes |
|---|---|---|
| literal de objeto | el valor { … } que asignas a una variable |
una bolsa de datos relacionados |
| clave | el nombre de la propiedad a la izquierda de : |
cómo etiquetas la pieza |
| valor | los datos a la derecha de : |
cadena, número, booleano, … |
| acceso | leer o escribir con . o [ ] |
cómo llegas después a una pieza |
Si puedes señalar esas cuatro, explicas casi cualquier primer ejemplo de objeto. La sorpresa no suelen ser las llaves — sino que una variable ahora lleva varios campos con nombre.
let book = {
title: "Maps",
pages: 120
};
console.log(book);
Las llaves construyen el objeto
book es un valor. Dentro, title y pages son propiedades. Las comas separan los pares. Tras }, el objeto está listo. Registrar book muestra toda la bolsa en la consola.
let book = {
title: "Maps",
pages: 120
};
console.log(book.title);
console.log(book.pages);
El punto alcanza un campo
Nombre del objeto, punto y clave: book.title. Eso es la cadena "Maps". La notación de punto es el camino habitual para leer un nombre de propiedad conocido. La clave debe parecer un identificador válido en esta forma.
let book = {
title: "Maps",
pages: 120
};
console.log(book["title"]);
console.log(book["pages"]);
Los corchetes también alcanzan el campo
Aquí book["title"] es el mismo valor que book.title. Los corchetes toman una cadena (o una expresión que se convierte en clave). Úsalos cuando la clave esté en una variable o no sea un identificador simple. Con nombres fijos, el punto suele ser más claro.
let book = {
title: "Maps",
pages: 120
};
book.pages = 140;
console.log(book.pages);
Puedes actualizar una propiedad después
Asignar a book.pages cambia ese campo. El objeto sigue siendo la misma bolsa; un valor dentro es nuevo. Al leer de nuevo ves 140. Lecciones posteriores profundizan en añadir y listar propiedades — aquí el objetivo es una primera actualización clara.
let item = {
name: "Mug",
price: 8
};
console.log(item.name);
console.log(item.price);
Los campos relacionados viajan juntos
name y price describen un artículo de tienda. Tenerlos en un objeto es mejor que dos globales sueltos que se desalinean. Cuando pasas item a una función o lo pones en la página, ambos campos se mueven como unidad.
Mostrar un campo del objeto en la página
Crea un objeto de producto pequeño, lee una propiedad y pon ese texto en un párrafo.
<!DOCTYPE html>
<html>
<head>
<title>objects — page</title>
</head>
<body>
<p id="label">…</p>
<script>
let item = {
name: "Lamp",
price: 25
};
let box = document.getElementById("label");
box.textContent = item.name + " — " + item.price;
</script>
</body>
</html>
El párrafo muestra Lamp — 25. Cambia solo name o price del objeto, recarga y lee la nueva línea. La siguiente lección profundiza en propiedades de objeto — cómo se comportan las claves y el trabajo diario con ellas.
Pasos de práctica
- Crea un objeto con dos propiedades usando un literal.
- Registra una propiedad con punto en la consola.
- Registra la misma propiedad con corchetes y clave en cadena.
- Cambia una propiedad y lee el valor nuevo.
- Construye un
itemconnameyprice; registra ambos campos. - En la demo HTML, cambia solo los valores del objeto, recarga y lee el párrafo.
Errores frecuentes
- Tratar un objeto como una lista numerada (eso se acerca más a un array, más adelante)
- Olvidar comillas en valores de cadena —
title: Mapssin comillas es incorrecto - Confundir clave y valor al explicar el literal
- Esperar métodos,
thiso herramientas profundas de propiedades en esta primera página — llegan después - Crear un global por cada campo en lugar de un objeto
Resumen
- Un objeto agrupa valores relacionados como propiedades con nombre
- Un literal usa
{ clave: valor, … } - La notación de punto (
obj.key) lee una propiedad conocida - La notación de corchetes (
obj["key"]) lee con clave en cadena - Puedes asignar a una propiedad para actualizarla después
- Los campos relacionados permanecen juntos cuando el objeto se mueve
- Las actualizaciones de página pueden formar cadenas desde campos del objeto
- Siguiente: propiedades de objeto — trabajar las claves con más detalle
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 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