Oggetti in JavaScript: proprietà e metodi

Un oggetto è un contenitore di valori con un nome

Un array raggruppa i valori per posizione. Un oggetto li raggruppa per nome. Quando ciò che stai modellando ha parti con un'etichetta, come un utente con nome ed età o una richiesta con metodo e URL, la scelta giusta è un oggetto.

Il modo più breve per crearne uno è un oggetto letterale:

const user = {
  name: "Ada",
  age: 30,
  isAdmin: false,
};

console.log(user);

Ogni voce è una coppia chiave: valore. Sotto il cofano le chiavi sono stringhe (le virgolette sono facoltative per identificatori validi come name). I valori possono essere qualsiasi cosa JavaScript sappia rappresentare: numeri, stringhe, booleani, array, funzioni e persino altri oggetti.

La virgola finale dopo l'ultima voce va benissimo. La maggior parte dei team la lascia: così i diff restano puliti quando più avanti aggiungi una nuova proprietà.

Leggere e scrivere le proprietà

Ci sono due modi per accedere a una proprietà: la notazione con punto e quella con parentesi quadre.

const user = { name: "Ada", age: 30 };

console.log(user.name);
console.log(user["age"]);

user.age = 31;
user["name"] = "Ada Lovelace";

console.log(user);

La notazione con punto è più pulita ed è quella che userai di default. Le parentesi quadre servono quando la chiave è salvata in una variabile o quando non è un identificatore valido:

const user = { "first name": "Ada", age: 30 };
const field = "age";

console.log(user["first name"]);  // dot notation can't do this
console.log(user[field]);         // key from a variable

Leggere una proprietà che non esiste restituisce undefined, senza nessun errore:

const user = { name: "Ada" };
console.log(user.email);  // undefined

Questo può nascondere in silenzio gli errori di battitura. Se vuoi un fallimento evidente, devi controllarlo esplicitamente.

Aggiungere ed eliminare proprietà

Gli oggetti sono sempre aperti: puoi aggiungere chiavi in qualsiasi momento.

const user = { name: "Ada" };

user.age = 30;
user["email"] = "ada@example.com";

console.log(user);

E rimuoverle con delete:

const user = { name: "Ada", age: 30, email: "ada@example.com" };

delete user.email;

console.log(user);
console.log("email" in user);  // false

delete è uno di quegli operatori che non userai tutti i giorni, ma quando devi eliminare del tutto una chiave (e non solo impostarla a undefined) è lo strumento giusto. Con user.email = undefined la chiave resta lì: "email" in user sarebbe ancora true.

Controllare se una proprietà esiste

Tre modi, ognuno con un significato leggermente diverso:

const user = { name: "Ada", email: undefined };

console.log("name" in user);                // true
console.log("email" in user);               // true - key exists, value is undefined
console.log(Object.hasOwn(user, "name"));   // true
console.log(user.name !== undefined);       // true
console.log(user.email !== undefined);      // false - misleading!

• in controlla se la chiave esiste, comprese quelle ereditate dalla catena dei prototipi.
• Object.hasOwn(obj, key) guarda solo le chiavi proprie dell'oggetto. Usalo quando vuoi ignorare ciò che è ereditato. Sostituisce la vecchia chiamata hasOwnProperty.
• obj.key !== undefined di solito funziona, ma ti inganna se una proprietà è impostata esplicitamente a undefined.

Nel dubbio, usa Object.hasOwn: fa esattamente quello che di solito ti aspetti.

Metodi: funzioni che vivono negli oggetti

Una proprietà il cui valore è una funzione si chiama metodo. Esiste una sintassi breve per definirli dentro un oggetto letterale:

const user = {
  name: "Ada",
  greet() {
    return `Hello, I'm ${this.name}`;
  },
};

console.log(user.greet());

this dentro un metodo si riferisce all'oggetto su cui il metodo è stato chiamato, in questo caso user. È così che greet sa quale nome usare.

Una cosa a cui fare attenzione: le arrow function non hanno un proprio this, quindi sono la scelta sbagliata per i metodi che devono leggere altre proprietà dell'oggetto:

const user = {
  name: "Ada",
  greet: () => `Hello, I'm ${this.name}`,  // this is NOT user
};

console.log(user.greet());  // Hello, I'm undefined

Usa la sintassi abbreviata dei metodi (greet() { ... }) per tutto ciò che tocca this. Le arrow function sono ottime come callback, non come metodi degli oggetti.

Oggetti annidati

Anche i valori possono essere oggetti, a qualsiasi profondità:

const user = {
  name: "Ada",
  address: {
    city: "London",
    postcode: "NW1",
  },
  tags: ["admin", "early-adopter"],
};

console.log(user.address.city);
console.log(user.tags[0]);

user.address.city = "Cambridge";
console.log(user.address);

Per leggere una proprietà annidata basta concatenare gli accessi: user.address.city. Il problema: se un qualsiasi passaggio lungo la strada è null o undefined, ottieni un TypeError:

console.log(user.profile.city);
// TypeError: Cannot read properties of undefined (reading 'city')

L'optional chaining (user.profile?.city) è la soluzione moderna: restituisce undefined invece di lanciare un errore quando manca un anello. Più avanti in questo capitolo c'è una pagina dedicata.

Scorrere un oggetto

Quando devi percorrere tutte le chiavi di un oggetto, la famiglia Object.keys, Object.values e Object.entries è quello che ti serve:

const scores = { ada: 95, boris: 82, rosa: 91 };

for (const name of Object.keys(scores)) {
  console.log(name);
}

for (const score of Object.values(scores)) {
  console.log(score);
}

for (const [name, score] of Object.entries(scores)) {
  console.log(`${name}: ${score}`);
}

Object.entries è il più utile: ti dà chiave e valore insieme e si abbina benissimo alla destrutturazione degli array.

Esiste anche il ciclo for...in, ma percorre anche le proprietà ereditate, cosa che di solito non vuoi:

for (const key in scores) {
  console.log(key);  // works, but includes inherited keys
}

Preferisci Object.keys / Object.entries, a meno che tu non voglia proprio le proprietà ereditate.

Sintassi abbreviate da conoscere

Due zuccheri sintattici che vedrai ovunque:

const name = "Ada";
const age = 30;

// Property shorthand: { name: name, age: age }
const user = { name, age };

console.log(user);

// Computed keys: the key comes from an expression
const field = "email";
const update = {
  [field]: "ada@example.com",
  [`${field}Verified`]: true,
};

console.log(update);

La forma abbreviata delle proprietà scatta quando il nome della variabile coincide con la chiave. Le chiavi calcolate (la forma [expr]) ti permettono di costruire i nomi delle proprietà in modo dinamico: utile quando scrivi funzioni che aggiornano un campo per nome.

L'uguaglianza tra oggetti è per riferimento

Questa cosa frega quasi tutti almeno una volta:

const a = { x: 1 };
const b = { x: 1 };
const c = a;

console.log(a === b);  // false - different objects
console.log(a === c);  // true  - same object

=== sugli oggetti controlla se entrambi i lati puntano allo stesso oggetto in memoria, non se hanno lo stesso contenuto. Due oggetti con proprietà identiche restano due oggetti diversi.

Per chiederti "hanno la stessa forma?" devi confrontare i campi a mano oppure usare una funzione di uguaglianza profonda. JSON.stringify(a) === JSON.stringify(b) è un controllo veloce e approssimativo che funziona con dati semplici, ma cede con qualsiasi cosa contenga funzioni, undefined o riferimenti circolari.

Gli oggetti sono mutabili anche con const

const blocca la variabile su un unico valore. Non congela l'oggetto a cui quel valore punta:

const user = { name: "Ada" };

user.name = "Boris";    // fine - mutating the object
user.age = 30;          // fine - adding a property

console.log(user);

// user = { name: "Rosa" };  // TypeError - reassigning the variable

Se vuoi davvero l'immutabilità, Object.freeze(user) impedisce ulteriori modifiche (in modo superficiale: gli oggetti annidati restano mutabili). In pratica la maggior parte del codice si affida alle convenzioni più che a Object.freeze: tratta gli oggetti const come "non riassegnare questo binding" e gestisci l'immutabilità a livello di progettazione.

Prossimo passo: gli array

Oggetti e array sono i due mattoni con cui è costruito tutto il resto. Gli oggetti gestiscono dati con un'etichetta, gli array dati in ordine. Nella prossima pagina: come funzionano gli array in JavaScript e la manciata di metodi (push, slice, map e compagnia) che fanno la maggior parte del lavoro.