JavaScript: proprietà, metodi e gestione dinamica con <strong>Object.assign()</strong>

Introduzione

Quando si lavora con gli oggetti in JavaScript, spesso ci si concentra su proprietà e metodi base: leggere un valore, aggiungerne uno nuovo, chiamare una funzione interna. Tuttavia, in progetti reali capita molto spesso di dover combinare oggetti, aggiornare configurazioni, creare copie sicure di dati o costruire oggetti partendo da più sorgenti.

Un sotto-argomento particolarmente utile, pratico e molto usato è Object.assign(). Questo metodo permette di copiare proprietà da uno o più oggetti sorgente verso un oggetto di destinazione. È una tecnica fondamentale per la gestione dinamica degli oggetti, soprattutto quando devi aggiornare dati senza modificare accidentalmente l’originale.

In questo tutorial vedremo come funziona Object.assign(), quando usarlo, quali sono i suoi limiti e come sfruttarlo in modo corretto con esempi concreti.

Codice completo

// Oggetto di partenza: profilo utente
const utenteBase = {
  nome: "Luca",
  ruolo: "developer",
  attivo: true,
  saluta() {
    return `Ciao, sono ${this.nome}`;
  }
};

// Oggetto con aggiornamenti parziali
const aggiornamentiProfilo = {
  ruolo: "senior developer",
  citta: "Milano"
};

// Creiamo un nuovo oggetto unendo i dati
const profiloAggiornato = Object.assign({}, utenteBase, aggiornamentiProfilo);

console.log(profiloAggiornato);
// {
//   nome: "Luca",
//   ruolo: "senior developer",
//   attivo: true,
//   saluta: ƒ,
//   citta: "Milano"
// }

console.log(profiloAggiornato.saluta()); // Ciao, sono Luca

// Verifichiamo che l´oggetto originale non sia stato modificato
console.log(utenteBase.ruolo); // developer
console.log(utenteBase.citta); // undefined

// Aggiornamento dinamico di un oggetto esistente
const impostazioni = {
  tema: "chiaro",
  lingua: "it",
  notifiche: true
};

const nuoveImpostazioni = {
  tema: "scuro",
  notifiche: false
};

Object.assign(impostazioni, nuoveImpostazioni);

console.log(impostazioni);
// { tema: "scuro", lingua: "it", notifiche: false }

// Esempio con più sorgenti
const defaultConfig = {
  timeout: 3000,
  retry: 2,
  cache: true
};

const configUtente = {
  retry: 5
};

const configFinale = Object.assign({}, defaultConfig, configUtente);

console.log(configFinale);
// { timeout: 3000, retry: 5, cache: true }

// Attenzione: Object.assign fa una copia superficiale
const stato = {
  utente: {
    nome: "Anna"
  }
};

const copiaStato = Object.assign({}, stato);
copiaStato.utente.nome = "Sara";

console.log(stato.utente.nome); // Sara
console.log(copiaStato.utente.nome); // Sara

Spiegazione

Object.assign() ha una sintassi semplice:

Object.assign(destinazione, sorgente1, sorgente2, ...)

Il metodo copia tutte le proprietà enumerabili dei sorgenti dentro l’oggetto di destinazione e restituisce proprio la destinazione aggiornata.

1. Creare una copia e unire più oggetti

Nel primo esempio abbiamo usato:

Object.assign({}, utenteBase, aggiornamentiProfilo)

Qui il primo argomento è un oggetto vuoto. Questo è un pattern molto comune perché ci permette di creare un nuovo oggetto senza alterare quello originale. Le proprietà di aggiornamentiProfilo sovrascrivono eventuali proprietà con lo stesso nome presenti in utenteBase.

2. Aggiornare un oggetto esistente

Nel secondo esempio abbiamo passato come destinazione l’oggetto impostazioni:

Object.assign(impostazioni, nuoveImpostazioni)

In questo caso l’oggetto viene modificato direttamente. È utile quando vuoi applicare aggiornamenti rapidi a un oggetto già in uso, per esempio una configurazione caricata dall’interfaccia utente.

3. Gestire più sorgenti

Object.assign() può ricevere anche più oggetti sorgente. Questo è comodo per costruire una configurazione finale partendo da valori di default e preferenze utente:

const configFinale = Object.assign({}, defaultConfig, configUtente);

In questo modo ottieni una combinazione ordinata e leggibile: prima i valori base, poi quelli personalizzati.

4. Copia superficiale: il punto più importante

Uno degli aspetti più importanti da capire è che Object.assign() esegue una copia superficiale. Questo significa che se una proprietà contiene un oggetto o un array, viene copiata solo la referenza, non una copia profonda del contenuto.

Nel nostro esempio:

const copiaStato = Object.assign({}, stato);

la proprietà utente punta allo stesso oggetto interno sia in stato sia in copiaStato. Per questo, se modifichi copiaStato.utente.nome, cambia anche l’originale.

Questo comportamento è corretto per il metodo, ma devi conoscerlo per evitare bug difficili da tracciare.

5. Relazione con proprietà e metodi

Object.assign() non copia solo valori semplici: copia anche metodi definiti come proprietà funzione. Nel primo esempio, il metodo saluta() è stato incluso nel nuovo oggetto.

Attenzione però: se il metodo usa this, funzionerà correttamente solo se l’oggetto viene usato come contesto di chiamata. In questo caso:

profiloAggiornato.saluta()

this punta a profiloAggiornato, quindi il metodo legge correttamente nome.

Best practice

• Usa un oggetto vuoto come destinazione se vuoi evitare di modificare l’originale: Object.assign({}, obj1, obj2).
• Ricorda che la copia è superficiale: per strutture annidate complesse serve una strategia diversa, ad esempio una copia profonda.
• Ordina bene i sorgenti: le proprietà dei sorgenti successivi sovrascrivono quelle precedenti con lo stesso nome.
• Usalo per configurazioni e merge di dati: è perfetto per impostazioni, oggetti di stato semplici e dati normalizzati.
• Evita di usarlo come soluzione universale: se hai array o oggetti nidificati, valuta una clonazione più robusta.
• Controlla sempre i metodi che usano this: se copi oggetti con funzioni interne, verifica che il contesto resti coerente.

Riepilogo

Object.assign() è uno strumento essenziale per la gestione dinamica degli oggetti in JavaScript. Ti permette di:

• unire più oggetti in uno solo;
• aggiornare proprietà in modo rapido;
• creare copie senza modificare l’originale, almeno a livello superficiale;
• gestire configurazioni e dati in modo pulito e leggibile.

Il suo punto di forza è la semplicità. Il suo limite principale è la copia superficiale. Se conosci bene questo comportamento, puoi usarlo con sicurezza in moltissimi scenari reali.

In sintesi: quando devi combinare o aggiornare oggetti in modo controllato, Object.assign() è una delle prime soluzioni da considerare.

Approfondisci con risorse ufficiali

• MDN Web Docs - Object.assign(): documentazione completa, esempi e comportamento dettagliato.
• MDN Web Docs - Object: panoramica generale sugli oggetti in JavaScript.
• ECMAScript Language Specification: specifica ufficiale del comportamento del linguaggio.
• MDN Web Docs - Shallow copy: utile per capire bene la differenza tra copia superficiale e copia profonda.