Oggetti in JavaScript: creare, leggere, modificare proprietà

Nel capitolo precedente le funzioni ci hanno permesso di raggruppare istruzioni. Gli oggetti raggruppano dati: un utente, un prodotto, una risposta di un’API sono oggetti. È la struttura che manipolerai di più in JavaScript, e questo capitolo la copre per intero, dalla creazione alla copia.

Che cos’è un oggetto in JavaScript?

Un oggetto è un insieme di proprietà, ognuna formata da una chiave (un nome) e da un valore. Il valore può essere di qualsiasi tipo: stringa, numero, booleano, array, un altro oggetto oppure una funzione. Se conosci i dizionari di Python o gli array associativi di PHP, l’idea è la stessa.

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

Le parentesi graffe delimitano l’oggetto, ogni proprietà si scrive clé: valeur, le proprietà sono separate da virgole. La virgola finale dopo l’ultima proprietà è ammessa e semplifica le aggiunte.

Creare un oggetto

La notazione letterale

È quella dell’esempio qui sopra ed è la forma da usare nella stragrande maggioranza dei casi. Un oggetto vuoto si scrive {} e lo si riempie dopo:

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

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

Una funzione costruttore

Quando servono più oggetti della stessa forma, li fabbrica una funzione chiamata con new. Al suo interno, this indica l’oggetto in corso di creazione.

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

Questa scrittura è l’antenata delle classi, che vedrai più avanti: class Telephone { constructor(marque, prix, stock) { … } } fa la stessa cosa con una sintassi più chiara. Incontrerai ancora funzioni costruttore nel codice esistente.

Anche new Object() crea un oggetto vuoto, ma non aggiunge nulla rispetto a {}: non si usa più.

Leggere una proprietà

Due sintassi, equivalenti nel caso semplice:

console.log(personne.nom);     // 'Jean': notazione con il punto
console.log(personne['nom']);  // 'Jean': notazione con le parentesi quadre

Le parentesi quadre diventano indispensabili in due situazioni: quando la chiave è dentro una variabile e quando contiene caratteri impossibili dopo un punto.

const cle = 'age';
console.log(personne[cle]);            // 30: la chiave arriva da una variabile

const fiche = { 'prénom complet': 'Jean Dupont' };
console.log(fiche['prénom complet']);  // 'Jean Dupont': spazio nella chiave

Leggere una proprietà che non esiste non provoca errori: il risultato è undefined.

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

Leggere invece una proprietà di una proprietà assente fa saltare tutto: personne.adresse.ville solleva «Cannot read properties of undefined». L’optional chaining ?. evita l’errore:

console.log(personne.adresse?.ville);   // undefined, senza errore

Modificare e aggiungere

La stessa assegnazione modifica una proprietà esistente oppure ne crea una nuova:

personne.age = 31;            // modifica
personne.pays = 'France';     // aggiunta: la proprietà non esisteva
personne['ville'] = 'Lyon';   // modifica, notazione con le parentesi quadre

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

Attenzione a const: impedisce di riassegnare la variabile personne a un altro oggetto, non di modificare l’oggetto stesso. È voluto ed è comodo. Per vietare qualsiasi modifica, Object.freeze(personne) congela l’oggetto (le assegnazioni vengono ignorate in modalità non strict, rifiutate in modalità strict).

Eliminare una proprietà e verificarne l’esistenza

delete personne.pays;

console.log(personne.pays);                 // undefined
console.log('pays' in personne);            // false: la chiave non esiste più
console.log(Object.hasOwn(personne, 'nom')); // true: la chiave esiste ed è propria dell'oggetto

delete rimuove la proprietà. Per verificare la presenza di una chiave, preferisci in o Object.hasOwn() a un test su undefined: una proprietà può esistere con il valore undefined.

I metodi: funzioni dentro un oggetto

Una proprietà il cui valore è una funzione si chiama metodo. Dentro un metodo, this indica l’oggetto che 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

Scorrere un oggetto

Tre metodi statici restituiscono il contenuto di un oggetto sotto forma di array, il che permette di riusare tutto quello che sai sui cicli:

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: il «numero di proprietà»

Esiste anche il ciclo for…in, che scorre direttamente le chiavi. Riporta però anche le proprietà ereditate dal prototype, cosa che sorprende non appena si manipolano oggetti creati da una libreria: Object.keys() con for…of resta la scelta predefinita.

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

L’operazione inversa, ricostruire un oggetto a partire dalle coppie, si fa con Object.fromEntries():

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

Oggetti annidati e array di oggetti

Un valore può essere un oggetto: è così che si rappresenta una struttura. E un array di oggetti è la forma più comune dei dati che arrivano da un’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

I dati di un server arrivano sotto forma di testo JSON, la cui sintassi è quella degli oggetti letterali: JSON.parse(texte) lo trasforma in oggetto, JSON.stringify(objet) fa il contrario.

Copiare un oggetto senza sorprese

Assegnare un oggetto a un’altra variabile non lo copia: le due variabili puntano allo stesso oggetto in memoria.

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

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

L’operatore spread copia il primo livello, ma gli oggetti annidati restano condivisi:

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

console.log(original.nom);            // 'Paul': il primo livello è copiato davvero
console.log(original.adresse.ville);  // 'Lyon': l'oggetto annidato è condiviso

Per una copia completa, indipendente a tutti i livelli, la funzione prevista è structuredClone():

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

console.log(original.adresse.ville);  // 'Lyon': l'originale non si è mosso

structuredClone non copia i metodi: riservala agli oggetti di dati. Infine, Object.assign(cible, source) unisce più oggetti, con la stessa copia superficiale dello spread.

Riepilogo

Verso la programmazione orientata agli oggetti

Quando più oggetti condividono la stessa forma e gli stessi metodi, li si descrive una volta sola in una classe e se ne creano istanze con new. È il seguito naturale di questo capitolo: Le classi in JavaScript e Introduzione alle classi e agli oggetti (ES6). Per ora, il capitolo successivo presenta un oggetto fornito dal linguaggio, Math, e i suoi metodi.