JavaScript — Oggetti e Destructuring 2026

📦 Oggetti letterali — rappresentare un'entità con proprietà nominate

Un Object raggruppa dati correlati sotto proprietà con nome (chiave), a differenza di un array dove i dati sono ordinati per posizione numerica.

const studente = { nome: 'Marco', corso: 'Full Stack', voto: 28, attivo: true }; // Notazione punto (la più comune): console.log(studente.nome); // → 'Marco' // Notazione a parentesi quadre (obbligatoria se la chiave è dinamica o ha spazi): console.log(studente['corso']); // → 'Full Stack' const chiave = 'voto'; console.log(studente[chiave]); // → 28 (funziona SOLO con le parentesi, non con il punto)

💡 Quando serve la notazione a parentesi: quando il nome della proprietà è contenuto in una variabile (come chiave sopra) — studente.chiave cercherebbe letteralmente una proprietà chiamata "chiave", non il suo valore.

✏️ Modificare e aggiungere proprietà

const prodotto = { nome: 'Mouse', prezzo: 15 }; prodotto.prezzo = 12; // modifica una proprietà esistente prodotto.scontato = true; // aggiunge una NUOVA proprietà, anche se non dichiarata prima console.log(prodotto); // → { nome: 'Mouse', prezzo: 12, scontato: true }

✅ A differenza di un array con lunghezza spesso fissa concettualmente, un oggetto in JavaScript può ricevere nuove proprietà in qualsiasi momento, semplicemente assegnandole.

🎯 Destructuring di oggetti — estrarre proprietà in variabili

Il destructuring (introdotto con ES6) permette di estrarre proprietà di un oggetto direttamente in variabili separate, senza scrivere oggetto.proprietà ripetutamente.

const studente = { nome: 'Giulia', corso: 'Contabilità', voto: 30 }; // Senza destructuring: const nome1 = studente.nome; const voto1 = studente.voto; // Con destructuring, in una sola riga: const { nome, voto } = studente; console.log(nome, voto); // → Giulia 30

⚠️ I nomi delle variabili nel destructuring devono corrispondere esattamente ai nomi delle proprietà dell'oggetto (per default) — const { nome } funziona solo se l'oggetto ha davvero una proprietà chiamata "nome".

🏷️ Destructuring con rinomina e valori di default

💡 Il destructuring funziona anche sui parametri delle funzioni: function mostra({nome, prezzo}) {...} estrae direttamente le proprietà dall'oggetto passato come argomento, molto usato nel codice moderno.

📋 Destructuring di array

const coordinate = [40.85, 14.27]; const [lat, lng] = coordinate; console.log(lat, lng); // → 40.85 14.27 // Utile anche per scambiare due variabili senza una temporanea: let a = 1, b = 2; [a, b] = [b, a]; console.log(a, b); // → 2 1

✅ Il destructuring di array usa parentesi quadre [ ] e si basa sulla POSIZIONE (il primo elemento va alla prima variabile), a differenza del destructuring di oggetti che usa parentesi graffe { } e si basa sul NOME della proprietà.

✨ Spread operator — "spargere" gli elementi di un oggetto/array

Lo spread operator ... espande gli elementi di un array o le proprietà di un oggetto — molto usato per copiare o unire dati senza modificare l'originale.

💡 Lo spread non modifica mai l'originale: crea sempre una nuova copia. Questo è fondamentale in programmazione moderna per evitare "effetti collaterali" indesiderati su dati condivisi tra parti diverse del codice.

⚠️ Attenzione: lo spread copia solo il primo livello (shallow copy)

⚠️ Lo spread crea una copia superficiale (shallow): gli oggetti annidati (come indirizzo) restano condivisi tra originale e copia — modificarli in un punto li modifica ovunque. Per copie profonde servono tecniche più avanzate (fuori dallo scopo di questa guida introduttiva).

🔄 JSON.stringify() — da oggetto a testo

JSON (JavaScript Object Notation) è il formato standard per scambiare dati strutturati tra sistemi diversi — es. tra un browser e un server. JSON.stringify() converte un oggetto JavaScript in una stringa di testo in questo formato.

const studente = { nome: 'Marco', voto: 28, attivo: true }; const testo = JSON.stringify(studente); console.log(testo); // → '{"nome":"Marco","voto":28,"attivo":true}' console.log(typeof testo); // → 'string' (non più un oggetto!)

💡 JSON.stringify() è ciò che serve per salvare un oggetto in un file di testo, inviarlo tramite un'API (fetch), o passarlo dove serve una stringa e non un oggetto vero e proprio.

🔙 JSON.parse() — da testo a oggetto

const testoRicevuto = '{"nome":"Giulia","voto":30}'; const oggetto = JSON.parse(testoRicevuto); console.log(oggetto.nome); // → 'Giulia' console.log(typeof oggetto); // → 'object' (è tornato un vero oggetto JS)

✅ JSON.parse() è l'operazione INVERSA di stringify: prende una stringa in formato JSON (spesso ricevuta da un'API esterna) e la trasforma in un vero oggetto JavaScript su cui puoi usare la notazione punto.

🧩 Object.keys(), Object.values(), Object.entries()

const voti = { Marco: 28, Giulia: 30, Luca: 24 }; console.log(Object.keys(voti)); // → ['Marco', 'Giulia', 'Luca'] (solo le chiavi) console.log(Object.values(voti)); // → [28, 30, 24] (solo i valori) console.log(Object.entries(voti)); // → [['Marco',28], ['Giulia',30], ['Luca',24]] (coppie)

💡 Questi tre metodi restituiscono sempre array, quindi puoi applicarci subito i metodi già visti nella guida sugli Array: Object.values(voti).reduce((a,b)=>a+b,0) calcola la somma di tutti i voti in una riga.

🧪 Playground — prova Oggetti e Destructuring dal vivo

Editor JS

// il risultato apparirà qui

JavaScript — Oggetti e Destructuring

Report Quiz

🎓 Attestato di Competenze sbloccato!