Objetos en JavaScript: crear, leer, modificar y recorrer propiedades

En el capítulo anterior, las funciones nos sirvieron para agrupar instrucciones. Los objetos agrupan datos: un usuario, un producto o una respuesta de una API son objetos. Es la estructura que más vas a manipular en JavaScript, y este capítulo la recorre entera, desde la creación hasta la copia.

¿Qué es un objeto en JavaScript?

Un objeto es un conjunto de propiedades, cada una formada por una clave (un nombre) y un valor. El valor puede ser de cualquier tipo: cadena, número, booleano, array, otro objeto o una función. Si conoces los diccionarios de Python o los arrays asociativos de PHP, la idea es la misma.

const personne = {
  nom: 'Jean',
  age: 30,
  ville: 'Lille',
  actif: true,
  langues: ['français', 'anglais'],
};

Las llaves delimitan el objeto, cada propiedad se escribe clé: valeur y las propiedades se separan con comas. La coma final después de la última propiedad está permitida y facilita añadir nuevas.

Crear un objeto

La notación literal

Es la del ejemplo anterior y es la forma que vas a usar en la gran mayoría de los casos. Un objeto vacío se escribe {} y se puede rellenar después:

const telephone = {};
telephone.marque = 'Sony';
telephone.prix = 400;
telephone.stock = 200;

console.log(telephone); // { marque: 'Sony', prix: 400, stock: 200 }

Una función constructora

Cuando hay que crear varios objetos con la misma forma, una función llamada con new los fabrica. Dentro, this apunta al objeto que se está creando.

function Telephone(marque, prix, stock) {
  this.marque = marque;
  this.prix = prix;
  this.stock = stock;
  this.enStock = function () {
    return this.stock > 0;
  };
}

const motoZ = new Telephone('Motorola', 400, 200);
const miMax = new Telephone('Xiaomi', 200, 0);

console.log(motoZ.enStock()); // true
console.log(miMax.enStock()); // false

Esta escritura es la antecesora de las clases, que verás más adelante: class Telephone { constructor(marque, prix, stock) { … } } hace lo mismo con una sintaxis más clara. Todavía te encontrarás funciones constructoras en código existente.

Por último, new Object() también crea un objeto vacío, pero no aporta nada frente a {}: ya no se usa.

Leer una propiedad

Dos sintaxis, equivalentes en el caso sencillo:

console.log(personne.nom);     // 'Jean'   — notación con punto
console.log(personne['nom']);  // 'Jean'   — notación con corchetes

Los corchetes se vuelven imprescindibles en dos situaciones: cuando la clave está en una variable y cuando contiene caracteres que no pueden ir detrás de un punto.

const cle = 'age';
console.log(personne[cle]);            // 30 — la clave viene de una variable

const fiche = { 'prénom complet': 'Jean Dupont' };
console.log(fiche['prénom complet']);  // 'Jean Dupont' — espacio en la clave

Leer una propiedad que no existe no provoca ningún error: el resultado es undefined.

console.log(personne.pays);   // undefined

En cambio, leer una propiedad de una propiedad ausente sí falla: personne.adresse.ville lanza «Cannot read properties of undefined». El encadenamiento opcional ?. evita el error:

console.log(personne.adresse?.ville);   // undefined, sin error

Modificar y añadir

La misma asignación modifica una propiedad existente o crea una nueva:

personne.age = 31;            // modificación
personne.pays = 'France';     // añadido — la propiedad no existía
personne['ville'] = 'Lyon';   // modificación, notación con corchetes

console.log(personne.age, personne.pays, personne.ville);   // 31 'France' 'Lyon'

Ojo con const: impide reasignar la variable personne a otro objeto, no modificar el objeto en sí. Es intencionado y resulta práctico. Para prohibir cualquier modificación, Object.freeze(personne) congela el objeto (las asignaciones se ignoran en modo no estricto y se rechazan en modo estricto).

Eliminar una propiedad y comprobar si existe

delete personne.pays;

console.log(personne.pays);                 // undefined
console.log('pays' in personne);            // false — la clave ya no existe
console.log(Object.hasOwn(personne, 'nom')); // true  — la clave existe, es propia del objeto

delete quita la propiedad. Para comprobar la presencia de una clave, usa mejor in o Object.hasOwn() que una comparación con undefined: una propiedad puede existir con el valor undefined.

Los métodos: funciones dentro de un objeto

Una propiedad cuyo valor es una función se llama método. Dentro de un método, this apunta al objeto que lo contiene.

const personne = {
  nom: 'Ana',
  naissance: 1996,
  saluer() {
    return `Salut, je suis ${this.nom}`;
  },
  age() {
    return 2026 - this.naissance;
  },
};

console.log(personne.saluer()); // 'Salut, je suis Ana'
console.log(personne.age());    // 30

Recorrer un objeto

Tres métodos estáticos devuelven el contenido de un objeto en forma de array, así que puedes aprovechar todo lo que ya sabes de los bucles:

const produit = { nom: 'Clavier', prix: 49.9, stock: 12 };

console.log(Object.keys(produit));    // ['nom', 'prix', 'stock']
console.log(Object.values(produit));  // ['Clavier', 49.9, 12]
console.log(Object.entries(produit)); // [['nom', 'Clavier'], ['prix', 49.9], ['stock', 12]]

for (const [cle, valeur] of Object.entries(produit)) {
  console.log(`${cle} : ${valeur}`);
}
// nom : Clavier
// prix : 49.9
// stock : 12

console.log(Object.keys(produit).length);   // 3 — el «número de propiedades»

El bucle for…in también existe y recorre las claves directamente. Ahora bien, saca también las propiedades heredadas del prototipo, algo que sorprende en cuanto trabajas con objetos creados por librerías: Object.keys() con for…of es la opción por defecto.

for (const cle in produit) {
  console.log(cle);   // nom, prix, stock
}

La operación inversa, reconstruir un objeto a partir de pares, se hace con Object.fromEntries():

Object.fromEntries([['a', 1], ['b', 2]]);   // { a: 1, b: 2 }

Objetos anidados y arrays de objetos

Un valor puede ser un objeto: así es como se representa una estructura. Y un array de objetos es la forma más habitual de los datos que llegan de una API.

const commande = {
  numero: 1042,
  client: {
    nom: 'Jean',
    adresse: { ville: 'Lille', codePostal: '59000' },
  },
  lignes: [
    { produit: 'Clavier', prix: 49.9, quantite: 1 },
    { produit: 'Souris', prix: 19.5, quantite: 2 },
  ],
};

console.log(commande.client.adresse.ville);   // 'Lille'
console.log(commande.lignes[1].produit);      // 'Souris'

let total = 0;
for (const ligne of commande.lignes) {
  total += ligne.prix * ligne.quantite;
}
console.log(total);   // 88.9

Los datos de un servidor llegan como texto JSON, cuya sintaxis es la de los objetos literales: JSON.parse(texte) lo convierte en objeto y JSON.stringify(objet) hace lo contrario.

Copiar un objeto sin sorpresas

Asignar un objeto a otra variable no lo copia: las dos variables apuntan al mismo objeto en memoria.

const original = { nom: 'Jean', adresse: { ville: 'Paris' } };

const alias = original;
alias.nom = 'Paul';
console.log(original.nom);   // 'Paul' — no era una copia

El operador spread copia el primer nivel, pero los objetos anidados siguen compartidos:

const copie = { ...original };
copie.nom = 'Marie';
copie.adresse.ville = 'Lyon';

console.log(original.nom);            // 'Paul'  — el primer nivel sí se copia
console.log(original.adresse.ville);  // 'Lyon'  — el objeto anidado está compartido

Para una copia completa, independiente en todos los niveles, la función prevista es structuredClone():

const clone = structuredClone(original);
clone.adresse.ville = 'Nice';

console.log(original.adresse.ville);  // 'Lyon' — el original no ha cambiado

structuredClone no copia los métodos: resérvalo para los objetos de datos. Por último, Object.assign(cible, source) fusiona objetos, con la misma copia superficial que el spread.

Resumen

Hacia la programación orientada a objetos

Cuando varios objetos comparten la misma forma y los mismos métodos, se describen una sola vez en una clase y se crean instancias con new. Es la continuación natural de este capítulo: Las clases en JavaScript e Introducción a las clases y a los objetos (ES6). De momento, el capítulo siguiente presenta un objeto que trae el propio lenguaje, Math, y sus métodos.