Oggetti JavaScript. Parte 8 Corso di JavaScript da Principiante ad Avanzato in 10 post sul blog

Questo è il capitolo 8 della serie di post sul blog di JavaScript che ti porterà da principiante ad avanzato. Se non hai letto il post precedente sul blog riguardante le funzioni JavaScript, puoi controllarlo qui. Alla fine di questa serie conoscerai tutte le basi necessarie per iniziare a programmare in JavaScript. Senza ulteriori indugi, iniziamo con l’ottavo tutorial.

Oggetti JavaScript – indice:

1. Oggetti JavaScript
2. Funzioni costruttore di oggetti

Oggetti JavaScript

Gli oggetti JavaScript ricoprono un ruolo importante. Anche se è un argomento relativamente ampio, può anche essere relativamente facile sviluppare una comprensione di essi. Uno dei modi più comuni per comprendere gli oggetti è pensare a essi come se stessi ricreando un’auto nel codice. Avremo due concetti principali quando ci occupiamo di oggetti. Essi avranno proprietà e metodi. Le proprietà sono le cose che gli oggetti JavaScript hanno e i metodi sono le cose che gli oggetti possono eseguire. Vediamo questo con alcuni esempi.

// definiamo più oggetti per avere una migliore comprensione
const plane = {
    numberOfWings: 2, 
    canFly: true, 
    takeOff: function(){return "L'aereo inizia a decollare..."},
    land: function(){return "L'aereo inizia ad atterrare..."} 
    }
const car = {
    brand: "Tesla",
    isElectric: true,
    numberOfDoors: 4,
    moveForward: function(){return "L'auto si muove in avanti..."},
    smartSummon: function(){return "L'auto inizia a guidarsi da sola verso di te..."}
}

// possiamo accedere e registrare nel console le proprietà che hanno:
console.log("Le proprietà per l'aereo:");
console.log("Può volare: " + plane.canFly);
console.log("Numero totale di ali: " + plane.numberOfWings);
// possiamo anche far eseguire azioni all'aereo
console.log(plane.takeOff());
console.log(plane.land());
// se guardi più da vicino, puoi vedere che 
// non registriamo direttamente nel console le azioni all'interno dei metodi
// invece le restituiamo dalle funzioni
// e in questo caso le stiamo registrando nel console
// in questo modo se vogliamo possiamo anche dare all'utente un avviso
// che dice che l'aereo sta decollando
alert(plane.takeOff());
// possiamo anche apprendere le proprietà che ha l'auto 
// e registrarle nel console per ulteriore pratica
console.log("È un'auto elettrica? " + car.isElectric);
console.log("Qual è la marca dell'auto: " + car.brand);
console.log("Quante porte ha? " + car.numberOfDoors);
console.log(car.smartSummon());
console.log(car.moveForward());

Quando eseguiamo il codice sopra dovremmo ottenere il seguente output:

Abbiamo appena visto due esempi principali di oggetti JavaScript: uno con un aereo e uno con un’auto. Proprio come aerei e auto hanno proprietà diverse e cose diverse che possono fare, diversi oggetti che creiamo possono fare cose diverse e avere proprietà diverse. Se guardi più da vicino, puoi iniziare a vedere un modello nel modo in cui definiamo oggetti, proprietà e metodi.

Iniziamo a definire oggetti proprio come definiamo variabili o costanti, in questo caso, di solito è sufficiente utilizzare costanti quando definiamo oggetti JavaScript. Ma piuttosto che semplicemente assegnare quella costante a un valore, proprio come abbiamo fatto con le costanti normali, ora apriamo e chiudiamo un insieme di parentesi graffe e forniamo essenzialmente i dati in coppie chiave-valore. Nota che definire proprietà e metodi è abbastanza simile. La principale differenza è che quando definiamo proprietà, assegniamo i nomi a un valore che recupereremo in seguito. Tuttavia, quando definiamo un metodo, dobbiamo fornire una funzione che eseguiremo in seguito. Questa differenza si riflette anche nel modo in cui li chiamiamo in seguito. Ad esempio:

// quando recuperiamo una proprietà non usiamo parentesi alla fine
console.log("Può volare: " + plane.canFly);
// quando recuperiamo metodi, 
// li eseguiamo anche aggiungendo parentesi dopo di essi
// i metodi qui sono essenzialmente funzioni che 
// appartengono a un oggetto specifico
console.log(plane.takeOff());

È importante che aggiungiamo le parentesi dopo i metodi, proprio come abbiamo fatto con le funzioni normali. Altrimenti, avremo solo la funzione stessa piuttosto che eseguire la funzione.

// per eseguire il metodo dell'oggetto dovremmo
// aggiungere le parentesi subito dopo il nome del metodo
// altrimenti otterremo la definizione del metodo 
// come in questo esempio
alert(plane.takeOff);

Il risultato visualizzato è esattamente ciò che abbiamo definito mentre creavamo il metodo. Puoi anche vedere che stiamo definendo una funzione al volo. In questo caso stiamo definendo la funzione senza un nome, il che è possibile in JavaScript. Questo non è sempre preferibile, poiché dare un nome alla funzione rende più chiaro quando la vediamo visualizzata. In questo caso, tuttavia, non stiamo usando la funzione altrove al di fuori della definizione dell’oggetto, non dobbiamo direttamente dare un nome alla funzione. Invece, possiamo fare riferimento alla funzione dall’interno dell’oggetto con il nome del metodo che le assegniamo.

Un’altra cosa che dovresti sapere sul recupero di proprietà o metodi da un oggetto è che ci sono più di un modo per ottenerli. Abbiamo usato una delle pratiche più comuni negli esempi sopra, che è utilizzare la notazione a punto. Ma c’è anche un altro modo comunemente usato per ottenere lo stesso risultato che dovresti conoscere. Questa seconda notazione utilizza parentesi quadre e virgolette.

// entrambi sono validi e 
// ci danno gli stessi risultati
console.log(plane.numberOfWings);
console.log(plane["numberOfWings"]);
// controlla la console JavaScript per i risultati

È fantastico che possiamo memorizzare molte proprietà dettagliate e azioni che possiamo eseguire utilizzando oggetti, ma cosa succede se avessimo bisogno di utilizzare oggetti, non solo per 1 auto, ma diciamo per 20 auto, 100 auto o persino 1.000.000 di auto, ognuna con un ID unico e valori di proprietà variabili. Dovremmo digitare tutto quel codice da zero per ogni auto? La risposta è no. Invece, possiamo sfruttare qualcosa chiamato funzione costruttore di oggetti.

Funzioni costruttore di oggetti

I costruttori di oggetti possono accelerare notevolmente il tuo processo di codifica e possono rendere il tuo codice significativamente più DRY. Con le funzioni costruttore di oggetti definiamo essenzialmente un modello per l’oggetto. Una volta che abbiamo un modello per l’oggetto, possiamo creare quante più istanze di quell’oggetto in modo molto più chiaro, con molta meno ripetizione. Vediamo questo con alcuni esempi.

// questo è come definiamo un modello per gli oggetti
function Car(id, color, isElectric, numberOfDoors){
    this.id = id;
    this.color = color;
    this.isElectric = isElectric;
    this.numberOfDoors = numberOfDoors;
}
// questo è come possiamo istanziare gli 
// oggetti JavaScript che vogliamo creare dal 
// modello che abbiamo definito sopra
// in questo caso creiamo 3 oggetti auto 
// con valori diversi per le proprietà
const car1 = new Car(1, "bianco", true, 4);
const car2 = new Car(2, "nero", true, 2);
const car3 = new Car(3, "rosso", false, 4);
// possiamo accedere alle proprietà dell'oggetto proprio come abbiamo fatto prima
console.log("Il colore della prima auto è: " + car1.color);
console.log("Il colore della seconda auto è: " + car2.color);
console.log("Il colore della terza auto è: " + car3.color);

Eseguire il codice sopra ci darebbe il seguente output:

Come puoi vedere dal codice sopra, una volta che abbiamo un modello, possiamo semplicemente passare valori diversi per creare oggetti JavaScript diversi dal modello iniziale. Una cosa che probabilmente hai notato è che la convenzione di denominazione per i costruttori di oggetti è avere la prima lettera maiuscola. In questo caso, piuttosto che definirlo come “car”, lo abbiamo chiamato “Car”. Se dovessimo creare una classe aereo, la chiameremmo “Plane”.

Quando vogliamo creare oggetti dal nostro modello definito, usiamo la parola chiave “new” e poi scriviamo il nome della funzione costruttore dell’oggetto che vogliamo utilizzare. Dopo il nome, apriamo e chiudiamo un insieme di parentesi e passiamo gli argomenti con cui vogliamo creare il nostro oggetto. Nota che non ripetiamo i nomi dei parametri, passiamo solo i valori nello stesso ordine dei parametri. Potresti anche notare che quando creiamo il modello stiamo usando una parola chiave chiamata “this”. Per ora, ciò che dovresti sapere è che la parola chiave “this” consente di fare riferimento all’oggetto stesso, ed è parte del codice boilerplate che dovremmo scrivere quando creiamo il modello per l’oggetto.

Quando stai imparando a programmare, potresti sentire il termine “codice boilerplate”, questo è in realtà abbastanza comune, specialmente nello sviluppo web. Significa fondamentalmente che ci sono parti di codice che scriviamo per avere certe configurazioni in atto. Anche se non c’è una soluzione unica che forniamo con il codice, dobbiamo comunque scrivere quelle parti per avere un codice funzionante. A seconda del codice boilerplate, alcuni IDE forniscono anche scorciatoie per fornire quei codici boilerplate.

Gli oggetti JavaScript di cui abbiamo appena parlato sono un argomento ampio e hanno molti dettagli man mano che ci addentriamo. Ma a un livello fondamentale, dovresti sapere che possiamo imitare oggetti della vita reale con il codice utilizzando oggetti. Questi oggetti JavaScript possono avere diverse proprietà e metodi a cui possiamo accedere ed eseguire.

Nel prossimo tutorial scopriremo ulteriori argomenti e concetti che sono piuttosto importanti e comunemente usati in JavaScript.