Esercizi sugli oggetti in JavaScript

Realizziamo alcuni esercizi sugli oggetti in JavaScript utilizzando gli oggetti letterali. L’utilizzo di questo metodo è il modo più semplice ed utilizzato per creare e manipolare oggetti in JavaScript.

In particolare in questa lezione studieremo come creare oggetti nidificati.

Esercizi con gli oggetti in JavaScript – esercizio 1

Progettare l’oggetto canzoni che contiene delle proprietà: canzone1, canzone2, ecc… Queste proprietà a sua volta sono degli oggetti che hanno altre proprietà: titolo, nomeCantante e anno. Inserire poi alcuni dati a piacere e visualizzarli. Dopo fare inserire all’utente delle nuove canzoni attraverso il prompt dei comandi. Visualizzare il nuovo oggetto così costruito.

Come prima cosa memorizziamo in una variabile il riferimento all’oggetto canzoni. All’interno specifichiamo le due proprietà canzone1 e canzone 2 che a loro volta sono degli oggetti con il titolo, il nome del cantante e l’anno di produzione.

Dopo creiamo un’altra struttura analoga alla precedente, ma facciamo inserire i dati all’utente.

Infine utilizziamo object.assign per aggiungere questi dati all’oggetto creato in precedenza.

Ecco dunque il codice completo:

var canzoni = {
  canzone1 : {
    titolo: 'Stairway to Heaven',
    nomeCantante: 'Led Zeppelin',
    anno: '1971'
  },
  canzone2 : {
    titolo: 'Wish you were here',
    nomeCantante: 'Pink Floyd',
    anno: '1975'
  }
}
console.log(canzoni);

var canzoneAggiunta = {
  canzone3 : {
    titolo : prompt('Inserisci il titolo'),
    nomeCantante: prompt('Inserisci il titolo'),
    anno: prompt('Inserisci l\'anno'),
  }
}

Object.assign(canzoni,canzoneAggiunta);
console.log(canzoni);

Se invece volessimo stampare solo l’ultimo oggetto inserito, potrei scrivere:

console.log(canzoni.canzone3);

Esercizi con gli oggetti in JavaScript – esercizio 2

Progettare un oggetto rubrica che ha come proprietà gli utenti. Dopo, per ogni utente, specificare altre proprietà: utente, nome, cognome, telefono e indirizzo. Dove indirizzo è a sua volta un altro oggetto contenente altre proprietà.
Quindi popolare la rubrica con dei dati a piacere. Dopo eliminare un elemento e visualizzare nuovamente la rubrica così ottenuta.

Ecco dunque un altro esempio che utilizza gli oggetti nidificati in JavaScript.

var rubrica = {
  utente1: {
    nome: 'Coding',
    cognome: 'Creativo',
    telefono: '333',
    indirizzo: {
      via: 'delle rose',
      citta: 'Modica',
    }
  },
  utente2: {
    nome: 'Creativo',
    cognome: 'Coding',
    telefono: '124',
    indirizzo: {
      via: 'delle rose',
      citta: 'Modica',
    }
  }
}

console.log(rubrica);
delete rubrica.utente2;
console.log(rubrica);

In questa lezione abbiamo visto come utilizzare gli oggetti nidificati in JavaScript attraverso dei semplici esercizi dimostrativi. Nella prossima lezione studieremo gli array di oggetti.

Lezione precedente: class JavaScript

Lezione successiva: array di oggetti in JavaScript