Proprietà, metodi e aggiornamento dinamico degli oggetti JavaScript

Introduzione

In JavaScript, gli oggetti sono uno degli strumenti più usati per rappresentare dati e comportamenti. Un oggetto può contenere proprietà, cioè informazioni associate a una chiave, e metodi, cioè funzioni che operano su quei dati. Ma nella pratica, spesso non basta creare un oggetto statico: bisogna anche aggiornarlo in modo dinamico, ad esempio aggiungendo proprietà, modificandole in base all’input dell’utente o costruendo strutture flessibili per gestire dati reali.

In questo tutorial vedremo un sotto-argomento molto utile e concreto: come progettare un oggetto che gestisce un profilo utente con proprietà, metodi e aggiornamenti dinamici. L’obiettivo è capire come combinare struttura e flessibilità senza perdere leggibilità o controllo.

Questo tema è particolarmente utile quando lavori con:

• form di registrazione o profili utente;
• carrelli e configurazioni di e-commerce;
• dashboard con dati modificabili;
• oggetti che devono crescere nel tempo in base a eventi o input esterni.

Codice completo

const userProfile = {
  // Proprietà base
  nome: "Luca",
  cognome: "Bianchi",
  eta: 29,
  ruolo: "developer",

  // Proprietà annidata
  contatti: {
    email: "[email protected]",
    telefono: "+39 333 1234567"
  },

  // Metodo: restituisce una descrizione leggibile del profilo
  getSummary() {
    return `${this.nome} ${this.cognome}, ${this.eta} anni, ruolo: ${this.ruolo}`;
  },

  // Metodo: aggiorna una proprietà esistente o ne crea una nuova
  updateField(key, value) {
    this[key] = value;
    return this;
  },

  // Metodo: aggiorna una proprietà annidata in modo dinamico
  updateContact(contactKey, value) {
    this.contatti[contactKey] = value;
    return this;
  },

  // Metodo: rimuove una proprietà dinamicamente
  removeField(key) {
    delete this[key];
    return this;
  },

  // Metodo: controlla se una proprietà esiste
  hasField(key) {
    return key in this;
  }
};

// Uso dei metodi
console.log(userProfile.getSummary());
// Luca Bianchi, 29 anni, ruolo: developer

userProfile.updateField("eta", 30);
userProfile.updateField("città", "Milano");
userProfile.updateContact("email", "[email protected]");

console.log(userProfile);
// Oggetto aggiornato con eta = 30 e città = "Milano"

console.log(userProfile.hasField("ruolo")); // true
console.log(userProfile.hasField("stipendio")); // false

userProfile.removeField("ruolo");

console.log(userProfile);
// La proprietà "ruolo" è stata rimossa

// Iterazione sulle proprietà dinamiche
for (const key in userProfile) {
  if (typeof userProfile[key] !== "function") {
    console.log(`${key}:`, userProfile[key]);
  }
}

// Creazione di una proprietà usando notazione con parentesi quadre
const dynamicKey = "linguaggioPreferito";
userProfile[dynamicKey] = "JavaScript";

console.log(userProfile.linguaggioPreferito); // JavaScript

Spiegazione

Il codice mostra un oggetto chiamato userProfile che contiene sia dati sia funzioni. Questa è una pratica comune in JavaScript: gli oggetti non servono solo a memorizzare valori, ma anche a racchiudere il comportamento associato a quei valori.

1. Proprietà dell’oggetto

Le proprietà sono coppie chiave-valore. Nell’esempio troviamo:

• nome, cognome, eta, ruolo: dati primitivi;
• contatti: oggetto annidato, utile per raggruppare informazioni correlate.

Raggruppare i dati in modo logico aiuta a mantenere il codice più leggibile e più facile da estendere. Per esempio, invece di avere email e telefono sparsi a livello principale, li inseriamo dentro contatti.

2. Metodi dell’oggetto

I metodi sono funzioni definite dentro l’oggetto. Nel nostro esempio:

• getSummary() crea una stringa descrittiva;
• updateField(key, value) aggiorna o crea una proprietà in modo dinamico;
• updateContact(contactKey, value) aggiorna una proprietà annidata;
• removeField(key) elimina una proprietà;
• hasField(key) verifica se una chiave è presente.

La parola chiave this fa riferimento all’oggetto corrente. È fondamentale per leggere e modificare le sue proprietà dall’interno dei metodi.

3. Gestione dinamica delle proprietà

La parte più interessante è l’aggiornamento dinamico. Quando scriviamo:

this[key] = value;

stiamo usando una chiave calcolata. Questo significa che il nome della proprietà non è fisso, ma dipende dal valore della variabile key. È una tecnica molto utile quando il nome del campo arriva da un form, da una API o da una configurazione esterna.

Per esempio:

userProfile.updateField("città", "Milano");

aggiunge una nuova proprietà città senza doverla definire prima nell’oggetto.

4. Aggiunta e rimozione di proprietà

In JavaScript puoi aggiungere proprietà in qualsiasi momento. Questa flessibilità è potente, ma va usata con criterio. Nel tutorial abbiamo anche visto delete, che rimuove una proprietà dall’oggetto:

delete this[key];

La rimozione dinamica è utile quando un dato non è più valido, quando un campo viene disattivato o quando vuoi ripulire una struttura prima di inviarla a un server.

5. Verifica dell’esistenza di una proprietà

Il metodo hasField usa l’operatore in per controllare se una chiave esiste nell’oggetto. Questo è preferibile rispetto a controlli più approssimativi, perché distingue tra proprietà mancanti e proprietà presenti con valore undefined.

Esempio:

"ruolo" in userProfile

restituisce true anche se il valore fosse vuoto, finché la proprietà esiste davvero.

6. Iterazione sulle proprietà

Il ciclo for...in consente di scorrere tutte le chiavi dell’oggetto. Nel nostro caso filtriamo le funzioni con:

if (typeof userProfile[key] !== "function")

Così stampiamo solo i dati e non i metodi. È una tecnica utile quando devi serializzare, visualizzare o esportare un oggetto.

Best practice

• Usa oggetti per dati correlati: se un insieme di valori descrive la stessa entità, un oggetto è spesso la scelta migliore.
• Separa dati e comportamento quando serve: se l’oggetto diventa troppo grande o complesso, valuta di spostare la logica in funzioni esterne o classi.
• Usa chiavi dinamiche con attenzione: sono potenti, ma possono rendere il codice meno prevedibile se usate senza regole.
• Controlla l’esistenza delle proprietà prima di leggerle o modificarle, soprattutto con dati provenienti dall’esterno.
• Evita di abusare di delete: la cancellazione è utile, ma in alcuni casi può rendere l’oggetto meno stabile da gestire. Se possibile, valuta di impostare un valore esplicito o ricostruire l’oggetto.
• Preferisci nomi di proprietà coerenti: anche se JavaScript permette chiavi con spazi o caratteri speciali, è meglio usare nomi semplici e uniformi.
• Documenta i metodi: quando un oggetto cresce, commenti chiari e nomi espliciti aiutano molto la manutenzione.

Riepilogo

In questo tutorial abbiamo visto come un oggetto JavaScript possa contenere sia proprietà sia metodi, e come gestire le proprietà in modo dinamico. La chiave del lavoro con gli oggetti non è solo memorizzare dati, ma costruire strutture flessibili e controllabili.

Abbiamo imparato a:

• definire proprietà semplici e annidate;
• creare metodi che usano this;
• aggiungere e aggiornare proprietà con chiavi dinamiche;
• rimuovere proprietà con delete;
• verificare l’esistenza di una chiave con in;
• iterare sulle proprietà dell’oggetto.

Queste tecniche sono fondamentali per scrivere codice JavaScript pratico, leggibile e adatto a scenari reali.

Approfondisci con risorse ufficiali

• MDN Web Docs - Object: documentazione completa sugli oggetti JavaScript.
• MDN Web Docs - this: spiegazione approfondita del comportamento di this.
• MDN Web Docs - delete operator: dettagli sulla rimozione delle proprietà.
• MDN Web Docs - in operator: uso corretto dell’operatore di verifica delle proprietà.
• ECMAScript Language Specification: riferimento ufficiale per il comportamento del linguaggio.