Gli Oggetti in JavaScript

Tempo di lettura: 2 minuti


  • Scritto da Roberto Paolucci il 16 Dicembre 2022
  • e aggiornato il 16-09-2023
  • in Coding

JavaScript è un linguaggio di programmazione ampiamente utilizzato per lo sviluppo web. Uno dei suoi concetti fondamentali sono gli oggetti, che svolgono un ruolo cruciale nella manipolazione dei dati e nell’organizzazione del codice. In questo articolo, esploreremo gli oggetti in JavaScript in dettaglio, concentrandoci su aspetti tecnici e offrendo numerosi esempi di codice.

Cos’è un Oggetto in JavaScript?

In JavaScript, un oggetto è una struttura dati che può contenere dati e funzioni. Gli oggetti sono costituiti da una serie di coppie chiave-valore, chiamate proprietà. Le proprietà possono essere di diversi tipi, tra cui stringhe, numeri, funzioni e anche altri oggetti. Le funzioni all’interno di un oggetto sono chiamate metodi.

Ecco come si dichiara un oggetto in JavaScript:

const persona = {
    nome: "Mario",
    cognome: "Rossi",
    età: 30,
    saluta: function() {
        console.log(`Ciao, sono ${this.nome} ${this.cognome}`);
    }
}; 

In questo esempio, abbiamo creato un oggetto persona con tre proprietà (nome, cognome ed età) e un metodo saluta che stampa un messaggio di saluto utilizzando le proprietà dell’oggetto.

Accesso alle Proprietà degli Oggetti

Per accedere alle proprietà di un oggetto, è possibile utilizzare la notazione punto (.) o la notazione delle parentesi quadre ([]).

console.log(persona.nome); // "Mario"
console.log(persona['cognome']); // "Rossi"

Entrambe le notazioni producono lo stesso risultato. Tuttavia, la notazione delle parentesi quadre è particolarmente utile quando il nome della proprietà è una stringa dinamica o contiene spazi o caratteri speciali.

Modifica delle Proprietà degli Oggetti

Le proprietà di un oggetto possono essere modificate in qualsiasi momento:

persona.età = 31;
console.log(persona.età); // 31

Inoltre è possibile aggiungere nuove proprietà ad un oggetto esistente:

persona.professione = "Ingegnere";
console.log(persona.professione); // "Ingegnere"

Rimozione delle Proprietà degli Oggetti

Per rimuovere una proprietà da un oggetto, è possibile utilizzare l’operatore delete:

delete persona.età;
console.log(persona.età); // undefined

Iterare su Oggetti

Per iterare sulle proprietà di un oggetto, è possibile utilizzare un ciclo for…in:

for (const chiave in persona) {
    console.log(`${chiave}: ${persona[chiave]}`);
}

Questo ciclo attraverserà tutte le proprietà dell’oggetto persona e stamperà le chiavi e i valori corrispondenti.

Oggetti Annidati

Gli oggetti possono contenere altre strutture dati, compresi oggetti annidati. Questo consente di organizzare i dati in modo gerarchico. Ad esempio:

const auto = {
    marca: "Toyota",
    modello: "Corolla",
    proprietario: {
        nome: "Luca",
        cognome: "Verdi"
    }
};

In questo caso, l’oggetto auto ha una proprietà proprietario, che è a sua volta un oggetto con le sue proprietà.

Constructor Function

Una delle tecniche per creare oggetti in JavaScript è utilizzare le constructor function. Queste sono funzioni che vengono chiamate con l’operatore new per creare nuovi oggetti.

Ecco un esempio:

function Persona(nome, cognome) {
    this.nome = nome;
    this.cognome = cognome;
    this.saluta = function() {
        console.log(`Ciao, sono ${this.nome} ${this.cognome}`);
    };
}

const persona1 = new Persona("Anna", "Bianchi");
const persona2 = new Persona("Marco", "Neri");

persona1.saluta(); // "Ciao, sono Anna Bianchi"
persona2.saluta(); // "Ciao, sono Marco Neri"

In questo esempio, abbiamo definito una constructor function Persona che crea oggetti con proprietà nome, cognome e il metodo saluta. L’uso dell’operatore new crea un nuovo oggetto basato su questa funzione constructor.

Prototipi degli Oggetti

In JavaScript, ogni oggetto ha un prototipo che definisce le sue proprietà e metodi di base. È possibile estendere il prototipo di un oggetto per condividere funzionalità tra più oggetti. Questo è particolarmente utile per risparmiare memoria.

Ecco come aggiungere un metodo al prototipo di un oggetto:

Persona.prototype.calcolaEtà = function() {
    // Supponiamo che ci sia una data di nascita nel formato "yyyy-mm-dd"
    const dataNascita = this.dataNascita;
    const annoNascita = parseInt(dataNascita.split('-')[0]);
    const annoCorrente = new Date().getFullYear();
    return annoCorrente - annoNascita;
};

const persona3 = new Persona("Giovanni", "Verdi");
persona3.dataNascita = "1990-03-15";

console.log(persona3.calcolaEtà()); // 33

In questo esempio, abbiamo aggiunto un metodo calcolaEtà al prototipo della funzione Persona, in modo che tutte le istanze di Persona possano accedervi.

Object.assign() e Spread Operator

JavaScript fornisce anche strumenti per la copia e la fusione di oggetti. L’uso di Object.assign() e dello spread operator (…) è utile per questo scopo.

Ecco un esempio con Object.assign():

const oggetto1 = { a: 1, b: 2 };
const oggetto2 = { b: 3, c: 4 };

const risultato = Object.assign({}, oggetto1, oggetto2);

console.log(risultato); // { a: 1, b: 3, c: 4 }

In questo caso, Object.assign() ha combinato le proprietà di oggetto1 e oggetto2 in un nuovo oggetto vuoto {}.

Ecco un esempio con lo spread operator:

const oggetto1 = { a: 1, b: 2 };
const oggetto2 = { b: 3, c: 4 };

const risultato = { ...oggetto1, ...oggetto2 };

console.log(risultato); // { a: 1, b: 3, c: 4 }

Anche in questo caso, le proprietà di entrambi gli oggetti sono state combinate in un nuovo oggetto.

Conclusioni

Gli oggetti sono uno dei concetti più importanti in JavaScript, e la loro comprensione è essenziale per diventare uno sviluppatore web esperto. In questo articolo, abbiamo esaminato gli aspetti tecnici degli oggetti, compresi la loro creazione, l’accesso alle proprietà, la modifica e la rimozione delle proprietà, l’iterazione, gli oggetti annidati, le constructor function, i prototipi e gli strumenti per la copia e la fusione degli oggetti.

Con una solida comprensione degli oggetti, sarai in grado di scrivere codice JavaScript più efficace e organizzato, facilitando lo sviluppo di applicazioni web complesse. Continua a esplorare e sperimentare con gli oggetti in JavaScript per diventare un programmatore web sempre più competente.

Non faccio grandi cose ma piccole cose che sembrano funzionare bene.

Roberto Paolucci

Hai già letto questi articoli?

  • by Roberto Paolucci
  • 16 Dicembre 2022
Eliminare Prodotti da WooCommerce in SQL
Close
Coding
Tecnologia
Presentiamoci