JavaScript: proprietà, metodi e aggiornamento dinamico degli oggetti

Introduzione

In JavaScript, gli oggetti sono uno strumento fondamentale per rappresentare dati e comportamenti del mondo reale: un utente, un prodotto, una configurazione, una prenotazione, un carrello e così via. Ogni oggetto può contenere proprietà (dati) e metodi (funzioni collegate all’oggetto). La parte più interessante, però, è che questi elementi possono essere gestiti in modo dinamico: possiamo aggiungere, modificare, leggere e rimuovere proprietà in base alle necessità dell’applicazione.

Questo tutorial si concentra su un aspetto molto utile e pratico: come progettare oggetti che cambiano nel tempo, mantenendo il codice chiaro, sicuro e facile da mantenere. È un tema importante quando si lavora con dati provenienti da form, API, configurazioni utente o stati applicativi.

Vedremo un esempio concreto: la gestione di un oggetto profilo utente che evolve durante l’esecuzione del programma. L’obiettivo non è solo conoscere la sintassi, ma capire quando e perché usare certe tecniche.

Codice completo

// Oggetto che rappresenta un profilo utente
const userProfile = {
  id: 101,
  name: "Luca",
  email: "[email protected]",
  isActive: true,

  // Metodo: usa le proprietà dell´oggetto tramite this
  printSummary() {
    console.log(`${this.name} <${this.email}> - attivo: ${this.isActive}`);
  },

  // Metodo per aggiornare dinamicamente una proprietà esistente
  updateProperty(key, value) {
    if (key in this) {
      this[key] = value;
      return true;
    }
    return false;
  },

  // Metodo per aggiungere una nuova proprietà solo se non esiste
  addProperty(key, value) {
    if (!(key in this)) {
      this[key] = value;
      return true;
    }
    return false;
  },

  // Metodo per rimuovere una proprietà
  removeProperty(key) {
    if (key in this) {
      delete this[key];
      return true;
    }
    return false;
  }
};

// Lettura di proprietà
console.log(userProfile.name);       // "Luca"
console.log(userProfile["email"]);   // "[email protected]"

// Uso di un metodo
userProfile.printSummary();

// Aggiornamento di una proprietà esistente
userProfile.updateProperty("name", "Marco");
userProfile.printSummary(); // Marco <...>

// Aggiunta di una nuova proprietà
userProfile.addProperty("role", "admin");
console.log(userProfile.role); // "admin"

// Tentativo di aggiornare una proprietà inesistente
const updated = userProfile.updateProperty("age", 30);
console.log(updated); // false

// Aggiornamento dinamico diretto
const field = "email";
userProfile[field] = "[email protected]";
console.log(userProfile.email); // "[email protected]"

// Rimozione di una proprietà
userProfile.removeProperty("isActive");
console.log(userProfile.isActive); // undefined

// Verifica delle chiavi presenti
console.log(Object.keys(userProfile));
// ["id", "name", "email", "printSummary", "updateProperty", "addProperty", "removeProperty", "role"]

Spiegazione

Il punto centrale del codice è che un oggetto JavaScript non è statico: può cambiare nel tempo. Questo lo rende molto utile, ma richiede attenzione per evitare comportamenti imprevedibili.

1. Proprietà

Le proprietà sono coppie chiave-valore. Nel nostro esempio, name, email e isActive sono proprietà. Si possono leggere in due modi:

• con la notazione puntata: userProfile.name
• con la notazione a parentesi quadre: userProfile["email"]

La notazione con parentesi quadre è essenziale quando il nome della proprietà è contenuto in una variabile, come in questo caso:

const field = "email";
userProfile[field] = "[email protected]";

Questo è un esempio di gestione dinamica: il nome della proprietà non è scritto direttamente, ma arriva da una variabile.

2. Metodi

I metodi sono funzioni inserite dentro l’oggetto. Servono per eseguire azioni legate ai dati dell’oggetto stesso. Nel nostro esempio:

• printSummary() mostra un riepilogo
• updateProperty() modifica una proprietà esistente
• addProperty() aggiunge una nuova proprietà
• removeProperty() elimina una proprietà

Il metodo printSummary() usa this, che si riferisce all’oggetto corrente. È una pratica comune negli oggetti letterali quando vogliamo accedere ai dati interni in modo coerente.

3. Aggiornamento dinamico

La parte più interessante del tutorial è la gestione dinamica. In applicazioni reali, spesso non sappiamo in anticipo quali campi verranno aggiornati. Pensiamo a:

• un form di modifica profilo
• un pannello di configurazione
• una risposta JSON da API
• un editor di preferenze utente

In questi casi, avere un metodo generico come updateProperty(key, value) è molto utile. Il controllo key in this verifica se la proprietà esiste già nell’oggetto. Se esiste, la aggiorniamo; altrimenti restituiamo false.

Questo approccio è migliore rispetto a scrivere molte istruzioni condizionali ripetitive, perché centralizza la logica e rende il codice più manutenibile.

4. Aggiunta e rimozione di proprietà

Con addProperty() aggiungiamo una nuova chiave solo se non è già presente. Questo evita sovrascritture accidentali. Con removeProperty() usiamo delete per eliminare una proprietà dall’oggetto.

Attenzione: delete rimuove la proprietà, ma non è sempre la scelta migliore in ogni contesto. In oggetti usati come strutture dati semplici, va bene. In oggetti molto performanti o con vincoli di forma stabile, può essere preferibile assegnare undefined oppure usare strutture dedicate, a seconda del caso d’uso.

Best practice

• Usa la notazione a parentesi quadre quando la chiave è dinamica o proviene da una variabile.
• Controlla l’esistenza delle proprietà con in o con Object.hasOwn() quando vuoi evitare errori o sovrascritture indesiderate.
• Evita oggetti troppo “aperti” se il modello dati deve restare prevedibile. La dinamicità è utile, ma va gestita con disciplina.
• Preferisci metodi dedicati per modificare l’oggetto invece di spargere aggiornamenti diretti in tutto il codice.
• Valuta la validazione dei valori prima di assegnarli, soprattutto se arrivano da input utente o API esterne.
• Usa nomi chiari per i metodi come updateProperty, addProperty e removeProperty: il codice sarà più leggibile per il team.

Un consiglio pratico: se stai modellando entità con molti campi opzionali o variabili, definisci comunque una struttura minima iniziale. Questo rende più semplice capire quali proprietà sono previste e quali sono state aggiunte in seguito.

Riepilogo

Gli oggetti JavaScript sono flessibili e potenti perché combinano dati e comportamento. In questo tutorial abbiamo visto come:

• leggere e aggiornare proprietà con notazione puntata e dinamica
• creare metodi interni all’oggetto
• gestire aggiunta, modifica e rimozione di proprietà in modo controllato
• usare this per lavorare con i dati dell’oggetto corrente

Il concetto chiave è semplice: non limitarti a memorizzare dati dentro un oggetto, ma progetta anche il modo in cui quei dati cambiano. In un’applicazione reale, questa mentalità aiuta a scrivere codice più robusto, riutilizzabile e facile da testare.

Approfondisci con risorse ufficiali

• MDN Web Docs - Oggetti JavaScript
• MDN Web Docs - Property accessors
• MDN Web Docs - Object.keys()
• MDN Web Docs - delete operator
• MDN Web Docs - this
• ECMAScript Language Specification

Se vuoi fare un passo in più, prova a trasformare questo esempio in un piccolo modulo per gestire un profilo utente, aggiungendo validazione, log delle modifiche e serializzazione in JSON. È un ottimo esercizio per consolidare l’uso pratico degli oggetti dinamici in JavaScript.