Frontend

Gli oggetti in JavaScript

Autore

Manuel Ricci

Gli oggetti in JavaScript sono strutture fondamentali che permettono di raggruppare proprietà e funzioni (metodi) in un'unica entità. Sono simili a degli "scatoloni" che racchiudono vari elementi, con la peculiarità che ogni elemento ha un nome (chiave) e un valore associato. Gli oggetti sono utilizzati per modellare entità complesse e sono la pietra angolare della programmazione orientata agli oggetti in JavaScript.

Creazione di Oggetti

Ci sono diversi modi per creare oggetti in JavaScript:

  1. Notazione Letterale: È il metodo più diretto e si usa scrivendo le proprietà e i metodi all'interno di parentesi graffe. Ad esempio: javascript let libro = { titolo: "Il Signore degli Anelli", autore: "J.R.R. Tolkien", pagine: 1178 };
  2. Costruttore Object: Si utilizza il costruttore Object per creare un oggetto vuoto e poi aggiungere proprietà e metodi. Per esempio: javascript let persona = new Object(); persona.nome = "Mario"; persona.eta = 30;
  3. Funzioni Costruttrici: Le funzioni costruttrici permettono di definire un "modello" per gli oggetti e di crearne di nuovi. Ad esempio: javascript function Auto(marca, modello, anno) { this.marca = marca; this.modello = modello; this.anno = anno; } let miaAuto = new Auto("Ford", "Mustang", 1969);

Proprietà e Metodi degli Oggetti

Le proprietà sono valori associati a un oggetto, mentre i metodi sono funzioni associate a un oggetto. Aggiungere, accedere, modificare ed eliminare proprietà è semplice. Ad esempio:

1let studente = {};
2studente.nome = "Luca"; // Aggiunta
3console.log(studente.nome); // Accesso
4studente.nome = "Marco"; // Modifica
5delete studente.nome; // Eliminazione

I metodi sono definiti come funzioni all'interno dell'oggetto. Ad esempio:

1let calcolatrice = {
2  somma: function(a, b) {
3    return a + b;
4  }
5};
6console.log(calcolatrice.somma(5, 7)); // 12

Oggetti Incorporati in JavaScript

JavaScript include diversi oggetti incorporati che facilitano la programmazione. Alcuni di questi sono:

  • Date: per gestire date e orari.
  • Math: per operazioni matematiche come calcolo di seno, coseno, massimo, minimo, etc.
  • String: per manipolare stringhe di testo.

Questi oggetti forniscono metodi utili per eseguire compiti comuni.

Ereditarietà e Prototipi in JavaScript

L'ereditarietà in JavaScript è un concetto fondamentale che permette agli oggetti di "ereditare" proprietà e metodi da altri oggetti. Questo meccanismo è realizzato attraverso i prototipi.

Ogni oggetto in JavaScript ha una proprietà interna chiamata prototype. Questo prototipo è anch'esso un oggetto e può avere il proprio prototipo, creando così una "catena prototipica". Quando si tenta di accedere a una proprietà o un metodo di un oggetto, JavaScript cerca prima nell'oggetto stesso, e se non lo trova, prosegue nella catena prototipica fino a trovare la proprietà richiesta o fino a raggiungere la fine della catena.

Esempio di Ereditarietà e Prototipi

Consideriamo il seguente esempio:

1function Persona(nome) {
2  this.nome = nome;
3}
4
5Persona.prototype.saluta = function() {
6  console.log("Ciao, il mio nome è " + this.nome);
7};
8
9let persona1 = new Persona("Luca");
10persona1.saluta(); // Output: "Ciao, il mio nome è Luca"

In questo esempio:

  1. Abbiamo una funzione costruttrice Persona che inizializza la proprietà nome.
  2. Aggiungiamo un metodo saluta al prototipo di Persona. Questo metodo sarà condiviso da tutti gli oggetti creati usando Persona.
  3. Creiamo un nuovo oggetto persona1 usando il costruttore Persona.
  4. Quando chiamiamo persona1.saluta(), JavaScript cerca prima il metodo saluta nell'oggetto persona1. Non trovandolo, cerca nel prototipo di persona1, dove viene trovato e eseguito.

Estendere un Prototipo Esistente

JavaScript permette anche di estendere i prototipi degli oggetti incorporati. Ad esempio, possiamo aggiungere un nuovo metodo a tutti gli array in JavaScript:

1Array.prototype.logPrimoElemento = function() {
2  if (this.length > 0) {
3    console.log(this[0]);
4  } else {
5    console.log("Array vuoto");
6  }
7};
8
9let mieiNumeri = [1, 2, 3];
10mieiNumeri.logPrimoElemento(); // Output: 1

In questo caso, ogni array in JavaScript avrà il metodo logPrimoElemento che possiamo utilizzare per loggare il primo elemento dell'array.

Considerazioni sull'Uso dei Prototipi

Mentre l'estensione dei prototipi può essere potente, deve essere usata con cautela. Modificare il prototipo di oggetti incorporati può portare a conflitti con librerie di terze parti, future versioni di JavaScript, o altre parti del codice che si aspettano un comportamento standard degli oggetti incorporati.

L'ereditarietà e i prototipi sono concetti chiave che rendono JavaScript un linguaggio flessibile e potente. Capire come funzionano è fondamentale per sfruttare appieno le capacità del linguaggio.

Gestione Avanzata degli Oggetti in JavaScript

La gestione avanzata degli oggetti in JavaScript include una varietà di tecniche e metodi che permettono di manipolare e interagire con gli oggetti in modi più sofisticati. Alcuni di questi metodi includono:

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

Questi metodi sono utili per iterare sulle proprietà degli oggetti.

  • Object.keys(obj): Restituisce un array contenente le chiavi (i nomi delle proprietà) di un oggetto.
  • Object.values(obj): Restituisce un array contenente i valori delle proprietà di un oggetto.
  • Object.entries(obj): Restituisce un array di coppie [chiave, valore] per ogni proprietà enumerabile dell'oggetto.

Esempio:

1let studente = {
2  nome: "Giulia",
3  età: 22,
4  corso: "Ingegneria"
5};
6
7console.log(Object.keys(studente)); // ["nome", "età", "corso"]
8console.log(Object.values(studente)); // ["Giulia", 22, "Ingegneria"]
9console.log(Object.entries(studente)); // [["nome", "Giulia"], ["età", 22], ["corso", "Ingegneria"]]

Clonazione di Oggetti

La clonazione di un oggetto è un'operazione comune in JavaScript. Uno dei modi per clonare un oggetto è utilizzare l'operatore di spread ....

Esempio di Clonazione:

1let oggettoOriginale = { nome: "Mario", età: 30 };
2let oggettoClonato = { ...oggettoOriginale };
3
4oggettoClonato.nome = "Luigi"; // Modifica solo l'oggetto clonato
5
6console.log(oggettoOriginale); // { nome: "Mario", età: 30 }
7console.log(oggettoClonato); // { nome: "Luigi", età: 30 }

Fusione di Oggetti

La fusione di oggetti consiste nel combinare due o più oggetti in un unico oggetto. Anche in questo caso, l'operatore di spread può essere utilizzato.

Esempio di Fusione:

1let oggetto1 = { nome: "Mario" };
2let oggetto2 = { cognome: "Rossi" };
3let oggettoFuso = { ...oggetto1, ...oggetto2 };
4
5console.log(oggettoFuso); // { nome: "Mario", cognome: "Rossi" }

Controllo delle Proprietà con Descriptor

JavaScript permette di definire o modificare le proprietà degli oggetti attraverso i descriptor. Questi sono oggetti che descrivono il comportamento delle proprietà, come la loro enumerabilità, configurabilità, e se sono leggibili o scrivibili.

Esempio di Descriptor:

1let persona = {};
2Object.defineProperty(persona, "nome", {
3  value: "Giulia",
4  writable: false, // Non modificabile
5  enumerable: true, // Visibile in iterazioni
6  configurable: false // Non configurabile
7});
8
9persona.nome = "Marco"; // Non ha effetto a causa di writable: false
10console.log(persona.nome); // "Giulia"

Caricamento...

Diventiamo amici di penna? ✒️

Iscriviti alla newsletter per ricevere una mail ogni paio di settimane con le ultime novità, gli ultimi approfondimenti e gli ultimi corsi gratuiti puubblicati. Ogni tanto potrei scrivere qualcosa di commerciale, ma solo se mi autorizzi, altrimenti non ti disturberò oltre.

Se non ti piace la newsletter ti ricordo la community su Discord, dove puoi chiedere aiuto, fare domande e condividere le tue esperienze (ma soprattutto scambiare due meme con me). Ti aspetto!

Ho in previsione di mandarti una newsletter ogni due settimane e una commerciale quando capita.