JavaScript
Objetos
Introduce los objetos de JavaScript, sus propiedades, claves, acceso dinámico, mutación, identidad, herencia y diferencias frente a JSON.
- Última actualización
- Actualizada
- Nivel
- Fundamentos
- Fundamentos de programación
JavaScript
Introduce los objetos de JavaScript, sus propiedades, claves, acceso dinámico, mutación, identidad, herencia y diferencias frente a JSON.
Un objeto agrupa información mediante pares de propiedad y valor.
const product = {
id: "product-123",
name: "Keyboard",
price: 120,
isActive: true,
};La forma más habitual es un literal de objeto.
const user = {
name: "Nicolás",
role: "developer",
};También existen otras formas:
const emptyObject = new Object();
const objectWithoutPrototype = Object.create(null);Para objetos normales, el literal {} suele ser más claro.
Object.create(null) tiene usos especiales: crea un objeto sin métodos heredados como toString. No debe utilizarse como reemplazo automático de {}.
Las claves de un objeto son strings o symbols.
const settings = {
theme: "dark",
"items-per-page": 20,
};Aunque una clave parezca un número, normalmente se convierte a string.
const values = {
1: "one",
};
Object.keys(values); // ["1"]Los symbols permiten crear claves que no chocan accidentalmente con otras.
const internalId = Symbol("internalId");
const record = {
[internalId]: "abc-123",
};Se estudiarán con más detalle cuando analicemos propiedades y APIs del lenguaje.
product.name;Es clara cuando la clave es conocida y tiene un nombre válido.
product["name"];Es necesaria cuando la clave:
const field = "price";
product[field]; // 120Esto no hace lo mismo:
product.field; // Busca literalmente la propiedad "field".Los objetos son mutables por defecto.
const product = {
name: "Keyboard",
};
product.price = 120;
product.name = "Mechanical keyboard";const impide reasignar la variable, pero no impide cambiar el objeto.
product = {}; // TypeError
product.price = 130; // PermitidoLa diferencia entre reasignación y mutación se profundiza en Mutabilidad e inmutabilidad.
delete product.price;delete elimina una propiedad propia cuando es configurable.
Eliminar no es igual que asignar undefined.
product.price = undefined;
Object.hasOwn(product, "price"); // truedelete product.price;
Object.hasOwn(product, "price"); // falseLa elección depende de si la propiedad debe seguir formando parte de la estructura.
Una propiedad puede contener una función.
const cart = {
items: [],
addItem(item) {
this.items.push(item);
},
};Cuando una función forma parte del objeto y representa su comportamiento, suele llamarse método.
El valor de this depende de cómo se invoque la función. Este comportamiento tendrá una nota propia.
const field = "email";
const user = {
[field]: "nico@example.com",
};También pueden construir claves dinámicas.
const status = "pending";
const counters = {
[`orders:${status}`]: 4,
};Cuando la variable y la propiedad tienen el mismo nombre, puede omitirse la repetición.
const name = "Keyboard";
const price = 120;
const product = {
name,
price,
};Equivale a:
const product = {
name: name,
price: price,
};{} === {}; // falseSon dos objetos diferentes, aunque ambos estén vacíos.
const first = { name: "Nicolás" };
const second = first;
first === second; // truefirst y second contienen el mismo valor de referencia.
Para comparar contenido necesitas definir qué propiedades importan.
function areSameProduct(first, second) {
return first.id === second.id;
}Un objeto puede acceder a propiedades que no están guardadas directamente en él.
const user = {
name: "Nicolás",
};
user.toString();toString normalmente proviene de la cadena de prototipos.
Para comprobar una propiedad propia:
Object.hasOwn(user, "name"); // true
Object.hasOwn(user, "toString"); // falseEste sistema se profundiza en Prototipos y Cadena de prototipos.
Object.keys(product); // Claves propias enumerables.
Object.values(product); // Valores propios enumerables.
Object.entries(product); // Pares [clave, valor].for (const [key, value] of Object.entries(product)) {
console.log(key, value);
}El orden de propiedades tiene reglas definidas, pero no conviene diseñar la lógica como si un objeto fuera una lista ordenada. Si el orden es central, un array puede comunicar mejor la intención.
En JavaScript, muchas estructuras son objetos:
[];
new Date();
new Map();
new Set();
/regular-expression/;
function example() {}Comparten características del modelo de objetos, pero cada una tiene comportamiento y APIs propias.
Un objeto es un valor vivo de JavaScript.
const user = {
createdAt: new Date(),
greet() {
return "Hello";
},
};JSON es un formato de texto para intercambiar datos.
{
"name": "Nicolás",
"isActive": true
}JSON no permite funciones, undefined, comments ni claves sin comillas. Además, una fecha serializada suele convertirse en string.
if ({}) {
console.log("Runs");
}Para saber si tiene propiedades propias enumerables:
Object.keys(settings).length === 0;Esto solo revisa las propiedades incluidas por Object.keys, no todos los detalles internos posibles.
function createConfiguration(environment) {
const baseConfiguration = {
retryCount: 3,
timeout: 5000,
};
if (environment === "development") {
baseConfiguration.enableLogs = true;
}
return baseConfiguration;
}El objeto agrupa valores relacionados y puede evolucionar según las reglas del programa.
Más adelante veremos cuándo es preferible mutarlo localmente y cuándo devolver uno nuevo.
const vuelve inmutable un objeto.undefined con eliminar una propiedad.===.const protege la variable, no el contenido del objeto.¿Qué imprime el código?
const field = "name";
const user = {
name: "Nicolás",
};
console.log(user.field);
console.log(user[field]);Imprime undefined y después "Nicolás". La notación de punto busca literalmente field; los corchetes evalúan la variable y obtienen "name".
Propiedades y métodos profundiza cómo se crean, consultan, enumeran y describen las partes que forman un objeto.