Corso completo Web Developer - Parte 2 - 2.2
Introduzione
Nel primo articolo della serie abbiamo visto le basi di JavaScript, in questo articolo andremo a scoprire altre parti di JavaScript che sono fondamentali per poter scrivere applicazioni in JavaScript. Man mano che andiamo avanti e tu inizi a conoscere sempre di più tutto inizierà ad avere sempre più senso e ti verrà sempre più naturale scrivere e comprendere codice in JavaScript.
Bando alle ciance, iniziamo! 🤓
Controlli di flusso
Siamo abituati a definire i computer come macchine stupide ma perchè? Lascia che te lo spieghi. I computer che utilizziamo tutti i giorni sono macchine che eseguono istruzioni che gli diamo noi, ma non sono in grado di prendere decisioni da soli. Esistono infatti computer più o meno intelligenti e questa variante del quoziente intellettivo dipende da principalmente due fattori:
- quante cose diverse sono capaci di fare
- quanti diversi scenari riescono a gestire
Per prima cosa voglio chiarire il concetto che sto dando al computer. Pensiamo ad un computer come una macchina elettronica che esegue istruzioni. Prendiamo in esame due tipi di computer: una calcolatrice ed uno smartphone. Entrambi sono computer, ma hanno un quoziente intellettivo diverso. Perchè? Una calcolatrice è in grado di fare una sola cosa ovvero calcolare mentre uno smartphone oltre a saper calcolare sa fare anche molte altre cose. Questo è il primo fattore che determina il quoziente intellettivo di un computer. Il secondo si riferisce a quanti diversi scenari un computer riesce a gestire. Ad esempio, se dovesse succedere "X" allora fai "Y", se invece succedesse "Z" allora fai "W". Più scenari un computer è capace di gestire senza andare in TILT più questo sarà intelligente.
Abbiamo detto che i computer non sono nient'altro che macchine che eseguono le istruzioni che gli sono state date da un programmatore. Quando programmiamo un computer, un software, un sito web o qualsiasi cosa che contiene codice dovremmo pensare ad i vari possibili scenari che possono verificarsi e dire al computer di reagire in un determinato modo se quel determinato scenario si dovesse verificare. Per fare ciò utilizziamo le cosiddette strutture condizionali e controlli di flusso.
Andiamo a vedere la struttura condizionale if.
IF/ELSE Statements
if (condizione) {
// codice da eseguire se la condizione è vera
}
Notiamo che abbiamo una parola chiave if seguita dalle parentesi tonde. Dentro le parentesi abbiamo una condizione. La condizione può essere qualsiasi cosa che restituisca un valore booleano ovvero true o false. Ad esempio:
if (1 === 1) {
// codice da eseguire se la condizione è vera
}
In questo caso la condizione è 1 === 1 che è un'espressione che restituisce true e quindi il codice all'interno delle parentesi graffe verrà eseguito.
if (1 === 2) {
// codice da eseguire se la condizione è vera
}
In quest'altro esempio la condizione è 1 === 2 che è un'espressione che restituisce false e quindi il codice all'interno delle parentesi graffe non verrà eseguito.
if (1 === 1) {
// codice da eseguire se la condizione è vera
} else {
// codice da eseguire se la condizione è falsa
}
Adesso abbiamo aggiunto un'altra parola chiave else che viene eseguita se la condizione è falsa. Ad esempio:
if (1 === 2) {
// codice da eseguire se la condizione è vera
} else {
// codice da eseguire se la condizione è falsa
}
Essendo che la condizione 1 === 2 è false il codice all'interno delle parentesi graffe non verrà eseguito e verrà eseguito il codice all'interno delle parentesi graffe dopo la parola chiave else.
if (1 === 2) {
// codice da eseguire se la condizione è vera
} else if (1 === 1) {
// codice da eseguire se la condizione è vera
} else {
// codice da eseguire se la condizione è falsa
}
In questo caso abbiamo aggiunto un'altra parola chiave else if che viene eseguita se la condizione è falsa e se la condizione dopo la parola chiave else if è vera.
I Cicli (Loops)
I cicli sono un altro tipo di controllo di flusso che ci permette di eseguire un blocco di codice più volte. Questi blocchi di codice vengono eseguiti ripetutamente fino a quando la condizione del ciclo non è più vera.
Quindi avremo bisogno di usare un loop o un ciclo ogni qual volta stiamo scrivendo un pezzo di logica che deve eseguire una specifica azione più volte.
Esistono due tipi di cicli: for e while. Andiamo a vederli entrambi.
while Loops
Il termine while significa mentre in inglese mentre il termine loop significa ciclo. Quindi un while loop è un ciclo che viene eseguito mentre la condizione rimane vera.
while (condizione) {
// codice da eseguire
}
Scritta cosà ti sembra quasi la stessa cosa di un if statement che abbiamo visto prima, vero? E' proprio così. Il while loop è un if statement che viene eseguito più volte. Si ripete fino a quando la condizione non è più vera.
Vediamo un esempio pratico:
let i = 0;
while (i < 10) {
console.log(i);
i++;
}
Quando si lavora con i loops bisogna notare una cosa molto importante: i loops per la loro natura sono un modo per eseguire ripetutamente un'azione fino a quando la condizione che gli è stata data rimane vera. Dovrà essere preoccupazione del programmatore di fare in modo che quella condizione possa diventare falsa in un determinato momento altrimenti si rischia di creare un loop infinito. Un loop infinito è un appunto un loop che continuerà all'infinito e non permetterà al programma di proseguire con nessun'altra azione fino al momento in cui il programma stesso verrà interrotto.
Per questo motivo puoi notare che all'interno del while loop abbiamo una variabile i che viene incrementata di uno ad ogni iterazione del loop con i++. Questo ci permette di incrementare il valore di i fino a quando non raggiunge il valore di 10 e quindi la condizione i < 10 diventa falsa e il loop termina.
for Loops
Il for loop è un altro tipo di loop che viene utilizzato per eseguire un blocco di codice più volte. Il for loop è molto simile al while loop ma è più semplice da scrivere e comprendere.
for (inizializzazione; condizione; espressione) {
// codice da eseguire
}
Ci sono tre parti principali di un for loop: l'inizializzazione, la condizione e l'espressione.
- l'inizializzazione viene eseguita una sola volta all'inizio del loop
- la condizione viene eseguita prima di ogni iterazione del loop e se la condizione è falsa il loop termina
- l'espressione viene eseguita alla fine di ogni iterazione del loop
Vediamo un esempio pratico:
for (let i = 0; i < 10; i++) {
console.log(i);
}
In questo esempio abbiamo una variabile i che viene inizializzata con il valore 0. La condizione è i < 10 che significa che il loop continuerà fino a quando i sarà minore di 10. L'espressione è i++ che significa che i viene incrementato di uno ad ogni iterazione del loop.
Come puoi vedere i due loops sono molto simili ed eseguono lo stesso tipo di operazioni.
Strutturare i dati
Quando si lavora con i dati è importante sapere come strutturare i dati in modo da poterli gestire in modo facile ed efficiente. In questa sezione cerchiamo di capire alcune basi.
Innanzitutto chiariamo il perchè è importante saper strutturare i dati correttamente e per fare ciò ti faccio un esempio pratico.
Dov'è più facile trovare un oggetto, in una borsa perfettamente organizzata o in una borsa piena di oggetti che non sono organizzati in alcun modo? Ovviamente la risposta è in una borsa perfettamente organizzata.
Funziona allo stesso modo quando si lavora con i dati. Se i dati sono organizzati in modo corretto è molto più facile trovare quello che stiamo cercando e lavorare con questi.
Array
Facciamo un esempio per capire a cosa ci potrebbe servire un array per strutturare dei dati. Supponiamo di avere una lista di nomi di persone:
let nome1 = 'Mario';
let nome2 = 'Luigi';
let nome3 = 'Elisa';
let nome4 = 'Gianluca';
let nome5 = 'Sara';
Se volessimo loggare nella console tutti i nomi di queste persone potremmo fare così:
console.log(nome1);
console.log(nome2);
ecc...
Come puoi vedere abbiamo dovuto creare cinque variabili per memorizzare i nomi di cinque persone e dobbiamo loggare un nome per volta. Pensa se avessimo avuto cento persone invece di cinque, avremmo dovuto creare cento variabili il che ci rende altamente inefficienti. Le array ci vengono in aiuto proprio in questo caso.
Un array è una struttura dati che ci permette di memorizzare più dati in una sola variabile. È una lista di dati ordinati in modo sequenziale.
let nomi = ['Mario', 'Luigi', 'Elisa', 'Gianluca', 'Sara'];
Come puoi vedere abbiamo creato un array che contiene i nomi di cinque persone. Ogni elemento all'interno di un array è separato da una virgola e racchiuso tra parentesi quadre.
Come facciamo a loggare nella console questi nomi? Abbiamo visto che per loggare un singolo nome abbiamo dovuto fare così:
console.log(nome1);
Per loggare tutti i nomi di un array possiamo fare così:
console.log(nomi);
Come puoi vedere non abbiamo dovuto fare niente di particolare per loggare tutti i nomi di un array. Possiamo anche loggare un singolo nome di un array specificando la posizione dell'elemento all'interno dell'array. Per fare ciò dobbiamo utilizzare la sintassi array[posizione] dove posizione è la posizione dell'elemento all'interno dell'array. Ricorda che le posizioni in un array partono da 0 quindi il primo elemento di un array avrà la posizione 0.
console.log(nomi[0]); // Mario
console.log(nomi[1]); // Luigi
console.log(nomi[2]); // Elisa
console.log(nomi[3]); // Gianluca
console.log(nomi[4]); // Sara
Il termine esatto per indicare per indicare la posizione di un elemento all'interno di un array è indice o index in inglese. Quando si lavora con gli array è molto importante sapere che la prima posizione di un array è sempre 0 e non 1.
All'interno di un array è possibile memorizzare tante tipologie di dati e possiamo anche avere un array di array. Vediamo un esempio pratico:
let nomi = ['Mario', 'Luigi', 'Elisa', 'Gianluca', 'Sara'];
let numeri = [1, 2, 3, 4, 5];
let misto = ['Mario', 1, 'Luigi', 2, 'Elisa', 3, 'Gianluca', 4, 'Sara', 5];
let arrayDiArray = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
Come puoi vedere possiamo avere un array che contiene stringhe, un array che contiene numeri, un array che contiene sia stringhe che numeri e un array che contiene altri array.
Manipolazione di Array
Per manipolazione s'intende che cosa possiamo fare con un array una volta che l'abbiamo creata. Possiamo aggiungere o rimuovere elementi da un array, possiamonche invertire l'ordine degli elementi di un array, possiamo controllare la lunghezza di un array e molto altro.
Aggiungere elementi ad un array
Per aggiungere un elemento ad un array possiamo utilizzare la funzione push() che aggiunge un elemento alla fine dell'array.
let nomi = ['Mario', 'Luigi', 'Elisa', 'Gianluca', 'Sara'];
nomi.push('Giovanni');
console.log(nomi); // ['Mario', 'Luigi', 'Elisa', 'Gianluca', 'Sara', 'Giovanni']
Possiamo anche aggiungere più elementi ad un array utilizzando la funzione push().
let nomi = ['Mario', 'Luigi', 'Elisa', 'Gianluca', 'Sara'];
nomi.push('Giovanni', 'Giuseppe', 'Giorgio');
console.log(nomi); // ['Mario', 'Luigi', 'Elisa', 'Gianluca', 'Sara', 'Giovanni', 'Giuseppe', 'Giorgio']
Rimuovere elementi da un array
Per rimuovere un elemento da un array possiamo utilizzare la funzione pop() che rimuove l'ultimo elemento di un array.
let nomi = ['Mario', 'Luigi', 'Elisa', 'Gianluca', 'Sara'];
nomi.pop();
console.log(nomi); // ['Mario', 'Luigi', 'Elisa', 'Gianluca']
Come push() anche pop() può rimuovere più elementi allo stesso tempo.
Invertire l'ordine degli elementi di un array
Per invertire l'ordine degli elementi di un array possiamo utilizzare la funzione reverse().
let nomi = ['Mario', 'Luigi', 'Elisa', 'Gianluca', 'Sara'];
nomi.reverse();
console.log(nomi); // ['Sara', 'Gianluca', 'Elisa', 'Luigi', 'Mario']
Controllare la lunghezza di un array
Per controllare la lunghezza di un array possiamo utilizzare la funzione length.
let nomi = ['Mario', 'Luigi', 'Elisa', 'Gianluca', 'Sara'];
console.log(nomi.length); // 5
Controllare se un elemento è presente in un array
Per controllare se un elemento è presente in un array possiamo utilizzare la funzione includes().
let nomi = ['Mario', 'Luigi', 'Elisa', 'Gianluca', 'Sara'];
console.log(nomi.includes('Mario')); // true
Fare un loop su un array
Se volessimo eseguire una stessa operazione su ogni elemento all'interno di un array il modo più semplice e corretto è utilizzare un loop.
Per fare un loop su un array possiamo utilizzare la funzione forEach().
let nomi = ['Mario', 'Luigi', 'Elisa', 'Gianluca', 'Sara'];
nomi.forEach(function(nome) {
console.log(nome);
});
Questo è cio che ho scritto nel mio file script.js:
Questo è l'output nella console del Browser:
Queste basi sono più che sufficienti per iniziare a lavorare con le array. Per approfondire puoi leggere la documentazione MZN.
Oggetti
Come abbiamo visto, le array sono una collezione di dati ai quali possiamo accederci attraverso l'indice. Gli oggetti sono molto simili alle array ma invece di avere un indice per accedere ai dati hanno delle chiavi. Vediamo un esempio pratico:
let persona = {
nome: 'Mario',
cognome: 'Rossi',
eta: 25,
indirizzo: {
via: 'Via Roma',
numero: 10,
citta: 'Roma',
cap: 00100
}
};
In questo caso abbiamo creato un oggetto che rappresenta una persona. Lo abbiamo fatto utilizzando le parentesi graffe {} e all'interno di queste abbiamo definito delle chiavi e dei valori. Le chiavi sono le parole che abbiamo scritto prima dei due punti : e i valori sono le cose che abbiamo scritto dopo i due punti :. Possiamo accedere ai valori di un oggetto utilizzando la sintassi oggetto.chiave.
let persona = {
nome: 'Mario',
cognome: 'Rossi',
eta: 25,
indirizzo: {
via: 'Via Roma',
numero: 10,
citta: 'Roma',
cap: 00100
}
};
console.log(persona.nome); // Mario
console.log(persona.cognome); // Rossi
console.log(persona.eta); // 25
console.log(persona.indirizzo); // {via: 'Via Roma', numero: 10, citta: 'Roma', cap: 00100}
console.log(persona.indirizzo.via); // Via Roma
console.log(persona.indirizzo.numero); // 10
console.log(persona.indirizzo.citta); // Roma
console.log(persona.indirizzo.cap); // 00100
Come avrai notato, possiamo accedere ai valori di un oggetto anche attraverso delle chiavi annidate. In questo caso abbiamo utilizzato la sintassi oggetto.chiave1.chiave2.
Quest'accoppiamento di chiavi e valori è molto simile a quello che abbiamo visto con le array. In questo caso però le chiavi sono delle stringhe e non degli indici numerici.
L'accoppiamento di chiavi e valori in Inglese lo troverai spesso chiamato come key-value pair, ovvero coppia di chiave-valore.
Ti ho appena mostrato come accedere ai valori di un oggetto con la sintassi oggetto.chiave. Possiamo anche accedere ai valori di un oggetto utilizzando la sintassi oggetto['chiave'].
let persona = {
nome: 'Mario',
cognome: 'Rossi',
eta: 25,
indirizzo: {
via: 'Via Roma',
numero: 10,
citta: 'Roma',
cap: 00100
}
};
console.log(persona['nome']); // Mario
console.log(persona['cognome']); // Rossi
console.log(persona['indirizzo']['via']); // Via Roma
Come possiamo rimuovere una chiave da un oggetto? Possiamo utilizzare la funzione delete.
let persona = {
nome: 'Mario',
cognome: 'Rossi',
eta: 25,
indirizzo: {
via: 'Via Roma',
numero: 10,
citta: 'Roma',
cap: 00100
}
};
delete persona.eta;
console.log(persona); // {nome: 'Mario', cognome: 'Rossi', indirizzo: {via: 'Via Roma', numero: 10, citta: 'Roma', cap: 00100}}
Possiamo anche aggiungere una chiave ad un oggetto.
let persona = {
nome: 'Mario',
cognome: 'Rossi',
eta: 25,
indirizzo: {
via: 'Via Roma',
numero: 10,
citta: 'Roma',
cap: 00100
}
};
persona.professione = 'Programmatore';
console.log(persona); // {nome: 'Mario', cognome: 'Rossi', eta: 25, indirizzo: {via: 'Via Roma', numero: 10, citta: 'Roma', cap: 00100}, professione: 'Programmatore'}
Quando abbiamo lavorato con le array abbiamo visto che possiamo memorizzare un valore come per esempio un nome di persona all'interno dell'array. Possiamo memorizzare anche un oggetto all'interno di un array esattamente allo stesso modo.
let persone = [
{
nome: 'Mario',
cognome: 'Rossi',
eta: 25,
indirizzo: {
via: 'Via Roma',
numero: 10,
citta: 'Roma',
cap: 00100
}
},
{
nome: 'Luigi',
cognome: 'Verdi',
eta: 30,
indirizzo: {
via: 'Via Milano',
numero: 20,
citta: 'Milano',
cap: 00200
}
}
];
In questo caso abbiamo un array di due persone. Come facciamo ad accedere al nome della prima e/o della persona? Possiamo utilizzare la sintassi array[indice].chiave.
let persone = [
{
nome: 'Mario',
cognome: 'Rossi',
eta: 25,
indirizzo: {
via: 'Via Roma',
numero: 10,
citta: 'Roma',
cap: 00100
}
},
{
nome: 'Luigi',
cognome: 'Verdi',
eta: 30,
indirizzo: {
via: 'Via Milano',
numero: 20,
citta: 'Milano',
cap: 00200
}
}
];
console.log(persone[0].nome); // Mario
console.log(persone[1].nome); // Luigi
Quindi utilizziamo la variabile persone, dopodichè utilizziamo l'indice dell'array ed a questo punto ci troviamo di fronte ad un oggetto. Possiamo quindi utilizzare la sintassi oggetto.chiave per accedere ai suoi valori.
L'ultima cosa che voglio mostrarti riguarda i loop sugli oggetti. Possiamo utilizzare il loop for...in per iterare su un oggetto.
let persona = {
nome: 'Mario',
cognome: 'Rossi',
eta: 25,
indirizzo: {
via: 'Via Roma',
numero: 10,
citta: 'Roma',
cap: 00100
}
};
for (property in persona) {
console.log(persona.property); // nome, cognome, eta, indirizzo
}
Le Funzioni
Cerchiamo di capire che cosa sono le funzioni in JavaScript con una breve introduzione.
Le funzioni sono dei blocchi di codice che possono essere eseguiti più volte. Possiamo pensare alle funzioni come dei macchinari che possono essere utilizzati per eseguire un compito specifico.
Abbiamo già visto che possiamo utilizzare le funzioni per eseguire un compito specifico utilizzando la funzione console.log per stampare un messaggio sul terminale.
Infatti, ogni linguaggio di programmazione ha delle funzioni predefinite che vengono chiamate built-in function. Queste sono funzioni che vengono fornite dal linguaggio stesso e che sono state programmate da qualche programmatore che ha programmato il linguaggio che stiamo utilizzando e che sono quindi adesso disponibili all'uso per noi.
Abbiamo detto quindi che lo scopo delle funzioni sono di poter ripetere facilmente un blocco di codice che esegue un compito specifico. Quindi noi possiamo aggiungere le nostre funzioni, chiamate anche user-defined function, per eseguire un compito specifico.
Possiamo definire una funzione in JavaScript utilizzando la keyword function. Vediamo come definire una funziona che aggiunge due numeri.
const addizione = function(a, b) {
return a + b;
}
Stiamo creando una variabile addizione ed al suo interno utilizziamo la sintassi function con delle parentesi che contengono due parametri, a e b. Dopodichè proseguiamo con due parentesi graffe che contengono al loro interno il blocco di codice che questa funzione esegue. Un'ultima cosa da notare è la keyword return che specifica al computer che dovrà restituire come output il risultato dell'operazione a + b.
In questo caso abbiamo visto come la funzione contiene due argomenti ma è importante sottolineare che una funzione può contenere anche zero argomenti o anche più di due argomenti.
Ora che abbiamo definito una funzione per poterla utilizzare dobbiamo chiamarla. Possiamo chiamare una funzione utilizzando il suo nome seguito da parentesi che contengono gli argomenti che la funzione richiede. Per poter chiaramente vedere il risultato andremo anche a fare il console log del risultato.
const addizione = function(a, b) {
return a + b;
}
let risultato = addizione(1, 2)
console.log(risultato); // 3
Un altro tipo di sintassi che possiamo incontrare per definire una funzione è il seguente.
function addizione(a, b) {
return a + b;
}
Entrambe le funzioni performano un addizione ed entrambe possono essere chiamate allo stesso modo utilizzando la sintassi addizione(1, 2).
Approfondimento sugli Oggetti e le Funzioni
Nella sezione precedente abbiamo visto come definire un oggetto in JavaScript che rappresenti una persona. Abbiamo anche fatto degli esempi con più persone dove abbiamo dovuto definire lo stesso oggetto più volte. Immagina se stiamo sviluppando un'applicazione per il Comune in cui viviamo e dovrmemo gestire migliaia di persone. Come puoi ben immaginare non puoi definire lo stesso oggetto migliaia di volte altrimenti diventerebbe un codice moooolto lungo e difficile da gestire.
In questo caso ci viene ci vengono in soccorso le funzioni in combinazioni con gli oggetti. Perchè non definire una funzione il cui scopo è quello di definire un'oggetto Persona e che noi possiamo chiamare ogni qualvolta abbiamo bisogno di creare una nuova persona?
Vediamo come fare
const crearePersona = function(nome, cognome, eta) {
persona = {
nome: nome,
cognome: cognome,
eta: eta
}
return persona;
}
let persona1 = crearePersona('Mario', 'Rossi', 25);
let persona2 = crearePersona('Luigi', 'Verdi', 30);
console.log("Persone:", persona1.nome, persona2.nome)
In questo caso abbiamo definito una funzione che prende come input tre argomenti, nome, cognome e eta. Questi argomenti vengono utilizzati per assegnati all'oggetto persona che viene creato all'interno della funzione e restituito come output. Possiamo quindi utilizzare questa funzione per creare una nuova persona ogni qualvolta abbiamo bisogno di farlo.
In termini tecnici quello che abbiamo appena fatto è chiamato object-oriented programming ovvero programmazione orientata ad oggetti. Stiamo creando un oggetto persona ed abbiamo creato una funzione ad-hoc per creare quest'oggeto.
La keyword "this" e il contesto di esecuzione
La keyword this è una keyword speciale in JavaScript che ci permette di accedere alle proprietà di un oggetto. Lascia che ti mostri un esempio di come possiamo modificare la proprietà nome dell'oggetto persona in modo molto semplice.
const compleanno = function(persona) {
persona.eta++;
}
compleanno(persona1);
console.log(persona1.eta); // 26
Dall'esempio sopra possiamo vedere come la persona "Mario Rossi" ha compiuto un anno in più passando da 25 a 26 anni. Per farlo abbiamo definito una nuova funzione chiamata compleanno ed al suo interno abbiamo utilizzato la sintassi ++ che aumenta di uno il valore della proprietà eta dell'oggetto persona.
Come possiamo ottimizzare questo codice evitando di avere due funzioni definite in due variabili diverse? Vediamo subito un esempio pratico.
const crearePersona = function(nome, cognome, eta) {
persona = {
nome: nome,
cognome: cognome,
eta: eta,
compleanno: function() {
this.eta++;
}
}
return persona;
}
let persona1 = crearePersona('Mario', 'Rossi', 25);
let persona2 = crearePersona('Luigi', 'Verdi', 30);
persona1.compleanno();
console.log(persona1.eta); // 26
Come vedi abbiamo definito la funzione compleanno all'interno della funzione crearePersona. Abbiamo inoltre utilizzato la keyword this che ci permette di accedere alle proprietà dell'oggetto persona senza dover specificare il nome dell'oggetto. In che modo ?
Quando creiamo una persona attraverso la funzione crearePersona questa creerà un oggetto con le proprietà che gli abbiamo assegnato, nel nostro caso nome, cognome ed eta.
La funzione compleanno è stata definita come un'altra proprietà e sta utilizzando la keyword this per riferirsi all'oggetto persona che la funzione principale sta creando.
Possiamo riscrivere lo stesso codice facendo utilizzo di una sintassi più comune, il JavaScript constructor.
const Persona = function(nome, cognome, eta) {
this.nome = nome;
this.cognome = cognome;
this.eta = eta;
this.compleanno = function() {
this.eta++;
}
}
let persona1 = new Persona('Mario', 'Rossi', 25);
let persona2 = new Persona('Luigi', 'Verdi', 30);
persona1.compleanno();
console.log(persona1.eta); // 26
Note che utilizziamo la lettera maiuscola per definire la funzione Persona. Questa è una convenzione che viene utilizzata per indicare che la funzione è un constructor ovvero un costruttore di oggetti.
Inoltre nota come utilizziamo la sintassi new per creare un nuovo oggetto. Questo ci permette di creare un nuovo oggetto persona che è una istanza della classe Persona.
Ora non preoccuparti di capire tutto perfettamente. È giusto che leggi questi concetti già da ora cosicchè nelle prossime lezioni non ti sarà tutto nuovo e avrai l'opportunità di capire meglio come funzionano questi concetti.
Conclusione
Datti una bella pacca sulla spalla per l'ottimo lavoro che hai fatto e continua a studiare! Ricorda che imparare la programmazione è una maratona e non uno sprint. Ogni giorno aggiungi un pò di conoscenza nel tuo bagaglio come un piccolo pezzo di legno che ti permetterà di costruire un bel fuoco per riscaldarti.
Nella prossima lezione continueremo a focalizzarci su JavaScript 🙌 Ora mi godo un bel caffè e ti aspetto nella prossima lezione! ☕