Molti di noi usano git quotidianamente. Ma quanti di noi sanno cosa succede dietro le quinte?

Per esempio, cosa succede quando usiamo git commit? Cosa viene conservato dopo ogni commit? Sono solo le differenze tra il commit attuale e quello precedente? In questo caso come sono codificate le differenze? Oppure viene salvata un'istantanea del repository ogni volta? Cosa succede veramente quando usiamo git init?

Molti di coloro che usano git non conoscono le risposte alle domande poste qui sopra. Ma ha davvero importanza?

Innanzitutto, come professionisti, dovremmo impegnarci a capire gli strumenti che usiamo, specialmente così di frequente, come git.

Ma soprattutto, ho scoperto che capire come funziona effettivamente git è utile in molte situazioni, sia che si tratti di risolvere conflitti di merge, che si cerchi di eseguire un rebase interessante, o anche solo quando qualcosa va leggermente storto.

Potrai trarre vantaggio da questo post se hai già abbastanza esperienza con git per sentirti a tuo agio con comandi come git pull ,git push ,git add oppure git commit.

Ciononostante, inizieremo con uno sguardo d'insieme per essere sicuri di essere tutti allo stesso livello per quanto riguarda la conoscenza dei meccanismi di git, e in particolare con i termini che verranno usati in questo post.

Ho anche caricato su YouTube una serie che tratta degli argomenti trattati in questo post e che ti invito a guardare qui.

Cosa aspettarsi da questo tutorial

Avremo una approfondita comprensione di ciò che accade dietro le quinte durante le operazioni che facciamo quasi quotidianamente con git.

Inizieremo trattando gli oggetti —  blob, tree (alberi) e commit. Discuteremo quindi brevemente dei branch e di come vengono implementati. Analizzeremo i dettagli della directory di lavoro, dell'area di stage e del repository.

Ci assicureremo anche di capire come questi termini si relazionano rispetto ai comandi git che conosciamo e utilizziamo per creare un nuovo repository.

Successivamente, creeremo un repository da zero , senza usare git init, git add o git commit. Questo ci consentirà di approfondire la nostra comprensione di ciò che avviene dietro le quinte quando lavoriamo con git.

Creeremo anche nuovi branch, ci sposteremo tra di essi e creeremo ulteriori commit, tutto senza usare git branch o git checkout.

Alla fine di questo post, ti sentirai di aver capito git. Sei pronto per farlo?😎

Oggetti Git: blob, alberi (tree) e commit

È molto utile pensare a git come alla gestione di un file system, e in particolare a "istantanee" di un file system in un dato momento.

Un file system inizia con una directory radice (root directory), nei sistemi basati su Unix, /, che in genere contiene altre directory (per esempio /usr o /bin). Queste directory possono contenere altre directory e/o file (per esempio /usr/1.txt).

In git, il contenuto dei file viene conservato in oggetti chiamati blob (binary large objects – grandi oggetti binari).

La differenza tra blob e file è che i file contengono anche metadati. Per esempio un file "ricorda" quando è stato creato, quindi se lo sposti in un'altra directory, la sua data di creazione rimane la stessa.

I blob, diversamente, hanno solo contenuto, flussi binari di dati. Un blob non registra la sua data di creazione, il suo nome o qualsiasi altra cosa diversa dal suo contenuto.

Ogni blob in git viene identificato dal suo hash SHA-1. Gli hash SHA-1 sono di 20 byte e rappresentano in genere 40 caratteri in formato esadecimale. In questo post talvolta mostreremo solo i primi caratteri di questo hash.

In git, l'equivalente di una directory è un albero (tree). Un albero in pratica è un elenco del contenuto di una directory, che può essere costituito da dei blob così come da altri alberi.

Anche gli alberi sono identificati dal loro hash SHA-1. Per riferirsi a questi oggetti, siano blob o alberi, si usa il loro hash SHA-1.

Osserva l'albero CAFE7 che  contiene il  blob F92A0 che rappresenta pic.png. In un altro albero, quello stesso blob potrebbe avere un altro nome.

Il diagramma qui sopra equivale a un file system con una directory radice che ha un file, /test.js, e una directory chiamata /docs nella quale ci sono due file: /docs/pic.png e /docs/1.txt.

Ora è tempo di prendere un'istantanea di quel file system e conservare tutti i file al momento esistenti, assieme al loro contenuto.

In git, un'istantanea è un commit. Un oggetto commit include un puntatore all'albero principale (la directory radice), e anche altri metadati come il l'esecutore del commit (committer), un messaggio di commit, e la marca temporale del commit.

In molti casi, un commit ha anche uno o più commit genitori, vale a dire le istantanee precedenti. Naturalmente anche gli oggetti commit sono identificati dal loro hash SHA-1. Questi sono gli hash mostrati quando usiamo git log.

Ogni commit contiene l'intera istantanea, non solo le differenze rispetto ai commit precedenti.

Come può funzionare? Non significa che dovremo conservare un gran volume di dati ad ogni commit?

Esaminiamo cosa succede se modifichiamo il contenuto di un file. Diciamo che vogliamo modificare 1.txt, aggiungendo un punto esclamativo, cioè modifichiamo il contenuto da HELLO WORLD a HELLO WORLD!.

Bene, questa modifica significa avere un nuovo blob, con un nuovo hash SHA-1. Ha senso, visto che sha1("HELLO WORLD") è diverso da sha1("HELLO WORLD!").

Poiché abbiamo un nuovo hash, allora anche il contenuto dell'albero dovrebbe cambiare, dopo tutto il nostro albero non punta più al blob 73D8A, ma al blob 62E7A . Quando modifichiamo il contenuto di un albero cambiamo anche il suo hash.

Ora, visto che l'hash dell'albero è diverso, dobbiamo cambiare anche l'albero genitore, visto che non punta più all'albero CAFE7, ma all'albero 24601. Ne consegue che anche l'albero genitore avrà un nuovo hash.

Siamo quasi pronti per creare un nuovo oggetto commit, e sembra che andremo a salvare un gran volume di dati, l'intero file system, ancora una volta! È davvero necessario?

In realtà, alcuni oggetti, blob nello specifico, non sono cambiati rispetto al commit precedente, il  blob F92A0 è rimasto invariato, e anche il  blob F00D1.

Ecco il trucco, fintanto che un oggetto non cambia, non lo salviamo nuovamente. In questo caso non dobbiamo salvare nuovamente i blob F92A0 e blob F00D1. Dobbiamo solo riferirci a essi usando i loro valori di hash. Quindi possiamo creare il nostro oggetto commit.

Visto che questo commit non è il primo commit, ha un genitore, il  commit A1337.

Per ricapitolare, abbiamo introdotto tre oggetti git:

• blob — il contenuto di un file.
• tree (albero)  — il contenuto di una directory (di blob e alberi).
• commit — un'istantanea dell'albero di lavoro.

Prendiamo un attimo in considerazione gli hash di questi oggetti. Supponiamo che io abbia scritto la stringa git is awesome! e da essa abbia creato un blob. Tu hai fatto lo stesso sul tuo sistema. Avremo lo stesso hash?

La risposta è  sì. Visto che i blob contengono gli stessi dati, avranno gli stessi valori di hash SHA-1.

Cosa succede se io creo un albero che fa riferimento al blob git is awesome!, e gli do nome e metadati specifici, e tu fai esattamente la stessa cosa sul tuo sistema. Avremo lo stesso hash?

Ancora una volta la risposta è sì. Visto che gli oggetti alberi sono uguali, avranno lo stesso hash.

Se creo un commit di quell'albero con il messaggio di commit Hello, e tu fai lo stesso nel tuo file system. Avremo gli stessi hash?

In questo caso la risposta è negativa. Anche se i nostri oggetti commit fanno riferimento allo stesso albero, hanno dettagli di commit diversi, la marca temporale, l'esecutore del commit, e così via.

Branch in Git

Un branch (ramo) è semplicemente un riferimento nominativo a un commit.

Possiamo sempre fare riferimento a un commit in git tramite il suo hash SHA-1, ma noi umani in genere preferiamo altri modi per denominare gli oggetti. Un branch è un modo di referenziare un commit, ma è semplicemente questo.

Nella maggior parte dei repository, la linea principale di sviluppo viene implementata in un branch chiamato master. È semplicemente un nome, creato quando usiamo git init, pertanto largamente usato. Tuttavia non riveste un significato particolare, e si potrebbe usare un qualsiasi altro nome ci vada a genio.

Tipicamente, il branch punta all'ultimo commit nella linea di sviluppo sulla quale stiamo attualmente lavorando.

Per creare un altro branch, in genere usiamo il comando git branch. Facendo questo creiamo in realtà un altro puntatore. Quindi se creiamo un branch chiamato test, usando il comando git branch test, stiamo in realtà creando un altro puntatore direzionato verso lo stesso commit del branch nel quale ci troviamo attualmente.

Come fa git a sapere su quale branch ci troviamo attualmente? Mantiene un puntatore speciale, detto HEAD. In genere HEAD punta a un branch, che a sua volta punta a un commit. In alcuni casi, HEAD può anche puntare direttamente a un commit, ma non ci focalizzeremo su questo.

Per rendere attivo il branch test, possiamo usare il comando git checkout test. Possiamo già indovinare cosa fa questo comando in realtà: cambia semplicemente il puntamento di HEAD verso test.

Possiamo anche usare  git checkout -b test prima di creare il branch test, che equivale a eseguire git checkout test, per far puntare HEAD al nuovo branch.

Cosa succede se eseguiamo qualche modifica e creiamo un nuovo commit con git commit? A quale branch verrà aggiunto il nuovo  commit?

La risposta è il branch test, visto che è il branch attivo (quello su cui punta HEAD). Successivamente, il puntatore di test verrà spostato verso il nuovo commit aggiunto. Nota che HEAD punta ancora a test.

Quindi se riattiviamo master eseguendo git checkout master, facciamo in modo che HEAD punti nuovamente a master .

Ora se creiamo un altro commit, verrà aggiunto al branch master (e il suo genitore sarà il commit B2424).

Come registrare le modifiche in Git

In genere, quando lavoriamo sul nostro codice, lo facciamo da una directory di lavoro (working dir). Una directory di lavoro o albero di lavoro, è una qualsiasi directory nel nostro file system che ha un repository associato. Contiene le cartelle e i file del nostro progetto, e una directory chiamata .git, che esamineremo più approfonditamente in seguito.

Dopo aver fatto alcune modifiche, vogliamo registrarle nel nostro repository. Un repository (repo in breve) è una collezione di commit, ciascuno dei quali rappresenta un archivio di quello che era l'albero di lavoro in una data precedente, sia sulla nostra macchina che su quella di qualcun altro.

Un repository include anche altre cose oltre ai nostri file che contengono il codice, come  HEAD, branch, e così via.

A differenza di altri strumenti simili che potresti avere usato, git non inserisce le modifiche effettuate dall'albero di lavoro direttamente nel repository. Viceversa le modifiche sono prima registrate in qualcosa chiamato indice (index) o area di stage (staging area).

Entrambi questi termini fanno riferimento alla stessa cosa e sono spesso usati nella documentazione di git. Useremo questi termini in modo intercambiabile all'interno di questo post.

Quando attiviamo (checkout) un branch, git popola l'indice con tutti i contenuti dei file che erano presenti l'ultima volta nella nostra directory di lavoro e come apparivano quando sono stati originariamente verificati. Quando usiamo git commit, il commit viene creato in base allo stato dell'indice.

L'uso dell'indice ci consente di preparare con cura ogni commit. Per esempio potremmo avere due file con modifiche rispetto al nostro ultimo commit nella nostra directory di lavoro. Potremmo volere aggiungere solo uno di essi all'indice (usando git add), quindi usare git commit per registrare solo quelle modifiche.

I file nella nostra directory di lavoro possono trovarsi in uno di due stati: tracciato (tracked) o non tracciato (untracked).

I file tracciati sono quelli che git conosce. Potrebbero trovarsi nell'ultima istantanea (commit) oppure essere stati portati nell'area di stage adesso.

I file non tracciati, sono tutto il resto, qualunque file o directory nella nostra directory di lavoro che non compariva nella nostra ultima istantanea (commit) e che non si trova attualmente nell'area di stage.

Come creare un repository nel modo convenzionale

Assicuriamoci di capire in che modo i termini che abbiamo introdotto si riferiscono al procedimento di creazione di un repository. Questa è solo una rapida panoramica di alto livello, prima di immergerci molto più a fondo in questo processo.

Nota:  la maggior parte delle videate con i comandi di shell mostra i comandi UNIX. Fornirò comandi sia per Windows che per UNIX, con schermate da Windows, per coprire i sistemi operativi più diffusi. Quando i comandi saranno esattamente gli stessi, li fornirò solo una volta.

Inizializzeremo un nuovo repository usando git init repo_1, quindi ci sposteremo nella directory di quel repository usando cd repo_1. Digitando tree /f .git possiamo vedere che l'esecuzione di git init ha prodotto parecchie sottodirectory all'interno di .git. (L'opzione del comando tree  /f include anche i file nel risultato dell'esecuzione del comando).

Creiamo un file all'interno della directory repo_1 (versione Windows):

Sui sistemi Linux e macOS:

Questo file si trova all'interno della nostra directory di lavoro. Tuttavia, visto che non è ancora stato inserito nell'area di stage, attualmente risulta non tracciato (untracked). Verifichiamolo con il comando git status:

Ora possiamo aggiungere questo file all'area di stage con il comando git add new_file.txt. Possiamo verificare che il file si trova nell'area di stage eseguendo git status:

Ora possiamo creare un commit con git commit:

È cambiato qualcosa nella directory .git? Eseguiamo tree /f .git per verificare:

Sembra che siano cambiate parecchie cose. È ora di esaminare approfonditamente la struttura di .git e capire cosa succede dietro le quinte quando eseguiamo git init, git add oppure git commit.

Ora di andare alle fondamenta

Fino ad ora abbiamo trattato alcuni degli aspetti base di Git, ora siamo pronti per andare davvero a fondo.

Per capire a fondo come funziona git, dovremo creare un repository, questa volta però lo faremo partendo da zero.

Non useremo git init, git add o git commit, il che ci consentirà di ottenere una migliore comprensione pratica del procedimento.

Come impostare .git

Creiamo una nuova directory, portiamoci all'interno di essa ed eseguiamo git status:

Va bene, git non sembra contento visto che non ha trovato nessuna cartella .git. La cosa naturale da fare sarebbe semplicemente crearla, poi rieseguire git status:

Apparentemente, non è sufficiente creare una cartella .git . Ci serve qualche cosa da immettere in quella directory.

Un repository git ha due componenti principali:

1. Una collezione di oggetti — blob, alberi, e commit.
2. Un sistema di denominazione di quegli oggetti, o riferimenti (references).

Un repository potrebbe anche contenere altre cose, come gli hook di git, ma come minimo deve includere oggetti e riferimenti.

Creiamo quindi una directory per gli oggetti, .git\objects e una per i riferimenti,  .git\refs (sui sistemi UNIX .git/objects e .git/refs, rispettivamente).

Un tipo di riferimento sono i branch. Internamente, git chiama i branch con il nome head. Quindi andremo a creare una directory apposita, .git\refs\heads.

Lo stato non cambia ancora eseguendo git status:

Come fa git a sapere dove iniziare a cercare un commit nel repository? Come spiegato in precedenza, cerca HEAD, che punta al branch attivo corrente (o commit in taluni casi).

Quindi dobbiamo creare HEAD, che è semplicemente un file che si trova in ./git/HEAD. Per farlo eseguiamo:

Su Windows: > echo ref: refs/heads/master > .git\HEAD

Su sistemi UNIX: $ echo "ref: refs/heads/master" > .git/HEAD

⭐ Adesso sappiamo come viene implementato HEAD, è semplicemente un file e il suo contenuto descrive verso quale oggetto puntare.

Dopo l'esecuzione dei comandi qui sopra, git status sembra cambiare idea:

Ora git crede che siamo nel branch chiamato master, anche se non abbiamo creato questo branch. Come detto prima,  master è solo un nome. Avremmo potuto far credere a  git di essere su un branch chiamato banana se avessimo voluto:

Per il resto di questo post torneremo a master, semplicemente per conformarci alla normale convenzione.

Ora che la nostra directory .git è pronta, possiamo iniziare le operazioni per creare un commit (come già detto, senza usare git add oppure git commit).

I comandi in Git, idraulica vs. ceramica

A questo punto sarebbe utile fare una distinzione tra due tipi di comando in git: idraulici e in ceramica. La definizione è presa in prestito da termini usati dagli idraulici quando si parla di tazza (già, questa — 🚽), che tradizionalmente è fatta di ceramica mentre l'infrastruttura (tubi e scarichi) costituisce l'idraulica.

Mantenendo l'analogia, possiamo dire che la ceramica fornisce all'utente un'interfaccia amichevole per accedere a tubature e scarichi. La maggior parte delle persone ha a che fare con la ceramica. Tuttavia, quando succede qualcosa di veramente brutto, e qualcuno vuole capirne il motivo, deve rimboccarsi le maniche e controllare le tubature e gli scarichi. (Nota: questi termini non sono miei, sono usati in modo estensivo in git).

git usa questa terminologia come analogia per distinguere i comandi di basso livello che in genere gli utenti non usano direttamente (i comandi idraulici che agiscono su tubi e scarichi) dai comandi di alto livello più amichevoli per gli utenti (comandi in ceramica).

Fino a ora abbiamo avuto a che fare con i comandi in ceramica, git init, git add o git commit. Di seguito passeremo ai comandi idraulici.

Come creare oggetti in Git

Partiamo creando un oggetto e scrivendolo nel database degli oggetti di git, che si trova in .git\objects. Troveremo un valore di hash SHA-1 per un blob usando il nostro primo comando di basso livello (idraulico), git hash-object, in questo modo:

Su Windows:

> echo git is awesome | git hash-object --stdin

Su sistemi UNIX:

$ echo "git is awesome" | git hash-object --stdin

Usando --stdin diciamo a git hash-object di prendere i suoi dati dallo standard input. Questo ci fornirà il relativo valore hash valido.

Per scrivere effettivamente quel blob nel database degli oggetti di git possiamo semplicemente aggiungere l'opzione -w a git hash-object. Successivamente possiamo verificare il contenuto della cartella .git e vedere cosa è cambiato.

Adesso possiamo vedere che l'hash del nostro blob è 54f6...36. Possiamo anche vedere che è stata creata una sottodirectory in .git\objects chiamata 54, il file è stato chiamato f6...36.

Quindi git in realtà prende i primi due caratteri dell'hash SHA-1 e li usa come nome di una directory. I restanti caratteri dell'hash vengono usati come nome del file che contiene il blob.

Come mai? Immagina un repository piuttosto grande, uno che abbia 300.000 oggetti (blob, alberi, e commit) nel suo database. Può servire molto tempo per cercare un hash in una lista di 300.000 elementi. Per questo git divide semplicemente il problema per 256.

Per cercare l'hash qui sopra, git per prima cosa cerca una directory chiamata 54 all'interno di .git\objects, che potrebbe avere fino a 256 directory (da 00 a FF). Poi cerca in quella directory, restringendo la ricerca mano a mano che la stessa progredisce.

Torniamo al nostro procedimento per generare un commit. Ora che abbiamo creato un oggetto, di che tipo è? Possiamo usare un altro comando di basso livello, git cat-file -t (-t sta per “tipo”), per verificarlo:

Non c'è da sorprendersi, questo oggetto è un blob. Possiamo anche usare  git cat-file -p (-p sta per “pretty-print” - bella stampa) per vederne il contenuto:

Il procedimento di creazione di un blob in genere si verifica quando aggiungiamo qualcosa nell'area di stage, vale a dire quando usiamo git add.

Ricorda che git crea un blob dell'intero file portato in area di stage. Anche se viene modificato un solo carattere (come nell'esempio di prima quando abbiamo aggiunto un !), il file avrà un nuovo blob con un nuovo hash.

Vedremo modifiche se verifichiamo lo stato del repository usando git status?

Apparentemente no. Aggiungere un oggetto blob al database interno di git non modifica lo stato, visto che git non sa in questa fase quali file siano tracciati o meno.

Dobbiamo tracciare questo file, aggiungendolo all'area di stage. A questo scopo possiamo usare il comando di basso livello git update-index, così: git update-index --add --cacheinfo 100644 <blob-hash> <nomefile>.

Nota: cacheinfo è un file in modalità 16-bit conservato da git, seguendo le direttive di tipi e modalità POSIX. Questo va oltre lo scopo di questo post.

Eseguendo il comando qui sopra otterremo una modifica nel contenuto di .git:

Riesci a identificare le modifiche? È stato creato un nuovo file chiamato index . Eccolo, il famoso indice (o area di stage), è praticamente un file che si trova nella directory .git.

Adesso che il nostro blob è stato aggiunto all'indice, ci aspettiamo che il risultato di git status sia diverso, come questo:

Interessante! Sono successe due cose.

La prima, possiamo vedere che my_file.txt è visualizzato in verde nella sezione Changes to be committed (modifiche da portare in commit). Questo perché l'indice ora contiene my_file.txt, in attesa di essere portato in un commit.

La seconda, osserviamo che my_file.txt viene visualizzato in rosso, poiché git crede che my_file.txt sia stato eliminato e il fatto che il file sia stato eliminato non è stato registrato in area di stage.

Questo succede in quanto abbiamo aggiunto un blob con il contenuto git is awesome al database degli oggetti, e abbiamo detto all'indice che my_file.txt ha il contenuto di quel  blob, ma in realtà non abbiamo mai veramente creato quel file.

Possiamo facilmente risolvere prendendo il contenuto del blob e scrivendolo nel nostro file system, in un file chiamato my_file.txt:

Ne consegue che my_file.txt non appare più in rosso nel risultato di  git status:

È ora di creare un oggetto commit dalla nostra area di stage. Come spiegato sopra, un oggetto commit ha un riferimento a un albero, quindi dobbiamo crearlo.

Lo possiamo fare con il comando git write-tree, che registra il contenuto dell'indice in un oggetto albero. Naturalmente possiamo usare git cat-file -t per verificare che in effetti si tratti di un albero:

Possiamo usare git cat-file -p per vedere il contenuto:

Grande, abbiamo creato un albero, e ora ci serve creare un oggetto commit che faccia riferimento a questo albero. Per farlo possiamo usare git commit-tree <hash-albero> -m <messaggio_di_commit>:

Ora dovresti essere a tuo agio con i comandi usati per verificare il tipo di oggetto creato, e per stamparne il contenuto:

Osserva che questo commit non ha un genitore, visto che è il primo commit. Quando aggiungeremo un altro commit, dovremo dichiarare il suo genitore, lo faremo più tardi.

L'ultimo hash che abbiamo ottenuto,  80e...8f è l'hash di un commit. Questi hash ci devono essere piuttosto familiari, ci abbiamo a che fare tutte le volte. Nota che un commit detiene un oggetto albero, con un proprio hash, che raramente specifichiamo esplicitamente.

Qualcosa è cambiato nel risultato di  git status?

Niente 🤔.

Come mai? Bene, per sapere che il nostro file è stato portato in commit, a git serve conoscere il nostro ultimo commit. Come ci riesce? Legge HEAD:

HEAD punta a master, ma cos'è master? Non l'abbiamo ancora creato.

Come spiegato in precedenza, un branch è semplicemente un riferimento nominativo a un commit. In questo caso, vorremmo che master facesse riferimento al commit con hash 80e8ed4fb0bfc3e7ba88ec417ecf2f6e6324998f.

Possiamo farlo creando semplicemente un file master in  \refs\heads, con questo hash come contenuto, così:

⭐ Alla fine, un branch è semplicemente un file all'interno di .git\refs\heads, che contiene un hash del commit al quale si riferisce.

Ora, finalmente, git status e git log sembrano apprezzare i nostri sforzi:

Abbiamo creato con successo un commit senza usare i comandi di alto livello (quelli in ceramica)! Forte, non è vero? 🎉

Come lavorare con i branch in Git: dietro le quinte

Proprio come abbiamo creato un  repository e un commit senza usare git init, git add o git commit, ora possiamo creare e spostarci tra i branch senza usare i comandi di primo livello (quelli in ceramica), git branch o git checkout.

È perfettamente legittimo che tu sia eccitato, lo sono anche io 🙂

Iniziamo:

Finora abbiamo solo un branch, che si chiama master. Per crearne un altro che chiameremo test (l'equivalente di git branch test), dobbiamo semplicemente creare un file chiamato test all'interno di .git\refs\heads, e il contenuto di quel file sarà lo stesso hash del commit al quale master punta.

Se usiamo git log, possiamo vedere che questo è in effetti il caso, sia master che test puntano a questo commit:

Ora spostiamoci nel nostro branch appena creato (l'equivalente di git checkout test). A questo scopo, dovremo modificare HEAD per farlo puntare al nostro nuovo branch:

Come possiamo vedere, sia git status che git log confermano che HEAD ora punta a  test, che è, di conseguenza, il branch attivo.

Ora possiamo avvalerci dei comandi già usati per creare un altro file e aggiungerlo all'indice:

Con i comandi qui sopra, abbiamo creato un file chiamato test.txt, che contiene la parola Testing, creato il blob corrispondente, e lo abbiamo aggiunto all'indice. Abbiamo anche creato un albero che rappresenta l'indice.

Adesso creiamo un commit che fa riferimento a questo albero. Questa volta, dovremmo anche specificare il genitore di questo commit, che sarà il commit precedente. Specifichiamo il genitore usando l'opzione -p per  git commit-tree:

Abbiamo appena creato un commit, con albero e un genitore, come possiamo vedere:

Il risultato di git log ci mostrerà il nuovo commit?

git log non ci mostra nulla di nuovo, come puoi vedere. Perché?🤔 Ricorda che git log traccia i branch per trovare commit rilevanti da mostrare. Adesso ci mostra test e il  commit a cui punta, e ci mostra anche master, che punta allo stesso commit.

Esatto, dobbiamo modificare  test per farlo puntare al nostro nuovo commit. Lo facciamo modificando semplicemente il contenuto di  .git\refs\heads\test:

Ha funzionato! 🎉🥂

git log passa per HEAD, che gli dice di andare al branch test, che a sua volta punta al commit 465...5e, il quale fa riferimento nuovamente al suo commit genitore 80e...8f.

Meraviglioso, non è vero? 😊

Riepilogo

Questo post ti ha introdotto ai meccanismi interni di git. Abbiamo iniziato trattando gli oggetti di base, blob, alberi e commit.

Abbiamo appreso che un blob conserva il contenuto di un file. Un albero è un elenco di directory contenente blob e/o sottoalberi. Un blob è un'istantanea della nostra directory di lavoro, con alcuni metadati come la marca temporale e il messaggio di commit.

Abbiamo quindi discusso dei branch e spiegato che non sono altro che un riferimento nominativo a un commit.

Abbiamo continuato descrivendo la directory di lavoro, una directory a cui è associato un repository, l'area di stage (indice) che contiene l'albero per il commit successivo e il repository, che è una raccolta di commit.

Abbiamo chiarito come questi termini si relazionano ai comandi git che conosciamo creando un nuovo repository ed eseguendo il commit di un file utilizzando i ben noti comandi git init, git add e git commit.

Quindi ci siamo immersi senza paura in git. Abbiamo smesso di usare comandi di alto livello (in ceramica) e siamo passati a comandi di basso livello (idraulici).

Usando echo e comandi di basso livello come git hash-object, siamo stati in grado di creare un blob, aggiungerlo all'indice, creare un albero dell'indice e creare un oggetto commit che punta a quell'albero.

Siamo stati anche in grado di creare e passare da un branch all'altro. Complimenti a quelli di voi che l'hanno provato da soli!👏

Spero che dopo aver seguito questo post sentirai di aver approfondito la tua conoscenza di ciò che accade dietro le quinte quando lavori con git.

Grazie per aver letto! Se ti è piaciuto questo articolo, puoi leggere di più su questo argomento sul blog swimm.io.

Omer Rosenbaum, Chief Technology Officer per Swimm. Esperto di cyber training e fondatore di Checkpoint Security Academy. Autore di Computer Networks (in Ebraico).

Visita il mio Canale YouTube

Risorse addizionali

Molto è stato scritto e detto su git. In particolare, ho trovato utili queste risorse (in lingua inglese - n.d.t.):

• La playlist di YouTube Git Internals — di Brief
• La lezione di Tim Berglund  “Git From the Bits Up”
• Git from the Bottom Up ,  di John Wiegley
• as promised, docs: git for the confused
• Git Internals — Git Objects , dal libro Pro Git book, di Scott Chacon e Ben Straub

Uno degli strumenti più potenti che uno sviluppatore può avere nella propria cassetta degli attrezzi è git rebase. Eppure è noto per essere complesso e frainteso.

La verità è che se capisci cosa fa realmente, git rebase è uno strumento molto elegante e diretto per ottenere tante cose diverse in Git.

Nei post precedenti, hai capito come funziona git diff, cosa sia un'azione di merge, come git risolve i conflitti di merge. In questo post, capirai cos'è il comando rebase di Git, perché è diverso da merge e come utilizzare git rebase con sicurezza 💪🏻

Prima di iniziare

1. Ho creato anche un video che tratta il contenuto di questo post. Se desideri guardarlo mentre stai leggendo, puoi trovarlo qui.
2. Se vuoi fare esperimenti con il repository che ho usato e provare da solo i comandi, puoi trovarlo qui.
3. Sto lavorando a un libro su Git! Ti interessa leggere la versione iniziale e darmi un feedback? Mandami una email: gitting.things@gmail.com

OK, sei pronto?

Breve riepilogo - Cos'e Git Merge? 🤔

Dietro le quinte, git rebase e git merge sono cose molto, molto diverse. Allora come mai la gente continua a confrontarli tutte le volte?

La ragione è il loro utilizzo. Quando si lavora con Git in genere si lavora su branch diversi, nei quali si introducono delle modifiche.

Nel tutorial precedente, ho fornito un esempio dove John e Paul (dei Beatles) scrivevano a 4 mani una nuova canzone. Avevano iniziato entrambi dal branch main poi ognuno di loro ha preso una strada diversa, modificando le parole, quindi confermando le loro modifiche.

Poi entrambi volevano integrare i loro cambiamenti, il che è qualcosa che succede molto frequentemente quando lavori con Git.

Ci sono due modi principali per integrare modifiche introdotte in branch diversi in Git, oppure, in altre parole, diversi commit e diverse cronologie di commit. Questi sono merge e rebase.

In un tutorial precedente, abbiamo imparato a conoscere git merge molto bene. Abbiamo visto come eseguire un merge, abbiamo creato il merge di un commit – dove il contenuto di questo commit è una combinazione di due branch, e aveva anche due genitori, uno in ciascun branch.

Quindi, diciamo che sei sul branch john_branch (ipotizzando la cronologia descritta nell'immagine qui sopra) ed esegui git merge paul_branch. Arriverai a questo stato – dove su john_branch, c'è un nuovo commit con due genitori. Il primo sarà il commit su john_branch dove HEAD stava puntando prima di eseguire il merge, in questo caso - "Commit 6". Il secondo sarà il commit puntato da paul_branch, "Commit 9".

Osserva nuovamente il grafico della cronologia: hai creato una cronologia divergente. Puoi in effetti vedere dove sono stati ramificati e integrati nuovamente.

Quindi quando usi git merge, non riscrivi la cronologia – piuttosto aggiungi un commit alla cronologia esistente. E, nello specifico, un commit che crea cronologie divergenti.

In che modo git rebase è diverso da git merge? 🤔

Quando si usa git rebase, succede qualcosa di diverso. 🥁

Partiamo dal quadro generale: se sei su paul_branch, ed esegui git rebase john_branch, Git va all'antenato comune per i branch di John e Paul. Poi prende le modifiche introdotte nei commit del branch di Paul e applica dette modifiche al branch di John.

In questo caso usi rebase per prendere le modifiche effettuate e confermate (con commit) in un branch – quello di Paul (paul_branch) – e le replichi in un branch diverso – quello di John (john_branch).

Aspetta, cosa significa? 🤔

Ora analizziamo questo concetto un poco per volta, in modo che tu possa capire pienamente cosa sta succedendo sotto il cofano 😎

cherry-pick come base per rebase

È utile pensare a rebase come all'esecuzione di git cherry-pick – un comando che prende un commit, calcola le differenze che questo introduce confrontando il commit del genitore con il commit stesso, e le replica nel branch corrente.

Facciamolo a mano.

Se diamo un'occhiata alle differenze introdotte da "Commit 5" eseguendo git diff main <SHA_DI_COMMIT_5>:

Se vuoi fare esperimenti con il repository che ho usato e provare da solo i comandi, puoi trovare il repository qui.

Puoi notare in questo commit, che John ha iniziato a lavorare a una canzone chiamata "Lucy in the Sky with Diamonds":

Ti ricordo che puoi usare anche il comando git show per ottenere lo stesso risultato:

git show <SHA_DI_COMMIT_5>

Ora se esegui il cherry-pick di questo commit, introdurrai questa specifica modifica, sul branch attivo. Prima portati su main:

git checkout main (oppure git switch main)

Poi crea un altro branch, giusto per essere più chiari:

git checkout -b my_branch (oppure git switch -c my_branch)

Poi esegui il cherry-pick di questo commit:

git cherry-pick <SHA_DI_COMMIT_5>

Esamina questo log (risultato di git lol):

(git lol è un alias che ho aggiunto a Git per vedere chiaramente in modo grafico la cronologia. Puoi trovare il comando che sostituisce qui).

Sembra che tu abbia fatto un copia-incolla di "Commit 5". Ricorda che sebbene abbia lo stesso messaggio di commit e introduca le stesse modifiche, e punti anche allo stesso albero di oggetti  del "Commit 5" originale, in questo caso è comunque un oggetto commit diverso, visto che è stato creato con una diversa marca temporale.

Se osserviamo le modifiche usando git show HEAD:

Sono le stesse di "Commit 5"'.

Naturalmente, se osservi il contenuto del file con un editor (diciamo usando il comando nano lucy_in_the_sky_with_diamonds.md), sarà nello stesso stato nel quale si trovava dopo il "Commit 5" originale.

Forte! 😎

OK, ora puoi eliminare il nuovo branch così che non appaia nella tua cronologia tutte le volte:

git checkout main
git branch -D my_branch

Andare oltre cherry-pick – Come usare git rebase

Puoi considerare git rebase come un modo per eseguire più cherry-pick uno dopo l'altro – vale a dire "replicare" diversi commit. Questa non è la sola cosa che puoi fare con  rebase, ma è un buon punto di partenza per la nostra spiegazione.

È ora di giocare con git rebase! 👏🏻👏🏻

In precedenza, hai integrato  paul_branch in john_branch. Cosa sarebbe successo se avessi eseguito il rebase di paul_branch su john_branch? Avresti ottenuto una cronlogia molto diversa.

In sostanza, sarebbe come se avessimo preso le modifiche introdotte nei commit su paul_branch e le avessimo replicate su john_branch. Il risultato sarebbe stato una cronologia lineare.

Per capire il processo, ti fornirò una visione ad alto livello, poi approfondiremo ogni passaggio. Il processo di rebase di un branch su un altro branch è il seguente:

1. Trova l'antenato comune.
2. Identifica i commit da "replicare".
3. Per ogni commit X, calcola diff(genitore(X), X), e conserva il risultato come patch(X).
4. Sposta HEAD verso la nuova base.
5. Applica le patch generate in ordine sul branch di destinazione. Ogni volta, crea un nuovo oggetto commit con il nuovo stato.

Il processo di creare nuovi commit con lo stesso insieme di modifiche di commit esistenti è detto "replica" di questi commit, un termine che abbiamo già usato.

È ora di provare rebase🙌🏻

Partiamo dal branch di Paul:

git checkout paul_branch

Questa è la cronologia:

Ora veniamo alla parte eccitante:

git rebase john_branch

Osserva la cronologia:

gg è un alias per uno strumento esterno che ho introdotto nel video (è il programma git-graph che puoi trovare in questo repository - n.d.t.).

Pertanto mentre con git merge hai aggiunto alla cronologia, con git rebase hai riscritto la cronologia. Hai creato oggetti commit nuovi. Inoltre il risultato è un grafico di cronologia lineare, non divergente.

In sostanza abbiamo "copiato" i commit che si trovavano in paul_branch, introdotti dopo "Commit 4", e "incollati" in john_branch.

Il comando è chiamato "rebase", in quanto modifica la base di commit del branch dal quale viene eseguito. Nel nostro caso, prima di eseguire git rebase, la base di paul_branch era "Commit 4" – visto che da lì è "nato" il branch (derivato da main). Con rebase, hai chiesto a Git di darti un'altra base, vale a dire: fai finta che paul_branch sia "nato"  da "Commit 6".

Per fare questo Git ha preso quello che era il "Commit 7", e ha "replicato" le modifiche introdotte in questo commit in "Commit 6", poi ha creato un nuovo oggetto commit. Questo oggetto differisce dal "Commit 7" originale in tre aspetti:

1. Ha una marca temporale diversa.
2. Ha un commit genitore diverso – "Commit 6" invece che "Commit 4".
3. L'albero di oggetti a cui punta è diverso - visto che le modifiche sono state introdotte all'albero di oggetti puntato da "Commit 6", non a quello puntato da "Commit 4".

Nota l'ultimo commit qui, "Commit 9'". L'istantanea che rappresenta (cioè l'albero a cui punta) è esattamente la stessa che avresti se avessi integrato i due branch. Lo stato dei file nel tuo repository Git sarebbe stato uguale se avessi usato git merge. Solo che la cronologia è diversa, e l'oggetto commit naturalmente.

Ora puoi semplicemente usare:

git checkout main
git merge paul_branch

Hmm... Cosa succederebbe se eseguissi questo ultimo comando? 🤔 Esamina nuovamente la cronologia dei commit, dopo esserti portato in  main:

Cosa comporta integrare main e paul_branch?

In effetti, Git può semplicemente eseguire un merge fast-forward, visto che la cronologia è perfettamente lineare (se ti serve una rinfrescata su cosa sia un merge fast-forward, dai un'occhiata a  questo post). Come risultato, main e paul_branch ora puntano allo stesso commit:

Rebase avanzato in Git💪🏻

Ora che conosci le basi di rebase, è ora di prendere in considerazione casi più avanzati, laddove torneranno utili opzioni addizionali e argomenti per il comando rebase.

Nell'esempio precedente, quando hai usato rebase senza opzioni aggiuntive, Git ha replicato tutti i commit a partire dall'antenato comune fino all'inizio del branch corrente.

Ma rebase è potentissimo, è un comando possente in grado di riscrivere la cronologia e può tornare utile se vuoi modificare la cronologia e generarne una tua propria.

Annulla l'ultimo merge facendo puntare nuovamente main a "Commit 4":

git reset -–hard <COMMIT 4_ORIGINALE>

Annulla anche il rebase in questo modo:

git checkout paul_branch
git reset -–hard <COMMIT 9_ORIGINALE>

Nota che ora la cronologia è esattamente quella che avevi in precedenza:

Giusto per essere chiari, "Commit 9" non sparisce semplicemente quando non è raggiungibile dall'HEAD corrente. Viceversa è ancora conservato nel database degli oggetti. Visto che hai usato git reset per fare in modo che HEAD punti a questo commit, sei in grado di recuperarlo, assieme ai suoi commit genitori visto che anch'essi sono conservati nel database. Non male, non è vero? 😎

Adesso diamo un veloce sguardo alle modifiche introdotte da Paul:

git show HEAD

Proseguiamo a ritroso nel grafico dei commit:

git show HEAD~

Andiamo indietro di un altro commit:

git show HEAD~2

Quindi, queste modifiche sono buone, ma forse Paul non vuole questo tipo di cronologia. Piuttosto vuole che sembri che le modifiche introdotte in  "Commit 7" e "Commit 8" appaiano come un singolo commit.

Per fare questo, puoi usare un rebase interattivo, aggiungendo l'opzione -i (oppure --interactive) al comando rebase :

git rebase -i <SHA_DI_COMMIT_4>

Oppure, visto che main sta puntando a  "Commit 4", possiamo semplicemente eseguire:

git rebase -i main

Eseguendo questo comando, dici a Git di usare una nuova base, "Commit 4". Pertanto stai chiedendo a Git di tornare a tutti i commit che sono stati introdotti dopo "Commit 4", che sono raggiungibili dall' HEAD corrente, e di replicarli.

Per ogni commit che viene replicato, Git ci chiede come vogliamo agire:

In questo contesto, è utile pensare a un commit come a una modifica. Vale a dire,  "Commit 7" come fosse "la modifica che 'Commit 7' ha introdotto sopra il suo genitore".

Una opzione è usare pick. Questo è il comportamento predefinito, che dice a Git di replicare le modifiche introdotte in questo commit. In questo caso, non devi fare nulla e scegliere (pick)  per tutti i commit – otterrai la stessa cronologia e Git non dovrà neppure creare dei nuovi oggetti commit.

Un'altra opzione è squash. Un commit si definisce squashed (accorpato) quando ha tutto il suo contenuto inserito nel commit precedente. Nel nostro caso Paul vorrebbe accorpare  "Commit 8" in "Commit 7":

Come puoi vedere,  git rebase -i fornisce opzioni aggiuntive, ma non le esamineremo tutte in questo post. Se provi ad eseguire il rebase, ti verrà richiesto di indicare un messaggio per il nuovo commit che sarà creato (vale a dire quello che introdurrà le modifiche sia di "Commit 7" che di "Commit 8"):

Dai un'occhiata alla cronologia:

Esattamente quello che volevamo! Abbiamo su paul_branch "Commit 9" (ovviamente un oggetto diverso rispetto al "Commit 9" originale). Questo punta a "Commits 7+8", che è un singolo commit che contiene le modifiche dei "Commit 7" e "Commit 8" originali. Il genitore di questi commit è  "Commit 4", a cui sta puntando main, che è il genitore di john_branch.

Wow, forte, non è vero? 😎

git rebase ti consente controllo illimitato sulla forma di qualsiasi branch. Puoi usarlo per riordinare i commit, oppure per rimuovere modifiche non corrette, o cambiare una modifica in retrospettiva. In alternativa, potresti spostare la base del tuo branch in un altro commit di tua scelta.

Come usare l'opzione di switch --onto di git rebase

Consideriamo un altro esempio. Andiamo su main nuovamente:

git checkout main

Eliminiamo i puntatori a paul_branch e john_branch in modo che non compaiono più nel grafico della cronologia:

git branch -D paul_branch
git branch -D john_branch

Ora generiamo un nuovo branch da main e ci spostiamo su di esso:

git checkout -b new_branch

Ora facciamo qualche modifica ed eseguiamo il commit:

nano code.py

git add code.py
git commit -m "Commit 10"

Torniamo su main:

git checkout main

Poi introduciamo una modifica:

Adesso eseguiamo il commit queste modifiche:

git add code.py
git commit -m "Commit 11"

Poi effettuiamo un altro cambiamento:

Eseguiamo il commit anche di questa modifica:

git add code.py
git commit -m "Commit 12"

Aspetta, ora mi sono reso conto che avrei voluto apportare le modifiche introdotte nel "Commit 11" in new_branch. Che si può fare adesso? 🤔

Esaminiamo la cronologia:

Quello che voglio è che invece di avere "Commit 10" situato solo sul branch  main, sia anche in new_branch. Visivamente, vorrei spostarlo in fondo al grafico mostrato qui sotto:

Riesci a vedere dove voglio arrivare? 😇

Bene, come sappiamo rebase ci consente in pratica di replicare le modifiche introdotte in new_branch, quelle del "Commit 10",  come se in origine fossero state apportate in "Commit 11" invece che in "Commit 4".

Per fare questo, puoi usare altri argomenti di git rebase. Dovresti dire a Git che vuoi prendere tutta la cronologia introdotta tra l'antenato comune di main e new_branch, che sarebbe "Commit 4", e fare in modo che la nuova base per quella cronologia sia "Commit 11". Per farlo usa:

git rebase -–onto <SHA_DI_COMMIT_11> main new_branch

Ora dai uno sguardo alla nostra meravigliosa cronologia! 😍

Consideriamo un altro caso.

Diciamo che ho iniziato a lavorare su un branch e per errore ho iniziato a lavorare da feature_branch_1, invece che da main.

Per emulare questa situazione crea feature_branch_1:

git checkout main
git checkout -b feature_branch_1

Poi elimina new_branch così che non appaia più nel grafico della cronologia:

git branch -D new_branch

Crea un semplice file Python chiamato 1.py:

Aggiungi a Git questo file ed esegui il commit:

git add 1.py
git commit -m  "Commit 13"

Ora esci (per errore) da feature_branch_1 ed entra in un nuovo branch (feature_branch_2):

git checkout -b feature_branch_2

Poi crea un altro file, 2.py:

Aggiungi anche questo file ed esegui il commit:

git add 2.py
git commit -m  "Commit 14"

Poi inserisci dell'altro codice a 2.py:

Fai il commit anche di queste modifiche:

git add 2.py
git commit -m  "Commit 15"

Fino ad ora dovresti avere questa cronologia:

Ritorna su feature_branch_1 e modifica 1.py:

git checkout feature_branch_1

Fai il commit del file modificato:

git add 1.py
git commit -m  "Commit 16"

La tua cronologia dovrebbe essere questa:

Diciamo che ora ti rendi conto di avere fatto un errore. In realtà avresti voluto far nascere feature_branch_2 da main, invece che da feature_branch_1.

Come puoi rimediare? 🤔

Prova a pensarci tenendo conto del grafico della cronologia e di quello che hai imparato fino ad ora sull'opzione --onto per il comando rebase

Bene, vuoi "sostituire" il genitore del tuo primo commit su feature_branch_2, che è "Commit 14", in modo che sia alla sommità del branch main , in questo caso "Commit 12", invece che all'inizio di feature_branch_1, in questo caso "Commit 13". Pertanto, ancora una volta, andrai a creare una nuova base, questa volta per il primo commit su feature_branch_2.

Come faresti?

Per prima cosa portati su feature_branch_2:

git checkout feature_branch_2

Da qui puoi usare:

git rebase -–onto main <SHA_DI_COMMIT_13>

Come risultato avrai feature_branch_2 con base su main invece che su feature_branch_1:

La sintassi del comando è:

git rebase --onto <nuovo_genitore> <vecchio_genitore>

Come effettuare il rebase su un singolo branch

Puoi anche usare git rebase in relazione alla cronologia di un singolo branch.

Vediamo se mi puoi aiutare.

Diciamo che ho lavorato da feature_branch_2, e nello specifico ho modificato il file code.py. Ho iniziato modificando gli apici singoli che racchiudono le stringhe in apici doppi:

Poi ho eseguito il commit delle modifiche:

git add code.py
git commit -m "Commit 17"

Quindi ho deciso di aggiungere una nuova funzione all'inizio del file:

Ho nuovamente portato nell'area di stage code.py ed eseguito il commit:

git add code.py
git commit -m "Commit 18"

Ora mi sono reso conto che mi sono dimenticato di cambiare gli apici che racchiudono l'istruzione  __main__ da singoli a doppi (come potresti aver notato), pertanto ho fatto anche questo:

Naturalmente ho eseguito il commit anche di questa modifica:

git add code.py
git commit -m "Commit 19"

Ora esamina la cronologia:

Non è molto bella, giusto? Voglio dire, ho due commit (in relazione tra loro), "Commit 17" e "Commit 19" (sostituzione di ' con  "), ma sono separati l'uno dall'altro da un "Commit 18" che non ha niente a che vedere con quelli (ho aggiunto una nuova funzione). Cosa posso fare? 🤔 Puoi aiutarmi?

Andando a intuito, voglio modificare la cronologia qui:

Quindi, cosa dovrei fare?

Hai ragione! 👏🏻

Posso eseguire il rebase della cronologia da  "Commit 17" a "Commit 19", sopra il "Commit 15". Per fare questo:

git rebase --interactive --onto <SHA_DI_COMMIT_15> <SHA_DI_COMMIT_15>

Nota che ho specificato "Commit 15" come inizio del gruppo di commit, escludendo questo commit. Non ho avuto bisogno di specificare  HEAD come ultimo parametro.

Dopo aver seguito il tuo consiglio ed eseguito il comando rebase  (grazie! 😇) mi viene presentata la seguente schermata:

Quindi cosa dovrei fare? Voglio inserire "Commit 19" prima di "Commit 18", in modo che venga appena dopo "Commit 17". Posso proseguire e accorparli, in questo modo:

Ora quando mi viene richiesto di inserire un messaggio per il commit, posso indicare  "Commit 17+19":

Ora guardiamo la nostra stupenda cronologia:

Grazie ancora! 🙌🏻

Altri casi d'uso per rebase + altri esercizi

A questo punto, spero tu sia a tuo agio con la sintassi di rebase. Il modo migliore per comprenderla veramente è considerare varie situazioni e cercare di risolverle da solo.

Per quanto riguarda i casi d'uso che andrò a presentare, ti suggerisco vivamente di interrompere la lettura dopo che ho introdotto ciascun caso e cercare di risolverlo autonomamente.

Come escludere commit

Ipotizziamo che in un altro repository tu abbia questa cronologia:

Prima di iniziare a sperimentare, inserisci un etichetta (tag) per "Commit F", in modo che tu possa poi tornarci più tardi:

git tag original_commit_f

In realtà non vuoi includere le modifiche in "Commit C" e "Commit D". Potresti usare un rebase interattivo come prima ed eliminare quelle modifiche, oppure potresti nuovamente usare  git rebase -–onto. In che modo useresti l'opzione --onto per "rimuovere" quei due commit?

Puoi portare la base di  HEAD sopra a  "Commit B", dove il vecchio genitore era in realtà "Commit D", e ora dovrebbe essere "Commit B". Esamina nuovamente la cronologia:

Effettuare il rebase in modo che "Commit B" costituisca la base di "Commit E", significa "spostare" sia "Commit E" che "Commit F", e dargli un'altra base – "Commit B". Puoi comporre da solo il comando per fare questo?

git rebase --onto <SHA_DI_COMMIT_B> <SHA_OF_COMMIT_D> HEAD

Nota che usando la sintassi qui sopra non viene spostato main per puntare al nuovo commit, pertanto il risultato è un HEAD staccato. Se usi gg (git-graph) o un altro strumento che visualizza la cronologia raggiungibile dai branch potresti essere confuso:

Tuttavia se usi semplicemente git log (oppure il mio alias git lol), vedrai la cronologia desiderata:

Non so tu come la pensi, ma questo tipo di cose mi fanno davvero felice. 😊😇

A proposito, potresti omettere HEAD dal comando precedente poiché questo è il valore predefinito per il terzo parametro. Quindi usando solo:

git rebase --onto <SHA_DI_COMMIT_B> <SHA_DI_COMMIT_D>

otterresti lo stesso risultato. L'ultimo parametro in effetti dice a Git dove si trova la fine della sequenza corrente di commit per i quali effettuare il rebase. Quindi la sintassi git rebase --onto con tre argomenti è:

git rebase --onto <nuovo_genitore> <vecchio_genitore> <fino_a>

Come spostare commit tra branch

Diciamo di avere la stessa cronologia di prima, alla quale torniamo usando il tag applicato nella sezione precedente:

git checkout original_commit_f

Ora voglio che solo "Commit E", sia in un branch basato su "Commit B". Vale a dire, voglio avere un nuovo branch, che si dirama da "Commit B", con solo "Commit E".

Quindi, cosa significa questo in termini di rebase? Osserva l'immagine qui sopra. Quale commit (o quali) dovrebbero essere oggetto di rebase, e quale commit dovrebbe costituire la nuova base?

So che posso contare su di te qui 😉

Quello che voglio è prendere "Commit E", e solo questo commit, e modificare la sua base in  "Commit B". In altre parole, replicare le modifiche introdotte in "Commit E" su "Commit B".

Puoi applicare questa logica alla sintassi di git rebase?

Eccola (questa volta scrivo <COMMIT_B> invece di <SHA_DI_COMMIT_B>, per brevità):

git rebase –-onto <COMMIT_B> <COMMIT_D> <COMMIT_E>

Ora la cronologia risulta questa:

Meraviglioso!

Una nota sui conflitti

Nota che quando esegui un rebase, potresti imbatterti in conflitti, come se stessi facendo un'azione di integrazione con merge. Potresti avere conflitti perché quando si esegue il rebase, stai cercando di applicare modifiche su una base diversa, nella quale forse le modifiche non si applicano.

Per esempio prendi di nuovo il repository precedente e in particolare esamina le modifiche introdotte nel "Commit 12", puntato da main:

git show main

Ho già trattato il formato di git diff in dettaglio in un post precedente, ma come veloce ripasso questo commit dice a Git di aggiungere una riga dopo le due righe:

```
This is a sample file

e prima di queste tre righe:

```
def new_feature():
  print('new feature')

Supponiamo che tu stia tentando di effettuare un rebase di "Commit 12" su un altro commit. Se, per qualche motivo, queste righe non esistono come nella patch sul commit verso il quale stai effettuando il rebase, allora avrai un conflitto. Per saperne di più sui conflitti e su come risolverli, consulta questa guida.

La prospettiva dal quadro generale

All'inizio di questa guida, ho iniziato citando le similitudini tra git merge e git rebase: entrambi sono usati per integrare modifiche introdotte in diverse cronologie.

Tuttavia, come ora sai, le modalità con le quali operano sono molto diverse. Con merge l'integrazione ha come risultato cronologie divergenti, con rebase la cronologia risultante è lineare. I conflitti sono possibili in entrambi i casi. C'è un'ulteriore colonna nella tabella qui sopra (la terza) che richiede una particolare attenzione.

Ora che sai cos'è git rebase e come usare il rebase interattivo oppure  rebase --onto, spero che tu sia d'accordo con me nell'affermare che git rebase sia uno strumento potentissimo. Tuttavia ha un grosso inconveniente se confrontato con l'integrazione via merge.

Git rebase modifica la cronologia.

Ciò significa che non dovresti effettuare il rebase di commit che si trovano al di fuori della tua copia locale del repository, sul quali altre persone potrebbero aver basato i loro commit.

In altre parole, se i commit in oggetto sono solo quelli che tu hai creato localmente, vai pure avanti, usa rebase, scatenati.

Ma se i commit sono stati portati sul repository remoto, si può generare un grosso problema, visto che qualcun altro potrebbe fare affidamento su questi commit, che tu più tardi hai sovrascritto, pertanto tu e gli altri avrete versioni diverse del repository.

Questo è improbabile avvenga con merge in quanto, come abbiamo visto, non modifica la cronologia.

Considera ad esempio l'ultimo caso nel quale abbiamo effettuato un rebase che ha generato questa cronologia:

Ora, supponi che io abbia già portato questo branch nel repository remoto con git push, e dopo aver fatto questo, un altro sviluppatore abbia scaricato il repository derivandolo da "Commit C". L'altro sviluppatore non sa che, nel frattempo, io avevo effettuato localmente il rebase del mio branch e l'avevo successivamente inviato nuovamente al repository remoto.

Ne deriva un'inconsistenza: l'altro sviluppatore lavora da un commit che non è più disponibile sulla mia copia del repository.

Non approfondirò le conseguenze esatte di quanto esposto qui sopra in questa guida, visto che il mio messaggio principale è che dovresti evitare assolutamente queste situazioni. Se ti interessa sapere cosa sarebbe veramente accaduto, ti lascio un link a un'utile risorsa qui sotto. Per ora riepiloghiamo quanto abbiamo trattato.

Riepilogo

In questo tutorial, hai appreso il comando git rebase, uno strumento potentissimo per riscrivere la cronologia in Git. Hai preso in considerazione alcune situazioni dove git rebase può essere di aiuto, e come usarlo con uno, due o tre parametri, con e senza l'opzione --onto.

Spero di essere stato in grado di convincerti che git rebase è potente, tuttavia è piuttosto semplice una volta che hai capito il concetto. È uno strumento per "copiare-incollare" i commit (o più precisamente, le modifiche), ed è utile da avere a tua disposizione.

Riferimenti aggiuntivi

• Git Internals YouTube playlist — by Brief (il mio canale YouTube).
• Un mio post precedente sui meccanismi interni di Git.
• Un mio tutorial su Git UNDO - riscrivere la cronologia con Git.
• Documentazione di Git su rebase
• Branch e la potenza di rebase
• Rebase interattivo
• Git rebase --onto

Notizie sull'autore

Omer Rosenbaum è Chief Technology Officer per Swimm . È l'autore  del canale YouTube Brief. È anche un esperto di cyber training e fondatore della Checkpoint Security Academy. È l'autore di Computer Networks (in Ebraico). Lo puoi trovare su Twitter.

L'obiettivo di questo manuale è di introdurti rapidamente alle basi di JavaScript in modo che tu possa iniziare a programmare applicazioni.

Invece di coprire tutte le teorie e i concetti di JavaScript, ti insegnerò solo gli elementi costitutivi più importanti del linguaggio. Tratteremo cose come variabili, tipi di dato, funzioni, oggetti, e array. Imparerai anche come combinarli tra loro per creare un programma, piccolo ma solido.

Tralasceremo anche HTML, CSS e l'utilizzo di JavaScript nel browser. Questo tutorial si concentra solo su JavaScript come linguaggio di programmazione e utilizza il terminale per eseguire il codice.

Questo tutorial ha anche degli esercizi alla fine di alcuni capitoli che ti danno il tempo di mettere in pratica ciò che hai imparato e "assorbire" i nuovi concetti.

Questo manuale è completamente gratuito proprio qui in questa pagina web. Se desideri la versione PDF ed EPUB di questo tutorial (in lingua inglese - n.d.t.), puoi pagare una piccola somma. Contribuirai a supportarmi nella creazione di un tutorial JavaScript approfondito che ti aiuterà a creare un'applicazione web completa.

Sommario

• 1 - Introduzione a Javascript
  • 1.1 - Perché imparare Javascript?
  • 1.2 - Javascript vs. Java
• 2 - Come preparare il tuo computer
  • 2.1 - Come installare VSCode
  • 2.2 - Come installare Node.js
• 3 - Breve introduzione alla console
• 4 - È ora di dire Hello World!
• 5 - Struttura del codice
  • 5.1 - Istruzioni
  • 5.2 - Commenti
  • 5.3 - Flusso di esecuzione
  • 5-4 - Esercizio nr. 1
• 6 - Variabili
  • 6.1 - Denominazione
  • 6.2 - Il tipo di variabile const
  • 6.3 - Il tipo di variabile var
  • 6.4 - Esercizio nr. 2
• 7 - Tipi di dato base
  • 7.1 - Stringhe
  • 7.2 - Numeri (interi e con virgola mobile)
  • 7.3 - Booleani
  • 7.4 - undefined
  • 7.5 - null
• 8 - Conversione di tipo e coercizione di tipo
  • 8.1 - Coercizione di tipo
    • 8.1.1 - Regole della coercizione di tipo
    • 8.1.2 - Perchè dovresti evitare la coercizione di tipo
• 9 - Operatori
  • 9.1 - Operatori aritmetici
  • 9.2 - Operatori di assegnazione
  • 9.3 - Operatori di confronto
  • 9.4 - Operatori logici
  • 9.5 - Operatore typeof
  • 9.6 - Esercizio nr. 3
• 10 - Array
  • 10.1 - Posizione dell'indice
  • 10.2 - Metodi speciali di manipolazione
  • 10.3 - Esercizio nr. 4
• 11 - Flussi di controllo (condizionali)
  • 11.1 - Istruzione if...else
  • 11.2 - Istruzione switch...case
  • 11.3 - Corpo dell'istruzione switch...case
  • 11.4 - Casi d'uso dell'istruzione switch...case
  • 11.5 - Esercizio nr. 5
• 12 - Flussi di controllo (cicli)
  • 12.1 - Istruzione for
  • 12.2 - Quando usare un ciclo for
  • 12.3 - Istruzione while
  • 12.4 - Quando usare un ciclo while
  • 12.5 - Esercizio nr. 6
• 13 - Funzioni
  • 13.1 - Come creare la tua funzione
  • 13.2 - Parametri e argomenti della funzione
  • 13.3 - Parametri predefiniti
  • 13.4 - Parametri predefiniti e null
  • 13.5 - Istruzione return
  • 13.6 - Ambito di una variabile
  • 13.7 - Parametro rest
  • 13.8 - Funzione freccia
  • 13.9 - Funzioni freccia su singola riga o più righe
  • 13.10 - Funzione freccia senza parentesi tonde
  • 13.11 - La funzione freccia non ha associazione con arguments
  • 13.12 - Convertire facilmente una funzione normale in funzione freccia
  • 13.13 - Esercizio nr. 7
• 14 - Oggetti
  • 14.1 - Accedere ai valori
  • 14.2 - Aggiungere una nuova proprietà
  • 14.3 - Modificare una proprietà
  • 14.4 - Eliminare una proprietà
  • 14.5 - Verificare se esiste una proprietà
  • 14.6 - Esercizio nr. 8
• 15 - Esercizio finale: sviluppare un registratore di cassa
• 16 - Conclusione
• 17 - Soluzioni

1 - Introduzione a Javascript

JavaScript è stato creato intorno all'aprile 1995 da Brendan Eich. A quel tempo, stava lavorando allo sviluppo di un browser per un'azienda chiamata Netscape. Gli fu detto che aveva solo 10 giorni per progettare e codificare un prototipo funzionante di un linguaggio di programmazione che potesse essere eseguito nel browser.

Aveva bisogno di creare un linguaggio che piacesse ai programmatori non professionisti, come Microsoft Visual Basic.

Il motivo per cui gli furono concessi solo 10 giorni era che Netscape aveva bisogno di rilasciare il suo browser, che all'epoca era in competizione con Microsoft.

All'inizio, JavaScript non era così potente come lo è oggi, poiché originariamente era stato progettato per aggiungere interazione e animazione alle pagine web. È stato dal 2005, quando sono stati rilasciati jQuery e AJAX, che JavaScript ha iniziato a essere utilizzato in ogni sito web.

Semplicemente non esisteva una facile alternativa a jQuery e AJAX per la manipolazione del DOM e l'invio di richieste asincrone. Inoltre, un'attiva comunità di sviluppatori JavaScript ha continuato ad aggiungere nuove funzionalità alla libreria.

Poi Google ha lanciato il suo moderno browser Chrome e Facebook ha iniziato a portare più persone online. JavaScript ha iniziato a crescere per soddisfare le ambizioni di queste gigantesche società di Internet.

I browser hanno iniziato a sviluppare API che potevi usare in JavaScript per recuperare informazioni come indirizzi IP e posizioni geografiche dal browser, fornendo maggiori risorse alle società Internet per localizzare le funzionalità dei loro siti web.

Poi è avvenuta un'altra innovazione che ha reso JavaScript ancora più potente.

Un ambiente lato server chiamato Node.js fu rilasciato nel 2009, consentendo l'esecuzione di JavaScript lato server come PHP, Java, Python, Ruby e molti altri linguaggi. Ha inoltre consentito ai programmatori di sviluppare applicazioni web full-stack utilizzando solo JavaScript.

Oggi, JavaScript è un linguaggio che può alimentare le applicazioni Web, desktop e mobili.

Ecco una citazione da Tim O'Reilly, il fondatore di O'Reilly Media:

Imparare JavaScript significava voler dire che non eri uno sviluppatore serio. Oggi non imparare JavaScript significa la stessa cosa.

Imparare JavaScript è ora fondamentale per chi voglia diventare uno sviluppatore web.

1.1 - Perché imparare JavaScript?

Ci sono 4 buone ragioni per le quali hai bisogno di imparare e comprendere a fondo JavaScript:

1. JavaScript è il solo linguaggio che funziona all'interno del browser
2. È abbastanza facile da imparare (ma difficile da padroneggiare)
3. È un linguaggio essenziale per sviluppare applicazioni web
4. Ci sono parecchie opportunità di carriera per gli sviluppatori JavaScript

Imparare JavaScript apre grandi opportunità laddove potrai essere uno sviluppatore frontend, backend, o per piattaforme mobili.

Praticamente, imparare JavaScript apre la porta ad avanzamenti di carriera in campo informatico.

1.2 - JavaScript vs Java

All'inizio, JavaScript era in realtà chiamato LiveScript. È stato rinominato in JavaScript perché Java era un linguaggio di programmazione molto popolare.

Poiché la maggior parte degli sviluppatori di software aveva già familiarità con Java, si pensava che il nome JavaScript aiutasse a commercializzare JavaScript come un ottimo linguaggio di programmazione e attirasse l'interesse degli sviluppatori in quel momento.

Giusto per essere chiari, JavaScript e Java sono due linguaggi di programmazione completamente diversi. Non è necessario conoscere Java per imparare JavaScript (o viceversa). :)

2 - Come preparare il tuo computer

Per scrivere un programma usando JavaScript, devi installare 2 strumenti gratuiti che sono disponibili su tutti i sistemi operativi.

Il primo strumento da installare è Visual Studio Code

2.1 - Come installare VSCode

Visual Studio Code o VSCode in breve, è un programma di editor testi creato allo scopo di scrivere del codice. Oltre a essere gratuito, VSCode è open source e disponibile su tutti i maggiori sistemi operativi.

Puoi usare VSCode su Windows, macOS e Linux, quindi se non hai un editor testi nel tuo computer adatto per la programmazione, consiglio di installare VSCode.

Ora che hai un editor testi per scrivere codice JavaScript, ti serve un software per eseguire il codice. Andremo a installare Node.js.

2.2 - Come installare Node.js

Per eseguire JavaScript al di fuori del browser, devi installare Node.js, che è essenzialmente un esecutore di codice JavaScript.

Vai semplicemente al sito di Node.js  e scarica l'ultima versione di tipo LTS (supporto di lunga durata) adatta al tuo computer. Una volta scaricato, installalo nel tuo sistema.

Devi eseguire Node.js usando la console, quindi apri il tuo prompt dei comandi (windows) o il tuo terminale (macOS/Linux) ed esegui il seguente comando:

node -v

Questo comando stamperà nella console la versione del tuo Node.js appena installato.

3 - Breve introduzione alla console

La console è un'interfaccia basata su testo che puoi utilizzare per digitare ed eseguire comandi sul tuo computer. Su Windows, si chiama Prompt dei Comandi. Su macOS e Linux è nota come Terminale.

Non utilizzerai tutti i comandi disponibili all'interno della console. In effetti, devi solo conoscere 7 comandi di base che ti consentono di eseguire il codice JavaScript.

Innanzitutto, apri il programma della console sul tuo computer e, per i sistemi Linux e macOs digita il comando pwd:

pwd

Questo è il comando che usi per trovare in quale directory il tuo terminale si trova attualmente.  pwd sta per "print working directory" (stampa directory di lavoro).

Su Windows il comando da utilizzare per trovare la directory di lavoro è cd:

cd

Per cambiare la directory di lavoro devi digitare il comando cd seguito dal percorso della directory.

Ecco un esempio per spostarsi su una directory figlia (scendere di un livello):

cd nome_directory/nome_sotto_directory

Per spostarsi alla directory genitore, (risalire di un livello) aggiungi  .. al comando cd:

cd ..

Per risalire più di un livello di directory usa  ../..

Per pulire la tua console dai comandi e dai risultati degli stessi, per i sistemi Linux e macOs usa il comando clear:

clear

Per il Prompt dei Comandi di Windows digita il comando cls:

cls

Per stampare l'elenco di file e directory nella directory corrente, per i sistemi Linux e macOs esegui il comando ls:

ls

Per il Prompt dei Comandi di Windows digita dir:

dir

Per creare un nuovo file, per Linux e macOS usa il comando touch seguito dal nome del file e dall'estensione:

touch index.js

per il Prompt dei Comandi di Windows usa il comando type in questo modo:

type nul > index.js

I comandi qui sopra creano un nuovo file JavaScript vuoto chiamato index.js nella tua directory di lavoro corrente.

Per creare una nuova directory, per i sistemi Linux e macOs usa il comando mkdir seguito dal nome della directory:

mkdir mio_progetto

Per il Prompt dei Comandi di Windows digita il comando md seguito dal nome della directory:

md mio_progetto

Per eseguire JavaScript usando Node.js, digita node seguito dal nome del file, in questo modo:

node index.js

Vedrai un eventuale risultato dell'elaborazione del codice nella stessa console.

Ci sono molte cose che puoi fare con la console ma per eseguire solo codice JavaScript questi 7 comandi dovrebbero essere sufficienti .

Andiamo ora a eseguire il tuo primo programma JavaScript!

4 - È ora di dire Hello World!

È ora di eseguire il tuo primo programma JavaScript usando Node.

Dalla console, crea un nuovo file JavaScript chiamato index.js.

# Per sistemi Linux e MacOs
touch index.js

rem Per sistemi Windows
type > nul index.js

Poi apri il file usando VSCode (code index.js ) e inserisci al suo interno la seguente riga di codice:

console.log("Hello World!");

Ritorna alla console, ed esegui questo script con Node:

node index.js

Nella console dovrebbe essere eseguito il file index.js, che stamperà "Hello World!".

Hai appena eseguito il tuo primo programma JavaScript usando Node.js. Eccellente!

Quando esegui il comando node index.js il programma Node.js inizia a leggere lo script riga per riga, dall'inizio alla fine.

Il programma node vede che hai scritto console.log seguito da parentesi (), quindi sa che gli stai chiedendo di stampare qualcosa. Il programma quindi legge ciò che hai inserito tra parentesi e lo stampa sulla console.

Nel tuo VSCode o in un altro programma di editor di testo, dovresti vedere diverse parti del tuo codice evidenziate con colori diversi. Questa è una funzionalità dell'editor di testo chiamata colorazione della sintassi ed è davvero utile per aiutarti a distinguere le diverse parti del codice.

La parola log è una funzione, quindi viene presentata in un colore, mentre le parole tra parentesi hanno un altro colore.

Una funzione è semplicemente un pezzo di codice utilizzato per eseguire un determinato compito. La funzione log() viene utilizzata per "stampare" qualsiasi cosa tu inserisca tra parentesi.

D'altra parte, la parola chiave console è un oggetto, ovvero una entità autonoma che dà accesso a determinate funzionalità.

Impareremo di più su funzioni e oggetti in seguito. Per ora, ricorda solo che l'istruzione console.log() viene utilizzata per stampare cose sulla console.

Successivamente, inizieremo con l'apprendimento della struttura del codice JavaScript.

5 - Struttura del codice

Un programma per computer è costituito da una serie di pezzi di codice scritti in un file di testo. Questi file di testo vengono quindi eseguiti tramite un software progettato appositamente per l'esecuzione del codice. Il software Node.js che hai scaricato in precedenza è lo strumento che elabora il codice JavaScript.

Prima di proseguire, cerchiamo di capire la struttura del codice.

5.1 - Istruzioni

Un'istruzione è un singolo comando che il computer deve eseguire. Pensala come una frase, ma per i computer. Possiamo terminare un'istruzione utilizzando un punto e virgola ; proprio come possiamo terminare una frase usando un punto .

Puoi scrivere più istruzioni in una singola riga, ma la convenzione è di scrivere un'istruzione per riga:

// Questo è difficile da leggere
console.log("Hello World!"); console.log("Sto imparando JavaScript");

// Adesso è meglio
console.log("Hello World!");
console.log("Sto imparando JavaScript");

Ogni istruzione è l'espressione di un'azione che deve essere eseguita dal software che esegue il codice.

5.2 - Commenti

In programmazione, i commenti sono testi che usiamo per comunicare il contesto del codice scritto nel file.

Per scrivere un commento in JavaScript, devi aggiungere due barre // prima del testo del commento, come mostrato di seguito:

// Questo è un commento
// Anche questo è un commento

// Qui sotto si stampano due righe di istruzioni
console.log("Hello World!");
console.log("Sto imparando JavaScript");

I commenti vengono ignorati dall'elaboratore del linguaggio, pertanto è possibile utilizzare i commenti per disabilitare parte del codice senza doverlo eliminare.

Il codice seguente mostra come disabilitare la seconda istruzione di stampa:

console.log("Hello World!");
// console.log("Sto imparando JavaScript");

5.3 - Flusso di esecuzione

Un elaboratore di linguaggio come Node.js esegue le istruzioni con un approccio dall'alto verso il basso. L'istruzione scritta nella prima riga verrà eseguita prima di quella della seconda riga, quindi proseguirà fino all'ultima riga:

console.log("Hello World!");
console.log("Sto imparando JavaScript");

// Stampa di numeri
console.log(1);
console.log(2);
console.log(3);

Risultato:

Hello World!
Sto imparando JavaScript
1
2
3

Se vuoi stampare i numeri prima del testo, devi spostare le corrispondenti righe con le istruzioni  console.log() all'inizio.

5.4 - Esercizio nr. 1

Cerca di stampare il tuo nome, età, occupazione sulla console.

Il risultato dovrebbe assomigliare a questo:

Mario Rossi
19
Studente

Ora che hai appreso la struttura base del codice di JavaScript continuiamo imparando le variabili.

6 - Variabili

Prima di spiegare cos'è una variabile, modifica il codice che hai scritto nel file index.js come segue:

let message = "Hello World!"
console.log(message)

Quindi esegui il codice utilizzando il comando node index.js. Vedrai lo stesso risultato di quando hai scritto il messaggio "Hello World!" direttamente all'interno della funzione console.log(). Come può essere?

Questo perché  message scritto nel codice sopra è una variabile.

Nella programmazione, una variabile è semplicemente un nome che dai a un valore in modo che tu possa accedere a quel valore in un secondo momento. Puoi pensare a una variabile come a un'etichetta che può essere associata a un determinato valore, quindi puoi fare riferimento al valore usando l'etichetta.

Per dichiarare una variabile, devi digitare la parola chiave let seguita dal nome della variabile.

La prima riga del codice indica a JavaScript di associare la variabile message al valore "Hello World!":

let message = "Hello World!"

Nella seconda riga, viene indicato a JavaScript di stampare il valore di message, ed è esattamente quello che fa.

Puoi modificare il valore della tua variabile assegnandole un altro valore come segue:

message = "Hello World!"
print(message)
message = "Bel tempo oggi!"
print(message)

Esegui il file e vedrai due righe stampate come risultato:

Hello World!
Bel tempo oggi!

Le variabili vengono utilizzate per fare riferimento ai dati in modo da poter utilizzare gli stessi dati più volte nel programma.

Successivamente, vedremo alcune regole per la denominazione delle variabili.

6.1 - Denominazione

JavaScript ha alcune regole di denominazione che devi conoscere per evitare errori di denominazione.

I nomi delle variabili possono contenere solo lettere dell'alfabeto, numeri e trattini bassi (_). Ciò significa che puoi denominare la tua variabile message, message_1, message_2.

Il primo carattere del nome della variabile non deve essere un numero. message_1 va bene. 1_message no.

Non puoi utilizzare parole chiave riservate come console perché vengono utilizzate da JavaScript per eseguire determinate operazioni. Ci sono molte altre parole chiave usate da JavaScript che imparerai nei seguenti capitoli come if, for e while.

I nomi delle variabili fanno distinzione tra maiuscole e minuscole, il che significa che Message, MESSAGE e message possono essere utilizzati per creare tre diverse variabili. Ma ovviamente, non consiglio di usare nomi simili in quanto crea confusione.

A volte è necessaria più di una parola per dichiarare il nome di una variabile. JavaScript ha due convenzioni di denominazione utilizzate da tutti gli sviluppatori:

1. camelCase
2. snake_case

Il camel case è una convenzione di denominazione che usa la lettera maiuscola per il primo carattere della parola successiva. Ecco un esempio:

let laMiaStupendaVariabile

La convenzione di denominazione snake case usa un trattino basso per separare le parole. Ecco un esempio:

let la_mia_stupenda_variabile

Entrambe sono convenzioni di denominazione accettabili, ma dovresti adottarne solo una nel tuo codice per evitare confusione.

6.2 - Il tipo di variabile const

Ci sono situazioni nelle quali è necessario memorizzare un valore che non cambia mai in una variabile.

Il tipo di variabile const è una variabile che non cambia il suo valore finché il programma è in esecuzione. L'eventuale successiva modifica del valore di una costante produrrà un errore.

In JavaScript, una variabile costante viene dichiarata utilizzando la parola chiave const.

Quanto segue mostra come dichiarare 2 costanti in JavaScript:

const FILE_SIZE_LIMIT = 2000
const MAX_SPEED = 300

La convenzione di denominazione per una costante consiste nell'usare tutte lettere maiuscole, sebbene si possano anche utilizzare lettere minuscole. Il maiuscolo è solo uno standard per far risaltare maggiormente le costanti.

6.3 - Il tipo di variabile var

La parola chiave var viene utilizzata per dichiarare variabili con ambito globale. Questa era l'unica parola chiave che potevi utilizzare per dichiarare le variabili prima che JavaScript rilasciasse le nuove let e const nel 2015.

Attualmente, dovresti evitare di usare var se puoi, poiché var può introdurre bug che puoi evitare usando al suo posto let.

Per mostrarti cosa intendo, considera il seguente esempio:

if(true) {
    var name = "Nathan";
}

console.log(name)

Il codice qui sopra stamperà correttamente la variabile name, ma in realtà non dovrebbe perché la variabile name è dichiarata all'interno del blocco if.

Questo perché qualsiasi variabile dichiarata utilizzando  var è accessibile ovunque.  L'ambito di tale variabile è globale.

Al contrario, la parola chiave let ha un ambito di blocco, il che significa che la variabile è accessibile solo dal blocco nel quale è stata definita e da tutti i suoi blocchi figli.

Ma perché preoccuparsi di definire l'ambito della variabile? Questo perché quando si hanno centinaia o migliaia di righe di codice, può diventare frustrante tracciare un errore che si verifica a causa di variabili globali.

C'è un principio nello sviluppo del software chiamato "principio di minima esposizione", il che significa che non esponi alcuna parte del tuo programma che non sia necessaria.

Attribuire un ambito di blocco a una variabile garantisce che la stessa sia esposta e accessibile solo nelle parti del tuo codice che richiedono la variabile.

Una variabile dichiarata utilizzando let è identica a una variabile dichiarata utilizzando var ad eccezione del livello di ambito.

if(true) {
    let name = "Nathan";
}

console.log(name)  // Error: name is not defined (errore: name non è definito)

Ciò significa anche che ora hai  var, let e const per dichiarare una variabile. Quale usare?

In generale, puoi prima dichiarare una variabile con const. Quando scrivi il codice dell'applicazione e ti rendi conto che è necessario modificare l'assegnazione della variabile, puoi modificare la dichiarazione in let.

Se sai fin dall'inizio che il valore della variabile cambierà, puoi usare let immediatamente. Basta non usare var oggi o qualcuno potrebbe arrabbiarsi con te.

6.4 - Esercizio nr. 2

Scrivi un programma con tre variabili, ciascuna con il seguente valore:

1. La prima variabile (nome) contiene il tuo nome
2. La seconda variabile (eta) contiene la tua età
3. La terza variabile (occupazione) contiene la tua occupazione

Poi stampa le variabili usando il metodo console.log(). Ecco un esempio del risultato:

Mario Rossi
Studente
19

Il modo in cui usi le variabili per creare un programma che faccia quello che desideri è una delle abilità più importanti che puoi avere come programmatore.

Ma prima di saperne di più su come utilizzare le variabili, impariamo a conoscere i tipi di dato in JavaScript.

7 - Tipi di Dato Base

I tipi di dato sono semplicemente definizioni per diversi tipi di dato noti a un linguaggio di programmazione.

Un tipo di dato contiene specifiche su ciò che puoi e non puoi fare con quel dato.

Per mostrarti un semplice esempio, sono sicuro che sei d'accordo sul fatto che 2 + 2 = 4, giusto?

Bene, anche JavaScript la pensa allo stesso modo:

console.log(2 + 2);

// Risultato: 4

Ma cosa succede se cerchi di aggiungere delle lettere a un numero, come mostrato qui sotto?

console.log(2 + "ABC");

Risultato:

2ABC

Aggiungere lettere e numeri insieme farà sì che JavaScript concateni o unisca i valori.

In questa sezione, imparerai i tipi di dato base che JavaScript conosce:

• String (Stringa)
• Number (Numero)
• Boolean (Booleano)
• Null
• Undefined

Vedrai anche come i vari tipi di dato si comportano con gli operatori come  +, mostrato nell'esempio qui sopra.

Iniziamo con le stringhe.

7.1 - Stringhe

Una stringa è semplicemente un tipo di dato definito da una serie di caratteri.

Hai visto un esempio di stringa precedentemente quando hai chiamato la funzione console.log() per stampare un messaggio:

let message = "Hello, Sunshine!";
console.log(message); // Hello, Sunshine!

Una stringa deve essere racchiusa tra apici. Puoi usare apici singoli o doppi, ma devono corrispondere.

Otterrai un errore quando usi apici differenti come in questo caso:

let message = "Hello'; 
// Invalid or unexpected token (token non valido o inatteso)

Puoi unire due o più stringhe in una con il simbolo di addizione +. Non dimenticare di aggiungere uno spazio dopo la stringa iniziale oppure avrai una stringa non divisa da spazi!

let message = "Hello " + "and " + "Goodbye!";
console.log(message);

// Risultato: Hello and Goodbye!

Quando stampi il valore di una variabile, puoi anche aggiungere direttamente stringhe nella funzione console.log() in questo modo:

let message = "Ciao, Dave!";

console.log("Il messaggio è: " + message);

// Risultato: Il messaggio è: Ciao, Dave!

Questo è particolarmente utile quando hai più stringhe da stampare con una sola istruzione console.log, così:

let name = "John";
let topic = "JavaScript";

console.log(name + " sta imparando " + topic + " oggi");

// Risultato: John sta imparando JavaScript oggi

Puoi anche usare il formato template di stringa, che ti consente di incorporare il contenuto di una variabile direttamente all'interno della stringa, in questo modo:

let name = "John";
let topic = "JavaScript";

console.log(`${name} sta imparando ${topic} oggi`);

// Risultato: John sta imparando JavaScript oggi

Per utilizzare il formato template di stringa, è necessario utilizzare il carattere backtick (`) per racchiudere la stringa anziché le virgolette.

La variabile è incorporata nella stringa utilizzando il simbolo del dollaro e le parentesi graffe, così: ${variabile}.

In questo modo, JavaScript sa che stai facendo riferimento a una variabile all'interno della stringa.

Quando si hanno più stringhe da stampare su una singola riga, il formato template di stringa è più conveniente perché non è necessario interrompere la stringa con virgolette e concatenazioni.

Le stringhe possono anche rappresentare numeri. Racchiudi i numeri tra virgolette come segue:

let score = "10" + "30";
console.log(score);

// Risultato: 1030

Quando unisci due numeri in formato stringa con il simbolo +, JavaScript unirà i due numeri invece che eseguire l'operazione aritmetica dell'addizione.

Ecco come funzionano le stringhe in JavaScript. Ora vediamo i numeri.

7.2 - Numeri (interi e con virgola mobile)

Il tipo di dato Number rappresenta diversi tipi di numero, che, in JavaScript possono essere:

• Interi (integer)
• Con virgola mobile (float)

Un intero è un numero senza parte decimale e frazioni. Di seguito due esempi di interi,  x e y:

let x = 1;
let y = 2;

console.log(x + y);

// Risultato: 3

I numeri con virgola mobile, d'altro canto, rappresentano numeri con cifre decimali, come questi:

let f = 1.2;
let z = 2.35;

console.log(f + z);

// Risultato: 3.55

Per creare un numero con virgola mobile, devi scrivere il numero usando il separatore . per definire la parte decimale.

Con i tipi number, puoi eseguire operazioni aritmetiche come addizione +, sottrazione -, divisione / e moltiplicazione * , proprio come se stessi usando una calcolatrice.

7.3 - Booleani

Il booleano è un tipo che rappresenta i valori  vero (true ) e falso (false).

Puoi pensare a un booleano come a un interruttore della luce che può trovarsi solo in una delle due posizioni: acceso o spento.

Così è con i valori booleani nei linguaggi di programmazione. Vengono utilizzati quando JavaScript deve prendere una decisione: andare a sinistra o a destra? Giusto o sbagliato?
Ecco come creare valori booleani in JavaScript:

let on = true;
let off = false;

Questo tipo di dati è usato frequentemente quando devi prendere una decisione usando un controllo di flusso. Vedrai come i valori booleani sono molto utili per lo sviluppo di un programma più tardi nel capitolo 9.

7.4 - Undefined

Undefined è un tipo di dato usato per rappresentare una variabile alla quale non è stato assegnato ancora alcun valore.

Ogni volta che dichiari una variabile senza assegnarle un valore, il valore undefined le viene assegnato. Per esempio:

let first_name;

console.log(first_name); // undefined

Puoi anche assegnare  undefined esplicitamente a una variabile in questo modo:

let last_name = undefined;

In genere questo non è raccomandato in quanto JavaScript dispone di un altro valore, detto null, che viene usato per contrassegnare una variabile che non ha valore.

7.5 - Null

Il valore null è un tipo speciale di dato che rappresenta un valore vuoto o sconosciuto. Ecco come assegni null a una variabile:

let first_name = null;

Il codice qui sopra indica che il valore di first_name è vuoto o sconosciuto.

A questo punto, potresti pensare, qual è la differenza tra undefined e null? Sembra che abbiano uno scopo simile.

Hai ragione. Sia undefined che null sono valori che non rappresentano nulla e altri linguaggi di programmazione di solito ne hanno solo uno, ovvero null.

In JavaScript, il valore undefined è riservato come valore predefinito quando viene dichiarata una variabile, mentre null significa che assegni intenzionalmente un valore "vuoto" per la variabile.

Questa leggera differenza sarà evidenziata in seguito quando imparerai a conoscere le funzioni nel capitolo 13.

Per ora, tieni presente che JavaScript tratta undefined come valore vuoto "predefinito" e null come valore vuoto "intenzionale".

8 - Conversione di tipo e coercizione di tipo

A volte, potresti voler convertire un tipo di dato in un altro in modo che il programma funzioni come previsto.

Ad esempio, supponi di dover convertire una stringa in un numero intero in modo da poter eseguire un'addizione tra numeri.

Se hai uno dei numeri come stringa, JavaScript li unisce invece di aggiungerli:

let x = "7";
let y = 5;

console.log(x + y); // 75

Per aggiungere i due numeri propriamente, devi convertire il valore della variabile x in un intero.

La modifica di un tipo di dato in un altro è anche nota come conversione di tipo (type casting). Ci sono tre funzioni che sono frequentemente usate per eseguire le conversioni di tipo:

• Number()
• String()
• Boolean()

Come si evince dal loro nome (in inglese - n.d.t.) queste funzioni di conversione di tipo tentano di convertire un qualsiasi valore specificato all'interno delle parentesi nel tipo con lo stesso nome della funzione.

Per convertire una stringa in un intero puoi usare la funzione int():

let x = "7";
let y = 5;

// Converte x in un intero
x = Number(x);

console.log(x + y); // 12

La funzione  String() converte un valore di un altro tipo in stringa. Se chiami String(true), otterrai il valore di ritorno 'true'.

Passare un valore dello stesso tipo a queste funzioni non ha effetto e si otterrà lo stesso valore in ritorno.

8.1 - Coercizione di tipo

In JavaScript, la coercizione di tipo è un processo in cui un valore di un tipo viene implicitamente convertito in un altro tipo.

Questo viene fatto automaticamente da JavaScript in modo che il tuo codice non causi un errore. Ma come vedrai in questa sezione, la coercizione di tipo può effettivamente causare un comportamento indesiderato nel programma.

Consideriamo cosa succede quando esegui un'addizione tra un numero e una stringa in JavaScript:

console.log(1 + "1");

Come hai visto in precedenza, JavaScript considererà il numero come una stringa e unirà i due valori come "11" invece di sommarli (1 + 1 = 2)

Devi sapere che altri linguaggi di programmazione non rispondono allo stesso modo.

Linguaggi come Ruby o Python risponderanno interrompendo il programma e fornendo un errore come feedback. Risponderanno con qualcosa del tipo "Impossibile eseguire l'addizione tra un numero e una stringa".

Ma JavaScript lo vedrà e dirà: "Non posso eseguire l'operazione che hai richiesto così com'è, ma posso farlo se il numero 1 viene convertito in una stringa, quindi lo farò."

E questa è esattamente la coercizione di tipo. JavaScript rileva che non sa come eseguire il tuo codice, ma non interrompe il programma e risponde con un errore.

Viceversa, cambierà il tipo di dato di uno dei valori senza dirtelo.

Sebbene la coercizione di tipo non causi errori, il risultato è in realtà qualcosa che non vuoi neanche tu.

8.1.1 - Regole della coercizione di tipo

Le regole della coercizione di tipo non sono mai state dichiarate chiaramente da nessuna parte, ma ho trovato alcune regole provando io stesso vari pezzi di codice stupidi.

Sembra che JavaScript converta per prima cosa i tipi di dati in stringa quando trova diversi tipi di dato:

1 + "1" // "11"
[1 ,2] + "1" // "1,21"
true + "1" // "true1"

Ma l'ordine dei valori ha importanza quando hai un oggetto. Se l'oggetto viene prima sarà sempre ritornato un 1 numerico:

{ a: 1 } + "1" // 1
"1" + { a: 1 } // "1[object Object]"
true + { a: 1 } // "true[object Object]"
{ a: 1 } + 1 // 1

JavaScript può calcolare tra tipi booleani e numerici in quanto i valori booleani sono true e false che implicitamente corrispondono ai valori numerici di 1 e 0:

true + 1 // 1+1 = 2
false + 1 // 0+1 = 1
[1,2] + 1 // "1,21"

La coercizione di tipo viene sempre effettuata implicitamente. Quando assegni il valore in fase di dichiarazione della variabile, il tipo della variabile non verrà mai modificato al di fuori dell'operazione:

let myNumber = 1;
console.log(myNumber + "1"); // stampa 11
console.log(myNumber); // stampa sempre il numero 1 e non la stringa

Puoi provare a cercare qualche altro caso di tua iniziativa, ma spero che tu abbia compreso cos'è la coercizione di tipo e come funziona adesso.

8.1.2 - Perché dovresti evitare la coercizione di tipo

Gli sviluppatori JavaScript sono generalmente divisi in due fazioni quando si parla di coercizione di tipo:

• Quelli che pensano che sia una funzionalità
• Quelli che pensano che sia un bug

Se me lo chiedi, ti consiglierei di evitare sempre di usare la coercizione di tipo nel tuo codice.

Il motivo è che non ho mai trovato un problema in cui è richiesta la coercizione di tipo per la soluzione, e quando devo convertire un tipo in un altro, è sempre meglio farlo in modo esplicito:

let price = "50";
let tax = 5;

let totalPrice = Number(price) + Number(tax);

console.log(totalPrice);

L'uso di funzioni di conversione di tipo esplicite come Number() e String() renderà il tuo codice chiaro e trasparente. Non è necessario indovinare il tipo di dati corretto richiesto nel programma.

La coercizione di tipo è una delle caratteristiche uniche di JavaScript che può confondere i principianti, quindi è bene chiarirlo presto.

Successivamente impareremo gli operatori JavaScript.

9 - Operatori

Come suggerisce il nome, gli operatori sono simboli che puoi utilizzare per eseguire operazioni sui tuoi dati.

Hai visto alcuni esempi di utilizzo dell'operatore più + per unire più stringhe e sommare due numeri insieme. Naturalmente, JavaScript ha più di un operatore, come scoprirai in questo capitolo.

Poiché in precedenza hai appreso i tipi di dati e la conversione di tipo, imparare gli operatori dovrebbe essere relativamente semplice.

9.1 - Operatori Aritmetici

Gli operatori aritmetici sono usati per eseguire operazioni matematiche come addizioni e sottrazioni.

Questi operatori sono frequentemente usati con tipi di dato numerico. Ecco un esempio:

console.log(10 - 3); // 7
console.log(2 + 4); // 6

Ci sono in totale 8 operatori aritmetici in JavaScript:

Questi operatori sono piuttosto semplici, quindi puoi provarli da solo.

Come hai visto nella sezione precedente, l'operatore + può essere utilizzato anche sui dati di tipo String per unire più stringhe in una sola:

let message = "Ciao " + "umano!";
console.log(message); // Ciao umano!

Quando aggiungi un numero e una stringa, JavaScript eseguirà una coercizione di tipo e tratterà il valore numerico come un valore stringa:

let sum = "Ciao " + 89;
console.log(sum); // Ciao 89

L'utilizzo di qualsiasi altro operatore aritmetico con le stringhe farà sì che JavaScript restituisca un valore NaN.

9.2 - Operatori di assegnazione

L'operatore successivo da apprendere è l'operatore di assegnazione, rappresentato dal segno di uguale =.

In JavaScript, l'operatore di assegnazione viene utilizzato per assegnare dati o un valore a una variabile.

Hai già visto alcuni esempi di utilizzo dell'operatore di assegnazione, quindi ecco un promemoria:

// Assegna il valore stringa 'Hello' alla variabile 'message'
let message = "Hello";

// Assegna il valore booleano true alla variabile 'on'
let on = true;

Potresti aver notato che il segno uguale ha un significato leggermente diverso in programmazione che in matematica, e hai ragione!

L'operatore di assegnazione non viene utilizzato per confrontare se un numero è uguale a un altro numero nella programmazione.

Se vuoi fare questo tipo di confronto, devi usare l'operatore "uguale a" ==.

Gli operatori di assegnazione possono anche essere combinati con operatori aritmetici, in modo da poter aggiungere o sottrarre valori dall'operando di sinistra.

Vedi la tabella seguente per i tipi di operatore di assegnazione:

Ora esaminiamo gli operatori di confronto.

9.3 - Operatori di confronto

Gli operatori di confronto vengono utilizzati per confrontare due valori. Gli operatori in questa categoria restituiranno valori booleani: vero (true) o falso (false).

La tabella seguente mostra tutti gli operatori di confronto disponibili in JavaScript:

Ecco alcuni esempi di utilizzo di questi operatori:

console.log(9 == 9); // true

console.log(9 != 20); // true

console.log(2 > 10); // false

console.log(2 < 10); // true

console.log(5 >= 10); // false

console.log(10 <= 10); // true

Anche gli operatori di confronto possono essere usati per confrontare stringhe in questo modo:

console.log("ABC" == "ABC"); // true

console.log("ABC" == "abc"); // false

console.log("Z" == "A"); // false

I confronti tra stringhe fanno distinzione tra maiuscole e minuscole, come mostrato nell'esempio precedente.

JavaScript ha anche due versioni di ciascun operatore di confronto: loose e strict (rigoroso).

In modalità strict, JavaScript confronterà i tipi senza eseguire una coercizione di tipo.

È necessario aggiungere un altro simbolo uguale = all'operatore come segue

console.log("9" == 9); // true
console.log("9" === 9); // false

console.log(true == 1); // true
console.log(true === 1); // false

Dovresti usare gli operatori di confronto rigorosi a meno che tu non abbia una ragione specifica per non farlo.

9.4 - Operatori logici

Sono usati per verificare se una o più espressioni vengono valutate come vere (true) o false (false).

JavaScript ha tre operatori logici:

Questi operatori possono ritornare solo valori booleani. Per esempio puoi determinare se 7 sia maggiore di 2 e 5 sia maggiore di 4:

console.log(7 > 2 && 5 > 4); // true

Questi operatori logici seguono le leggi della logica matematica:

1. && operatore E - se una qualunque espressione ritorna false, il risultato è false
2. || operatore O - se una qualunque espressione ritorna true, il risultato è true
3. ! operatore NON - nega l'espressione, ritornando l'opposto.

Facciamo un piccolo esercizio. Cerca di eseguire queste istruzioni sul tuo computer. Sei in grado di indovinare i risultati?

console.log(true && false);

console.log(false || false);

console.log(!true);

Questi operatori logici tornano utili quando devi verificare che uno specifico requisito sia soddisfatto nel tuo codice.

9.5 - Operatore typeof

JavaScript ti consente di verificare il tipo di dato usando l'operatore typeof. Per usarlo devi chiamarlo prima di specificare l'oggetto della verifica:

let x = 5;
console.log(typeof x) //  'number'

console.log(typeof "Nathan") // 'string'

console.log(typeof true) // 'boolean'

L'operatore typeof restituisce il tipo di dato sotto forma di stringa. Il tipo 'number' rappresenta sia i tipi interi che con virgola mobile (float), 'string' e 'boolean'  rappresentano i rispettivi tipi.

9.6 - Esercizio nr. 3

Cerca di indovinare i risultati per queste operazioni:

console.log(19 % 3);
console.log(10 == 3);
console.log(10 !== "10");
console.log(2 < "10");
console.log("5" > 2);
console.log((false && true) || false);

console.log(19 % 3);
console.log(10 == 3);
console.log(10 !== "10");
console.log(2 < "10");
console.log("5" > 2);
console.log((false && true) || false);

10 - Array

Un array è un tipo di dato oggetto che può essere usato per contenere più di un valore. Un array può essere un elenco di stringhe, numeri, booleani, oggetti oppure un misto di tutti questi.

Per creare un array, devi usare le parentesi quadre [] e separare gli elementi usando una virgola.

Ecco come creare un elenco di stringhe:

let birds = ['Owl', 'Eagle', 'Parrot', 'Falcon'];

Puoi pensare a un array come a un elenco di elementi, ciascuno memorizzato in uno scomparto di un armadietto:

Puoi anche dichiarare un array vuoto, senza elementi:

let birds = [];

Un array può anche contenere elementi di tipo diverso:

let mixedArray = ['Bird', true, 10, 5.17]

L'array qui sopra contiene una stringa, un booleano, un intero e un numero con virgola mobile.

10.1 - Posizione dell'indice

JavaScript ricorda la posizione degli elementi all'interno di un array. La posizione di un elemento è anche chiamata indice numerico.

Tornando all'esempio dell'armadietto, puoi pensare ai numeri di indice come ai numeri degli scomparti dell'armadietto. Il numero di indice inizia da 0 come segue:

Per accedere o modificare un elemento di un array, devi aggiungere al nome della variabile che rappresenta l'array la notazione [x] dove x è il numero di indice dell'elemento. Ecco un esempio:

// Accede al primo elemento dell'array
myArray[0];

// Accede al secondo elemento dell'array
myArray[1];

Supponi tu voglia stampare la stringa 'Owl' dall'array birds. Ecco come puoi fare:

let birds = ['Owl', 'Eagle', 'Parrot', 'Falcon'];

console.log(birds[0]); // Owl

Ecco qua. È necessario digitare il nome dell'array, seguito dal numero di indice racchiuso tra parentesi quadre.

È inoltre possibile assegnare un nuovo valore a un elemento con indice specifico utilizzando l'operatore di assegnazione.

Sostituiamo 'Parrot' con 'Vulture':

let birds = ['Owl', 'Eagle', 'Parrot', 'Falcon'];
birds[2] = 'Vulture';

console.log(birds);
// ['Owl', 'Eagle', 'Vulture', 'Falcon']

Visto che l'indice dell'array inizia da 0, il valore 'Parrot' è conservato alla posizione di indice 2, non 3.

10 - 2 Metodi speciali per la manipolazione di array

Poiché l'array è un oggetto, è possibile chiamare i metodi forniti da JavaScript per manipolare i valori dell'array.

Ad esempio, puoi utilizzare il metodo push() per aggiungere un elemento alla fine dell'array:

let birds = ['Owl', 'Eagle'];

birds.push('Sparrow');

console.log(birds);
// ['Owl', 'Eagle', 'Sparrow']

Un altro metodo chiamato pop() può essere usato per eliminare l'elemento alla fine dell'array:

let birds = ['Owl', 'Eagle', 'Sparrow'];

birds.pop();

console.log(birds);
// ['Owl', 'Eagle']

Il metodo unshift() si può usare per inserire un elemento all'inizio dell'array  (posizione di indice 0):

let fishes = ['Salmon', 'Goldfish', 'Tuna'];

fishes.unshift('Sardine');

console.log(fishes);
// ['Sardine', 'Salmon', 'Goldfish', 'Tuna']

Di contro il metodo shift() può essere usato per rimuovere l'elemento all'inizio dell'array (posizione di indice 0):

let fishes = ['Salmon', 'Goldfish', 'Tuna'];

fishes.shift();

console.log(fishes);
// ['Goldfish', 'Tuna']

Il metodo indexOf() può essere usato per trovare e ritornare la posizione di indice di un elemento in un array.

Questo metodo ritornerà -1 quando l'elemento non viene trovato nell'array:

let fishes = ['Salmon', 'Goldfish', 'Tuna'];

let pos = fishes.indexOf('Tuna');

console.log(pos); // 2

Per ottenere la dimensione di un array puoi accedere alla sua proprietà length:

let fishes = ['Salmon', 'Goldfish', 'Tuna'];

console.log(fishes.length); // 3

Nota che non aggiungiamo parentesi accanto a length qui sopra. Questo perché length è una proprietà dell'oggetto array e non un metodo.

Impareremo di più sugli oggetti prossimamente.

10.3 - Esercizio nr.  4

Crea un array denominato colori che includa i colori "rosso", "verde" e "blu".

Poi aggiungi il colore "nero" dopo l'ultimo indice dell'array. Quindi stampa l'array.

Successivamente, rimuovi il valore "rosso" e scambia la posizione di "verde" e "blu". Stampa nuovamente l'array.

Infine, aggiungi il colore "giallo" all'inizio dell'array, quindi stampalo.

Il risultato dovrà essere il seguente:

[ 'rosso', 'verde', 'blu', 'nero' ]
[ 'blu', 'verde', 'nero' ]
[ 'giallo', 'blu', 'verde', 'nero' ]

Devi modificare l'array originale usando i metodi illustrati in questo capitolo.

11 - Flussi di controllo (condizionali)

Fino a ora, il codice JavaScript che hai scritto viene eseguito riga per riga dall'alto verso il basso. Ma cosa succede se si desidera eseguire alcune righe di codice solo quando viene soddisfatta una determinata condizione?

Un programma per computer di solito deve tenere conto di molte condizioni diverse che possono verificarsi durante l'esecuzione dello stesso.

Questo è simile a come un essere umano prende decisioni nella propria vita. Ad esempio, hai i soldi per permetterti una vacanza in Giappone? Se sì, vai. In caso contrario, risparmia ulteriormente!

È qui che entra in gioco il flusso di controllo. Il flusso di controllo è una funzionalità in un linguaggio di programmazione che ti consente di eseguire in modo selettivo codice specifico in base alle diverse condizioni che possono verificarsi.

L'utilizzo dei flussi di controllo ti consente di definire più percorsi che un programma può intraprendere in base alle condizioni presenti nello stesso.

Ci sono due tipi di flussi di controllo comunemente usati in JavaScript: condizionali e cicli (loop).
Questa sezione si concentrerà sulle istruzioni condizionali come:

1. L'istruzione if...else
2. L'istruzione switch...case

Imparerai le istruzioni per i cicli nella successiva sezione.

11.1 - Istruzione if...else

L'istruzione if ti consente di creare una parte di programma che viene eseguita solamente se viene soddisfatta una specifica condizione.

La sintassi è la seguente:

if (condizione) {
  // codice da eseguire se la condizione è soddisfatta
}

Vediamo un esempio. Supponiamo che tu voglia andare in vacanza, per cui ti servono 5000 dollari.

Usando l'istruzione if, ecco come verificare se hai abbastanza denaro:

let balance = 7000;

if (balance > 5000) {
  console.log("Hai sufficiente denaro per questo viaggio. Andiamo!");
}

Esegui il codice qui sopra una volta e vedrai la stringa stampata sul terminale.

Ora modifica il valore di balance a 3000 e non otterrai alcuna risposta.

Ciò accade perché il codice all'interno dell'istruzione if viene eseguito solo quando la condizione è vera.

Dopo l'istruzione if, puoi scrivere un'altra riga di codice sotto di essa come segue:

let balance = 7000;

if (balance > 5000) {
  console.log("Hai sufficiente denaro per questo viaggio. Andiamo");
}
console.log("Fine!");

La seconda istruzione console.log() qui sopra verrà eseguita indipendentemente dal valore assegnato alla variabile balance.

Se vuoi che venga eseguita solo quando la condizione if è soddisfatta, metti anche questa riga all'interno delle parentesi graffe:

let balance = 7000;

if (balance > 5000) {
  console.log("Hai sufficiente denaro per questo viaggio. Andiamo");
  console.log("Fine!");
}

Supponiamo ora di dover eseguire del codice solo quando la condizione dell'istruzione if non è soddisfatta.

È qui che entra in gioco l'istruzione else. L'istruzione else viene utilizzata per eseguire il codice solo quando l'istruzione if non è soddisfatta.

Ecco un esempio:

let balance = 7000;

if (balance > 5000) {
  console.log("Hai sufficiente denaro per questo viaggio. Andiamo");
} else {
  console.log("Mi dispiace, non c'è denaro a sufficienza. Risparmia di più!");
}
console.log("Fine!");

Ora modifica il valore di balance in modo che sia inferiore a 5000 e attiverai il blocco else nell'esempio.

JavaScript ha anche l'istruzione else if che ti consente di scrivere un'altra condizione da verificare se la condizione dell'istruzione if non è soddisfatta.

Considera l'esempio seguente:

let balance = 7000;

if (balance > 5000) {
  console.log("Hai sufficiente denaro per questo viaggio. Andiamo!");
} else if (balance > 3000) {
  console.log("Hai denaro solo per una vacanza senza andare troppo lontano!");
} else {
  console.log("Mi dispiace, non c'è denaro a sufficienza. Risparmia di più!");
}
console.log("Fine!");

Quando il valore  di balance è inferiore a 5000, l'istruzione else if verificherà se il valore è superiore a 3000. In tal caso, il programma procederà a consigliarti di fare una vacanza senza spendere troppi soldi per il viaggio.

Puoi scrivere tante istruzioni else if quante necessarie e ognuna verrà eseguita solo se l'istruzione precedente non viene soddisfatta.

Insieme, le istruzioni if..else..else if consentono di eseguire diversi blocchi di codice a seconda della condizione affrontata dal programma.

11.2 - Istruzione switch...case

L'istruzione switch fa parte della sintassi principale di JavaScript che consente di controllare il flusso di esecuzione del codice.

È spesso pensata come un'alternativa all'istruzione if..else in quanto ti dà un codice più leggibile, specialmente quando hai molte condizioni diverse da valutare.

Ecco un esempio di un'istruzione switch funzionante. Spiegherò il codice qui sotto:

let age = 15;
switch (age) {
  case 10:
    console.log("Hai 10 anni");
    break;
  case 20:
    console.log("Hai 20 anni");
    break;
  default:
    console.log("Non hai nè 10 nè 20 anni");
}

Innanzitutto, è necessario passare tra parentesi un'espressione che deve essere valutata dall'istruzione switch. Nell'esempio, la variabile age viene passata come argomento per la valutazione.

Quindi, devi scrivere i valori case che l'istruzione switch cercherà di far corrispondere alla tua espressione. Il valore per case è immediatamente seguito da due punti (:) per contrassegnare l'inizio del blocco case:

case "apple":

Tieni presente il tipo di dati del valore per case che si desidera far corrispondere all'espressione. Se vuoi abbinare una stringa, devi inserire un valore di tipo string. Le istruzioni switch non eseguiranno la coercizione di tipo quando hai un valore di tipo number come argomento ma metti un tipo string per case:

switch (1) {
  case "1":
    console.log("Hello World!");
    break;
}

Il valore di tipo number non corrisponde al valore per case, di tipo string, quindi JavaScript non stamperà nulla nella console.

Lo stesso accade anche per i valori booleani. Il numero 1 non sarà forzato come true e il numero 0 non sarà forzato come false:

switch (0) {
  case true:
    console.log("Hello True!");
    break;
  case false:
    console.log("Bonjour False!");
    break;
  default:
    console.log("No matching case");
}

11.3 - Corpo dell'istruzione switch...case

Il corpo dell'istruzione switch è composto da tre parole chiave:

• case per iniziare un blocco di codice case
• break per impedire all'istruzione switch di eseguire le successive istruzioni case
• default per eseguire una parte di codice qualora non venga trovata alcuna corrispondenza di case per il valore di switch.

Quando la tua espressione trova un case corrispondente, JavaScript eseguirà il codice che segue l'istruzione case finché non trova la parola chiave break. Se ometti la parola chiave break, l'esecuzione del codice continuerà al blocco successivo.

Dai un'occhiata al seguente esempio:

switch (0) {
  case 1:
    console.log("Il valore è uno");
  case 0:
    console.log("Il valore è zero");
  default:
    console.log("Nessuna corrispondenza");
}

Quando esegui il codice qui sopra, JavaScript stamperà:

> "Il valore è zero"
> "Nessuna corrispondenza"

Questo perché senza la parola chiave break, switch continuerà a valutare l'espressione rispetto ai casi rimanenti anche quando è stato già trovato un caso corrispondente.

La tua valutazione switch può corrispondere a più di un caso, quindi la parola chiave break viene comunemente utilizzata per uscire dal processo una volta trovata una corrispondenza.

Infine, puoi anche inserire espressioni come valori di case:

switch (20) {
  case 10 + 10:
    console.log("value is twenty");
    break;
}

Devi tuttavia tenere presente che il valore per un blocco case deve corrispondere esattamente all'argomento di switch.

Uno degli errori più comuni quando si utilizza l'istruzione switch è che si pensa che il valore di case venga valutato come vero o falso.

I seguenti blocchi case non funzioneranno nelle istruzioni switch:

let age = 5;

switch (age) {
  case age < 10:
    console.log("Il valore è minore di 10");
    break;
  case age < 20:
    console.log("Il valore è minore di 20");
    break;
  default:
    console.log("Il valore è maggiore o uguale a 20");
}

Devi ricordarti delle differenze rispetto a come if e case eseguono la valutazione della condizione di verifica:

• Il blocco if verrà eseguito quando la condizione di verifica viene soddisfatta (valutata come true)
• Il blocco case verrà eseguito quando la condizione di verifica corrisponde esattamente a quella data come argomento a  switch

11.4 - Casi d'uso dell'istruzione switch...case

La regola empirica da considerare per scegliere tra if e switch è questa:

Usi switch solo quando il codice risulta complicato da scrivere usando if

Ad esempio, supponiamo di voler scrivere il nome di un giorno della settimana in base al numero del giorno della settimana.

Ecco come puoi scriverlo:

let weekdayNumber = 1;

if (weekdayNumber === 0) {
  console.log("Domenica");
} else if (weekdayNumber === 1) {
  console.log("Lunedì");
} else if (weekdayNumber === 2) {
  console.log("Martedì");
} else if (weekdayNumber === 3) {
  console.log("Mercoledì");
} else if (weekdayNumber === 4) {
  console.log("Giovedì");
} else if (weekdayNumber === 5) {
  console.log("Venerdì");
} else if (weekdayNumber === 6) {
  console.log("Sabato");
} else {
  console.log("Numero di giorno non valido");
}

Non posso sapere tu cosa ne pensi, ma il codice qui sopra sembra decisamente complicato per me! Anche se non vi è nulla di sbagliato in quel codice, puoi abbellirlo usando switch:

let weekdayNumber = 1;

switch (weekdayNumber) {
  case 0:
    console.log("Domenica");
    break;
  case 1:
    console.log("Lunedì");
    break;
  case 2:
    console.log("Martedì");
    break;
  case 3:
    console.log("Mercoledì");
    break;
  case 4:
    console.log("Giovedì");
    break;
  case 5:
    console.log("Venerdì");
    break;
  case 6:
    console.log("Sabato");
    break;
  default:
    console.log("Il numero del giorno non è valido");
}

Quando hai molte condizioni da valutare per lo stesso blocco, puoi probabilmente combinare più condizioni if usando gli operatori logici E (&&) oppure O (||):

let myFood = "Banana";

if (myFood === "Banana" || myFood === "Mela") {
  console.log("Mangia frutta ogni giorno per mantenerti sano.");
}

if (myFood === "Torta al cioccolato"
  console.log("Goditi un dolce regalo.");
}

È possibile sostituire il codice precedente utilizzando l'istruzione switch. La chiave è che devi impilare più case come fosse uno,  in questo modo:

let myFood = "Banana";

switch (myFood) {
  case "Banana":
  case "Mela":
    console.log("Mangia frutta ogni giorno per mantenerti sano.");
    break;
  case "Chocolate Cake":
    console.log("Goditi un dolce regalo.");
    break;
}

Sfortunatamente, switch non può sostituire più condizioni if che usano l'operatore && visto il modo nel quale il processo di valutazione di case funziona. Devi usare un'istruzione if in quel caso.

11.5 - Esercizio nr. 5

Una scuola elementare fornisce diversi premi in base al giudizio conseguito da uno studente:

• Gli studenti che hanno ricevuto una A avranno del cioccolato
• Gli studenti che hanno ricevuto una B avranno un biscotto
• Gli studenti che hanno ricevuto una C avranno una caramella
• Per tutti gli altri giudizi stampa "Nessun premio da dare."

Crea una variabile chiamata giudizio che conserverà la valutazione data allo studente.

Esempio dei possibili risultati a seconda del valore di giudizio:

Hai ottenuto una A, eccoti del cioccolato!
Hai ottenuto una B, eccoti un biscotto!
Hai ottenuto una C, c'è spazio per migliorare, eccoti una caramella!
Nessun premio da dare

Puoi usare sia istruzioni  if...else che switch...case.

12 - Flussi di controllo (cicli)

Quando si programma un'applicazione in JavaScript, è spesso necessario scrivere una parte di codice che deve essere eseguita ripetutamente.

Diciamo che vuoi scrivere un programma che stampi i numeri da 1 a 10 nella console. Puoi farlo chiamando console.log 10 volte in questo modo:

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);

// e così via...

Funziona, ma c'è un modo migliore per scrivere questo tipo di attività ripetitiva.

Un'istruzione di ciclo (loop) è un'altra categoria di istruzione di flusso di controllo utilizzata per eseguire un blocco di codice più volte fintanto che viene soddisfatta una determinata condizione.

Esistono due istruzioni di ciclo utilizzate in JavaScript:

• L'istruzione for
• L'istruzione while

Impariamo come utilizzare queste istruzioni nella pratica.

12.1 - Istruzione for

Invece di ripetere te stesso 10 volte per stampare i numeri da 1 a 10, puoi usare l'istruzione for e scrivere solo una singola riga di codice come segue:

for (let x = 0; x < 10; x++) {
  console.log(x);
}

Ecco qua! L'istruzione for è seguita da parentesi () all'interno delle quali ci sono 3 espressioni:

• L'espressione di inizializzazione, in cui si dichiari una variabile da utilizzare come origine della condizione del ciclo. Rappresentata come x = 0 nell'esempio.
• L'espressione di condizione, in cui la variabile nell'inizializzazione verrà valutata per una condizione specifica. Rappresentata come x < 10 nell'esempio.
• L'espressione aritmetica, in cui il valore della variabile viene incrementato o decrementato alla fine di ogni ciclo.

Queste espressioni sono separate da un punto e virgola (;).

Dopo le espressioni, le parentesi graffe {} verranno utilizzate per creare un blocco di codice che verrà eseguito da JavaScript fintanto che l'espressione della condizione restituisce true.

Puoi identificare a cosa corrispondono le espressioni prestando attenzione al punto e virgola (;) che termina l'istruzione.

for ( [inizializzazione]; [condizione]; [espressione aritmetica]) {
  // Fintanto che la condizione ritorna true,
  // Questo blocco verrà eseguito ripetutamente
}

L'espressione aritmetica può rappresentare un incremento (++) o un decremento (--) . Viene valutata ogni volta che l'esecuzione del blocco di codice all'interno delle parentesi graffe termina:

for (let x = 10; x >= 1; x--) {
  console.log(x);
}

Puoi anche usare gli operatori scorciatoia aritmetici come += e -= come mostrato qui sotto:

// Istruzione for con espressione scorciatoia aritmetica
for (let x = 1; x < 20; x += 3) {
  console.log(x);
}

Qui, il valore di x sarà incrementato di 3 ogni volta che il ciclo viene eseguito.

Una volta terminato il ciclo,  JavaScript continuerà a eseguire il codice che segue scritto al di fuori del corpo di for:

for (let x = 1; x < 2; x++) {
  console.log(x);
}
console.log("Il ciclo for è terminato");
console.log("Continua l'esecuzione del codice");

12.2 - Quando usare un ciclo for

Il ciclo for è utile quando sai quante volte devi eseguire un'attività ripetitiva.

Ad esempio, supponiamo che tu stia scrivendo un programma per lanciare una moneta. Devi trovare quante volte esce testa quando la moneta viene lanciata 10 volte. Puoi farlo usando il metodo Math.random:

• Quando il numero è inferiore a 0,5 è necessario incrementare il contatore della variabile tails (croce).
• Quando il numero è pari o superiore a 0,5, è necessario incrementare il contatore della variabile heads (testa)

let heads = 0;
let tails = 0;
for (x = 1; x <= 10; x++) {
  if (Math.random() < 0.5) {
    tails++;
  } else {
    heads++;
  }
}

console.log("La moneta è stata lanciata 10 volte");
console.log(`Numero di volte in cui è uscito testa: ${heads}`);
console.log(`Numero di volte in cui è uscito croce: ${tails}`);

L'esempio qui sopra mostra dove il ciclo for offre l'approccio più efficace.

Ora vediamo un esercizio alternativo di lancio della moneta in cui il ciclo for non è efficace:

Scopri quante volte devi lanciare una moneta finché non esce testa.

Questa volta non sai quante volte devi lanciare la moneta. Qui è dove devi usare l'istruzione di ciclo while, che imparerai nella prossima sezione.

12.3 - Istruzione while

L'istruzione while o ciclo while viene utilizzato per eseguire un blocco di codice fintanto che la condizione restituisce true.

Puoi definire la condizione e l'istruzione per il ciclo come segue:

while (condizione) {
  istruzione;
}

Proprio come il ciclo for, il ciclo while viene utilizzato per eseguire ripetutamente un pezzo di codice finché la condizione indicata risulta vera.

Nell'esempio seguente, il blocco di istruzioni verrà eseguito fino a quando l'espressione della condizione non restituirà false:

let i = 0;

while (i < 6) {
  console.log(`Il valore di i = ${i}`);
  i++;
}

Qui, il ciclo while stamperà ripetutamente il valore di i finché i è minore di 6. In ogni iterazione, il valore di i viene incrementato di 1 finché non raggiunge 6 e il ciclo termina.

Tieni presente che devi includere un pezzo di codice che prima o poi trasformi la condizione di valutazione in false o il ciclo while verrà eseguito per sempre. L'esempio seguente causerà un ciclo infinito:

let i = 0;

while (i < 6) {
  console.log(`Il valore di i = ${i}`);
}

Visto che il valore di i non cambia mai, il ciclo while continuerà per sempre!

12.4 - Quando usare un ciclo while

Visto che entrambi while e for possono essere usati per eseguire ripetutamente un pezzo di codice, quando dovresti usare un ciclo while invece di for?

Un modo semplice per sapere quando dovresti usare while è quando non sai quante volte devi eseguire il codice.

Tornando all'esempio del lancio della moneta, c'è un caso che è perfetto per un ciclo while:

Scopri quante volte devi lanciare una moneta finché non esce testa.

Devi anche mostrare quante volte lanci la moneta finché non esce testa:

let flips = 0;
let isHeads = false;

while (!isHeads) {
  flips++;
  isHeads = Math.random() < 0.5;
}

console.log(`Ci sono voluti ${flips} lanci per ottenere testa.`);

Qui la condizione isHead = Math.random() < 0.5 simula il lancio di una moneta. Quando il risultato è true, vuol dire che si è ottenuto testa e il ciclo sarà terminato.

Visto che non sai quanto volte dovrai eseguire il ciclo prima che esca testa, devi usare un ciclo while invece che un ciclo for.

12.5 - Esercizio nr. 6

Scrivi un programma che stampi una mezza piramide usando gli asterischi * , il cui risultato è mostrato qui sotto:

*
**
***
****
*****

Poi stampa una mezza piramide rovesciata, come segue:

*****
****
***
**
*

13 - Funzioni

Una funzione è semplicemente una sezione (o un blocco) di codice scritto per eseguire un'attività specifica.

Ad esempio, la funzione di conversione di tipo String() viene utilizzata per convertire i dati di un altro tipo in una stringa.

Anche console.log() e vari metodi di array che abbiamo imparato nei capitoli precedenti sono funzioni. Ma poiché queste funzioni vengono invocate da un oggetto, vengono chiamate metodi.

Imparerai di più sui metodi più avanti nel capitolo 14. Per ora, sappi solo che una funzione e un metodo sono essenzialmente la stessa cosa, tranne per il fatto che un metodo viene chiamato da un oggetto.

Oltre alle funzioni integrate fornite da JavaScript, puoi anche creare una tua funzione.

13.1 - Come creare la tua funzione

La creazione di una funzione inizia con la digitazione della parola chiave function seguita dal nome della funzione, una coppia di parentesi tonde, quindi una coppia di parentesi graffe.

Ecco un esempio:

function greet() {
  // Qui il corpo della funzione
  console.log("Ciao!");
}

Per chiamare una funzione, devi specificarne il nome seguito dalle parentesi tonde:

greet(); // Ciao!

Il codice all'interno della funzione viene eseguito quando chiami la funzione.

13.2 - Parametri e argomenti della funzione

I parametri sono variabili utilizzate per accettare input forniti quando viene chiamata la funzione.

È possibile specificare i parametri nell'intestazione della funzione, all'interno delle parentesi tonde.

L'esempio seguente mostra una funzione che ha un parametro chiamato name:

function greet(name) {
  // corpo della funzione
}

Come userai il parametro name all'interno della funzione è una tua decisione.

Potresti usare il parametro all'interno di una funzione print(), in questo modo:

function greet(name) {
  console.log(`Ciao, ${name}!`);
  console.log("Bel tempo oggi, non è vero?");
}

Ora ogni volta che devi chiamare la funzione greet(), devi passare un valore per il parametro name.

Il valore che hai passato per il parametro viene detto argomento, ecco come fare:

greet("Peter");

La stringa 'Peter' all'interno delle parentesi quando chiami la funzione verrà passata come valore del parametro name.

Esegui il codice e otterrai questo risultato:

Ciao, Peter!
Bel tempo oggi, non è vero?

Puoi avere più di un parametro quando definisci la funzione, ma devi separare ciascun parametro con un virgola, come segue:

function greet(name, weather) {
  console.log(`Ciao, ${name}!`);
  console.log(`Oggi è ${weather}, non è vero?`);
}

greet("Nathan", "piovoso");

Risultato:

Ciao, Nathan!
Oggi è piovoso, non è vero?

Quando specifichi due parametri nell'intestazione della funzione, è necessario passare due argomenti. Se chiami la funzione senza passare gli argomenti, il valore sarà undefined.

Nella sezione successiva imparerai come creare parametri con valori predefiniti, che ti consentono di chiamare la funzione senza doverle passare un argomento.

Per ora, spero che tu veda la comodità di avere parametri. Rendono le tue funzioni più adattabili e riutilizzabili ricevendo diversi valori per coprire una varietà di scenari che la funzione potrebbe rappresentare.

Come mostrato nell'esempio, i parametri name (nome) e weather (tempo) ti consentono di salutare molte persone diverse in condizioni meteorologiche diverse.

Che sia soleggiato, piovoso o nuvoloso, basta cambiare name e weather quando vuoi salutare un'altra persona.

13.3 - Parametri predefiniti

Quando definisci una funzione, puoi impostare un valore predefinito per qualsiasi parametro in quella funzione.

Per esempio il parametro name nella funzione qui sotto è un parametro predefinito:

function greet(name = "Nathan") {
  console.log(`Ciao ${name}!`);
  console.log("Bel tempo oggi, non è vero?");
}

Qui il valore predefinito 'Nathan' verrà usato se nessun valore oppure undefined viene passato per il parametro name.

Puoi verificarlo chiamando la funzione greet() senza argomento, in questo modo:

greet();
greet("Jack");

Risultato:

Ciao, Nathan!
Bel tempo oggi, non è vero?

Ciao, Jack!
Bel tempo oggi, non è vero?

Qualunque funzione tu definisca, può avere un misto di parametri predefiniti e non predefiniti.

Ecco un'altro esempio di una funzione con un parametro predefinito (name) e uno non predefinito (weather):

function greet(weather, name = "Nathan") {
  console.log(`Ciao, ${name}!`);
  console.log(`Oggi è ${weather}, non è vero?`);
}

greet("soleggiato");

Risultato:

Ciao, Nathan!
Oggi è soleggiato, non è vero?

Nota che il parametro weather è stato posizionato davanti al parametro name. Questo è per comodità in modo che non sia necessario specificare il parametro predefinito.

Se inserisci il parametro non predefinito dopo il parametro predefinito, devi passare un valore al parametro name per arrivare al parametro weather.

Considera l'esempio seguente:

function greet(name = "Nathan", weather) {
  console.log(`Ciao, ${name}!`);
  console.log(`Oggi è ${weather}, non è vero?`);
}

greet(undefined, "sunny");

Per passare un argomento al parametro  weather , devi prima passare undefined o un altro valore al parametro name.

Ecco perché è meglio specificare i parametri non definiti prima di quelli predefiniti.

13.4 - Parametri predefiniti e null

Se ricordi, nella sezione 7.5 abbiamo esplorato brevemente la differenza tra undefined come valore vuoto "predefinito" e null come valore vuoto "intenzionale".

Quando a una funzione si passa undefined per un parametro predefinito, verrà utilizzato il valore del parametro predefinito:

function greet(name = "John"){
  console.log(name);
}

greet(undefined); // John

Come puoi vedere, JavaScript stampa il valore del parametro predefinito "John" quando passi undefined alla funzione.

Ma quando passi null alla funzione, il parametro predefinito verrà ignorato:

function greet(name = "John"){
  console.log(name);
}

greet(null); // null

Questo è uno degli errori più comuni che commettono i principianti quando imparano JavaScript. Quando usi il valore null, JavaScript penserà che vuoi che quel valore sia vuoto, quindi non sostituisce il valore con il parametro predefinito.

Quando utilizzi undefined, JavaScript lo sostituirà con il parametro predefinito. Potresti riscontrare questo problema mentre lavori con il codice JavaScript nella tua carriera, quindi tienilo a mente.

13.5 - Istruzione return

Una funzione può anche avere un'istruzione return all'interno del blocco di codice. Un'istruzione return viene utilizzata per restituire un valore al chiamante.

Ad esempio, la seguente funzione restituisce la somma di due valori:

function sum(a, b) {
  return a + b;
}

let result = sum(3, 2);
console.log(result); // 5

Il valore restituito da una funzione può essere assegnato a una variabile per ulteriori operazioni. Puoi aggiungere l'istruzione return ovunque all'interno della funzione.

Quando JavaScript raggiunge l'istruzione return, salta l'ulteriore codice scritto all'interno del blocco funzione e torna al punto in cui chiami la funzione.

La seguente funzione ha due istruzioni return:

function checkAge(age) {
  if (age > 18) {
    return "Puoi prendere la patente";
  }
  return "Non puoi ancora prendere la patente";
}

console.log(checkAge(20));
console.log(checkAge(15));

Risultato:

Puoi prendere la patente
Non puoi ancora prendere la patente

Quando chiamiamo la funzione checkAge() la prima volta, il valore dell'argomento age (età) è maggiore di 18, quindi JavaScript esegue l'istruzione return all'interno del blocco if.

La seconda volta che abbiamo chiamato la funzione, la condizione if non è soddisfatta, quindi JavaScript esegue invece l'istruzione return sotto il blocco if.

Puoi anche interrompere l'esecuzione di una funzione e tornare al chiamante specificando l'istruzione return senza alcun valore:

function greet() {
  console.log("Ciao!");
  return;
  console.log("Arriverderci!!");
}

greet()

Risultato:

Ciao!

Qui, l'istruzione return viene invocata tra le chiamate delle funzioni console.log().

JavaScript esegue la prima chiamata di console.log(), quindi salta il resto del codice. La stringa 'Arrivederci!' non viene stampata.

13.6 - Ambito di una variabile

Ora che stai imparando le funzioni, è un buon momento per parlare dell'ambito di una variabile.

Una variabile dichiarata all'interno di una funzione è accessibile solo da quella funzione. Questo perché quella variabile ha un ambito locale.

D'altro canto, una variabile dichiarata al di fuori di qualsiasi blocco è nota come variabile globale a causa del suo ambito globale.

Questi due ambiti sono importanti perché quando provi ad accedere a una variabile locale al di fuori del suo ambito, riceverai un errore. Per esempio:

function greet() {
  let myString = "Hello World!";
}

greet();
console.log(myString);

Quando esegui il codice qui sopra JavaScript risponde con un errore, dicendo che la variabile myString non è definita:

ReferenceError: myString is not defined

Questo perché la variabile myString è dichiarata all'interno della funzione greet(), quindi non puoi accedere a quella variabile al di fuori di essa. Non importa anche se hai chiamato quella funzione prima di accedere alla variabile.

Viceversa, è possibile accedere a una variabile globale da qualsiasi punto, anche all'interno di una funzione:

let myString = "Hello World!";

function greet() {
  console.log(myString);
}

greet(); // Hello World!

Qui, la funzione greet() è in grado di accedere alla variabile myString dichiarata al di fuori della funzione.

Tieni presente che questo vale solo per le variabili dichiarate usando let e const.

Puoi anche definire una variabile locale con lo stesso nome della variabile globale senza sovrascriverla.

Ecco un esempio:

let myString = "Hello World!";

function greet() {
  let myString = "Morning!";
  console.log(myString);
}

greet();  // Morning!
console.log(myString); // Hello World!

Quando chiami la funzione greet(), alla variabile locale chiamata myString è stata assegnata la stringa 'Morning!'.

Al di fuori della funzione, la variabile globale anch'essa chiamata myString esiste ancora e il valore non viene modificato.

JavaScript considera la variabile di ambito locale come una variabile diversa. Quando dichiari la stessa variabile all'interno di una funzione, qualsiasi codice all'interno della funzione farà sempre riferimento alla variabile locale.

In pratica, raramente è necessario dichiarare una variabile con lo stesso nome in ambiti diversi:

• Qualsiasi variabile dichiarata all'esterno di una funzione non dovrebbe essere utilizzata all'interno di una funzione senza passarla come parametro.
• Una variabile dichiarata all'interno di una funzione non dovrebbe mai riferirsi al di fuori di tale funzione

Tienilo a mente quando scrivi funzioni JavaScript.

13.7 - Parametro rest

Il parametro rest è un parametro che può accettare qualsiasi numero di dati come argomenti. Gli argomenti verranno memorizzati come un array.

È possibile definire un parametro rest nell'intestazione della funzione aggiungendo tre punti ... prima del nome del parametro.

Ecco un esempio di creazione di una funzione che ha un argomento di lunghezza variabile:

function printArguments(...args){
    console.log(args);
}

Quando si chiama la funzione  printArguments() qui sopra, puoi specificare tanti argomenti quanti ne vuoi:

function printArguments(...args){
    console.log(args);
}

printArguments("A", "B", "C"); 
// [ 'A', 'B', 'C' ]
printArguments(1, 2, 3, 4, 5);
// [ 1, 2, 3, 4, 5 ]

Tieni presente che una funzione può avere solo un parametro rest e il parametro rest deve essere l'ultimo parametro nella funzione.

Puoi utilizzare un parametro rest quando la tua funzione deve lavorare con un numero indefinito di argomenti.

13.8 - Funzione freccia

La sintassi della funzione freccia consente di scrivere una funzione JavaScript con una sintassi più breve e concisa.

Quando è necessario creare una funzione, il metodo principale consiste nell'utilizzare la parola chiave function seguita dal nome della funzione come mostrato di seguito:

function greetings(name) {
  console.log(`Hello, ${name}!`);
}

greetings("John"); // Hello, John!

La sintassi della funzione freccia consente la creazione di una espressione funzione che produce lo stesso risultato del codice qui sopra.

Ecco la funzione greetings() riscritta usando la sintassi freccia:

const greetings = (name) => {
  console.log(`Hello, ${name}!`);
};

greetings("John"); // Hello, John!

Quando crei una funzione usando la sintassi freccia, devi assegnare l'espressione a una variabile in modo che la funzione abbia un nome.

Fondamentalmente, la sintassi della funzione freccia è la seguente:

const nomeFunzione = (param1, param2, ...) => {
  // corpo della funzione
}

Nella descrizione generica della funzione freccia qui sopra,

• nomeFunzione è il nome della variabile alla quale viene assegnata la funzione. Puoi chiamare la funzione successivamente nel tuo codice con nomeFunzione().
• (param1, param2, ...) sono i parametri della funzione. Puoi definire tanti parametri quanti sono necessari alla funzione.
• di seguito la freccia => che indica l'inizio della funzione.

Il codice qui sopra equivale a scrivere:

const nomeFunzione = function(param1, param2, ...) {
  // corpo della funzione
}

La sintassi della funzione freccia non aggiunge nuove capacità al linguaggio.

Viceversa offre un miglioramento nel modo nel quale scrivi una funzione in JavaScript.

Sulle prime potrebbe sembrare strano, se sei abituato a utilizzare la parola chiave function.

Ma quando inizi a usare la sintassi della freccia, vedrai che è molto comodo e più facile da scrivere.

13.9 - Funzioni freccia su singola riga o più righe

La funzione freccia ti fornisce un modo per scrivere una funzione su riga singola in cui il lato destro della freccia => viene restituito al lato sinistro.

Quando usi la parola chiave function, devi usare le parentesi graffe {} e la parola chiave return come segue:

function plusTwo(num) {
  return num + 2;
}

Usando la funzione freccia, puoi omettere sia le parentesi graffe che la parola chiave return, creando una funzione su una sola riga, come segue:

const plusTwo = (num) => num + 2;

Senza le parentesi graffe, JavaScript valuta l'espressione alla destra della freccia e la ritorna al chiamante.

La sintassi della funzione freccia va bene anche per funzioni che non ritornano un valore, come mostrato qui sotto:

const greetings = () => console.log("Hello World!");

Quando usi la sintassi della funzione freccia, le parentesi graffe sono richieste solo quando il corpo della funzione è composto da più righe:

const greetings = () => {
  console.log("Hello World!");
  console.log("How are you?");
};

13.10 Funzione freccia senza parentesi tonde

Le parentesi tonde () sono usate nelle funzioni  JavaScript per contenere i parametri che può ricevere la funzione.

Quando usi la parola chiave function , le parentesi tonde sono richieste:

function plusThree(num) {
  return num + 3;
}

La funzione freccia, viceversa, consente di omettere le parentesi tonde quando la funzione ha esattamente un solo parametro.

Questo codice di esempio è una espressione di funzione freccia valida:

const plusThree = num => num + 3;

Come puoi vedere si possono eliminare la parentesi tonde e graffe, così come la parola chiave return.

Devi tuttavia usare la parentesi tonde quando si verificano le seguenti condizioni:

• la funzione non ha parametri
• la funzione ha più di un parametro

Quando non hai parametri, devi usare le parentesi tonde, in questo modo:

const greetings = () => console.log("Hello World!");

Lo stesso vale se hai più di un parametro.

La funzione che segue ha due parametri: name e age.

const greetings = (name, age) => console.log("Hello World!");

La sintassi della funzione freccia rende le parentesi tonde opzionali quando hai una funzione con un solo parametro.

13.11 - La funzione freccia non ha associazione con arguments

Quando usi la parola chiave  function per definire una funzione, puoi accedere agli argomenti che riceve usando la parola chiave arguments, così:

const printArgs = function () {
  console.log(arguments);
};

printArgs(1, 2, 3);
// [Arguments] { '0': 1, '1': 2, '2': 3 }

Nel codice qui sopra, la parola chiave arguments fa riferimento all'oggetto che conserva tutti gli argomenti passati alla funzione.

Al contrario, la funzione freccia non ha l'oggetto arguments e darà errore quando tenti di accedervi:

const printArgs = () => console.log(arguments);

printArgs(1, 2, 3);
//Uncaught ReferenceError: arguments is not defined 
//Errore di riferimento non gestito: arguments non è definito

Puoi usare la sintassi JavaScript spread per imitare l'associazione con arguments come segue:

const printArgs = (...arguments) => console.log(arguments);

printArgs(1, 2, 3);
// [1, 2, 3]

Utilizzando la sintassi spread, gli argomenti passati alla funzione freccia verranno memorizzati in un array.

Nota che se usi la sintassi spread hai bisogno delle parentesi tonde anche se stai passando solo un argomento alla funzione.

È possibile accedere agli argomenti ricevuti con la notazione dell'indice dell'array come arguments[0], arguments[1] nell'esempio e così via.

13.12 - Convertire facilmente una funzione normale in  funzione freccia

Puoi seguire tre semplici passaggi per convertire una funzione normale in funzione freccia:

1. Sostituisci la parola chiave function con una dichiarazione di variabile let o const.
2. Aggiungi il simbolo = dopo il nome della funzione e prima delle parentesi tonde.
3. Aggiungi il simbolo => dopo le parentesi tonde.

Il codice qui sotto ti aiuterà a visualizzare i passaggi:

function plusTwo(num) {
  return num + 2;
}

// step 1: sostituisci function con let / const
const plusTwo(num) {
  return num + 2;
}

// step 2: aggiungi = dopo il nome della funzione
const plusTwo = (num) {
  return num + 2;
}

// step 3: aggiungi => dopo le parentesi tonde
const plusTwo = (num) => {
  return num + 2;
}

I tre passaggi precedenti sono sufficienti per convertire qualsiasi vecchia sintassi della funzione JavaScript nella nuova sintassi della funzione freccia.

Quando hai una funzione su riga singola, c'è un quarto passaggio facoltativo per rimuovere le parentesi graffe e la parola chiave return come segue:

// da così
const plusTwo = num => {
  return num + 2;
};

// a così
const plusTwo = num => num + 2;

Quando hai esattamente un solo parametro puoi anche rimuovere le parentesi tonde:

// da così
const plusTwo = (num) => num + 2;

// a così
const plusTwo = num => num + 2;

Tuttavia gli ultimi due passaggi sono opzionali. Solo i primi tre sono necessari per convertire qualunque funzione scritta con function e usare la sintassi della funzione freccia.

13.13 Esercizio nr. 7

Scrivi una funzione chiamata calcolaQuadrato() che viene utilizzata per calcolare l'area e il perimetro di una forma quadrata.

La funzione accetta un solo parametro (lato), che rappresenta il lato del quadrato.

La formula per calcolare l'area è  lato * lato e la formula per calcolare il perimetro è 4 * lato

Il risultato che mostra la dimensione del lato, l'area e il perimetro potrebbe essere come segue se l'argomento del parametro lato è 8:

Il lato del quadrato è 8
L'area del quadrato è 64
Il perimetro del quadrato è 32

14 - Oggetti

Un oggetto è un tipo di dato speciale che consente di memorizzare più di un valore, proprio come un array.

La differenza tra un oggetto e un array è che un array memorizza i dati come un elenco di elementi, mentre un oggetto memorizza i dati nel formato di coppia chiave:valore.

Vediamo un esempio che illustra questa differenza. Supponi di voler memorizzare informazioni su un libro nel tuo programma.

Usare variabili normali, sarebbe simile a questo:

let titoloLibro = "JavaScript Introduction";
let autoreLibro = "Nathan Sebhastian";

Questo va bene ma non è certo il modo migliore per memorizzare valori in relazione tra loro.

Un altro modo di conservare il valore sarebbe usare un array:

let mioLibro = ["JavaScript Introduction", "Nathan Sebhastian"];

Questo è certamente meglio in quanto puoi raggruppare i dati correlati, ma non hai modo di aggiungere contesto al valore.

Ecco quando torna utile un oggetto. Puoi dichiarare un oggetto che rappresenta un singolo libro e conservare i dati nel formato chiave:valore:

let mioLibro = {
  titolo: "JavaScript Introduction",
  autore: "Nathan Sebhastian",
};

Un oggetto viene dichiarato utilizzando le parentesi graffe {} e ogni elemento all'interno delle parentesi è scritto nel formato chiave:valore.

Un elemento di un oggetto è anche noto come proprietà, con la chiave che rappresenta il nome della proprietà e il valore il contenuto della proprietà.

Come un array, devi separare ogni elemento all'interno di un oggetto usando una virgola.

Puoi assegnare una stringa o numeri come chiave di un elemento e puoi assegnare qualsiasi tipo di dato come valore, inclusa una funzione:

let mioLibro = {
  titolo: "JavaScript Introduction",
  autore: "Nathan Sebhastian",
  descrizione: function () {
    console.log(`Titolo: ${this.titolo}`);
    console.log(`Autore: ${this.autore}`);
  },
};

Qui, la chiave descrizione è una funzione che stampa il valore di titolo e autore dall'oggetto.

La parola chiave this si riferisce al contesto del codice, che in questo caso è l'oggetto mioLibro.

Di solito, la chiave in un oggetto è qualcosa che fornisce più contesto al valore che contiene. Una chiave deve anche essere univoca, quindi non puoi usare la stessa chiave due volte nello stesso oggetto.

Ad esempio, se disponi di dati su un libro, puoi utilizzare chiavi come titolo, autore e prezzo per aiutarti a comprendere il contesto del valore memorizzato in ciascuna chiave.

14.1 - Accedere ai valori

Per accedere ai valori di un oggetto puoi utilizzare la notazione punto (.) oppure le parentesi quadre [].

Ecco un esempio di accesso alle proprietà di un oggetto usando la notazione punto:

let mioLibro = {
  titolo: "JavaScript Introduction",
  autore: "Nathan Sebhastian",
};

console.log(mioLibro.titolo);
console.log(mioLibro.autore);

Ecco come usare le parentesi quadre per accedere alle stesse proprietà:

let mioLibro = {
  titolo: "JavaScript Introduction",
  autore: "Nathan Sebhastian",
};

console.log(mioLibro["titolo"]);
console.log(mioLibro["autore"]);

Ricorda che devi racchiudere il nome della proprietà tra apici, come una stringa, altrimenti  JavaScript penserà che stai passando una variabile all'interno delle parentesi quadre.

14.2 - Aggiungere una nuova proprietà

Puoi aggiungere una nuova proprietà a un oggetto usando sia la notazione punto che le parentesi quadre, così:

let mioLibro = {
  titolo: "JavaScript Introduction",
  autore: "Nathan Sebhastian",
};

// aggiunge la proprietà anno di pubblicazione
mioLibro.anno = 2023;

// aggiunge la proprietà editore
mioLibro["editore"] = "CodeWithNathan";

console.log(mioLibro);

Quando stampi l'oggetto, ecco il risultato:

{
  titolo: 'JavaScript Introduction',
  autore: 'Nathan Sebhastian',
  anno: 2023,
  editore: 'CodeWithNathan'
}

Puoi aggiungere tante proprietà quante necessarie allo stesso oggetto.

14.3 - Modificare una proprietà

Per modificare una proprietà esistente, devi specificarla con la notazione punto o con le parentesi quadre, quindi aggiungere l'operatore di assegnazione e il nuovo valore, in questo modo:

let mioLibro = {
  titolo: "JavaScript Introduction",
  autore: "Nathan Sebhastian",
};

// modifica il valore della proprietà autore
mioLibro.autore = "John Doe";

console.log(mioLibro);

Risultato:

{
  titolo: 'JavaScript Introduction',
  autore: 'John Doe'
}

Come puoi vedere, il  valore della proprietà autore è stato modificato.

14.4 - Eliminare una proprietà

Per eliminare una proprietà da un oggetto devi usare delete in questo modo:

let mioLibro = {
  titolo: "JavaScript Introduction",
  autore: "Nathan Sebhastian",
};

delete mioLibro.autore;

console.log(mioLibro);

Risultato:

{ titolo: 'JavaScript Introduction' }

Quando cerchi di accedere alla proprietà cancellata (o a una proprietà che non esiste), otterrai il valore undefined.

14.5 Verificare se esiste una proprietà

Per verificare se una data proprietà esiste nel tuo oggetto puoi usare l'operatore in, così:

nomeProprietà in mioOggetto

L'operatore in ritorna true se nomeProprietà esiste nel tuo oggetto.

Di seguito un esempio:

let persona = {
  nomeProprio: "Nathan",
  cognome: "Sebhastian"
}

// verifica se esiste 'nomeProprio'
console.log('nomeProprio' in persona); // true

// verifica se esiste 'eta'
console.log('eta' in persona); // false

Ora sai come manipolare gli oggetti JavaScript.

14.6 - Esercizio nr. 8

Crea un oggetto persona con le seguenti proprietà:

• nome - nome della persona
• eta - età della persona
• saluto() - una funzione per salutare un'altra persona

All'interno della funzione saluto() introduci la persona, specificando nome ed età.

Ecco un esempio del risultato:

persona.saluto();

Ciao! Mi chiamo Alex e ho 22 anni.

15 - Esercizio finale: sviluppare un registratore di cassa

Sviluppiamo un registratore di cassa che può aggiungere elementi a un carrello della spesa, calcolare il prezzo totale, gli sconti e accettare il pagamento in contanti.

Ipotizziamo che la moneta sia il dollaro (USD) così che non lo dovrai specificare nel programma.

Il registratore di cassa ha 3 elementi in vendita:

• Un Telefono per 300
• Una Smart TV per 220
• Una Console di Gioco per 150

C'è il 10% di sconto quando il prezzo totale supera 400.

Il registratore di cassa dovrebbe avere un carrello della spesa all'inizio vuoto.

Il registratore di cassa dovrebbe fornire un metodo chiamato aggiungiArticolo che riceve il nome di un articolo come parametro. Quando chiamato, dovrebbe verificare se l'articolo risulta disponibile per la vendita. In questo caso l'articolo dovrebbe essere aggiunto al carrello della spesa. Se l'articolo non è disponibile, mostra un messaggio che dice che quell'articolo non viene venduto.

Il registratore di cassa dovrebbe fornire un metodo chiamato calcolaPrezzoTotale che somma il prezzo di tutti gli articoli nel carrello della spesa. Dovrebbe iterare sugli articoli presenti nel carrello e sommare i loro prezzi.

Il registratore di cassa dovrebbe fornire un metodo chiamato pagamento che ottiene l'importo ricevuto per il pagamento come parametro.

Dovrebbe poi calcolare il prezzo totale degli articoli nel carrello usando il metodo calcolaPrezzoTotale. Se il totale è maggiore di 400, deve applicare lo sconto del 10%.

Il metodo dovrebbe poi confrontare la somma ricevuta dall'utente per il pagamento con il totale dovuto e mostrare un messaggio appropriato:

• Se il totale pagato è uguale o maggiore del prezzo degli articoli dovrebbe mostrare un messaggio che ringrazia il cliente per l'acquisto. Se c'è del resto dovrebbe mostrarne l'ammontare.
• Se il totale pagato è minore del prezzo dovuto, dovrebbe visualizzare un messaggio che indica che il cliente non ha abbastanza denaro per pagare gli articoli acquistati.
• Il programma dovrebbe includere delle istruzioni console.log() appropriate per stampare dei messaggi quando vengono aggiunti articoli al carrello, per visualizzare il prezzo totale e per elaborare il pagamento.

Il programma dovrebbe gestire situazioni nelle quali il cliente paga esattamente il dovuto, quando il pagamento è minore del dovuto e quando pagamento è maggiore del dovuto.

Per sviluppare il programma devi sfruttare quello che hai imparato sugli oggetti, gli array i flussi condizionali e i cicli.

Ti consiglio di provare prima a sviluppare da solo il programma. Se non sai come proseguire allora verifica la soluzione fornita alla fine dell'articolo. Buona fortuna!

16 - Conclusione

Congratulazioni per aver terminato la lettura di questo manuale! Abbiamo esaminato insieme molti concetti per imparare a programmare utilizzando JavaScript.

Spero che ti sia piaciuto leggerlo tanto quanto io mi sono divertito a scriverlo. Mi piacerebbe ricevere il tuo feedback, sapere cosa ti è piaciuto e cosa no, così posso migliorare il tutorial.

Se vuoi saperne di più su JavaScript, sto creando un corso che ti aiuta a utilizzare JavaScript per creare applicazioni web. È attualmente in un periodo di pre-ordinazione, quindi puoi ottenere il corso a un prezzo inferiore e supportare il mio lavoro nella creazione di altri tutorial. Puoi ricevere informazioni qui.

17 - Soluzioni

Esercizio nr. 1

console.log("Il tuo nome dovrebbe essere qui");
console.log("La tua età dovrebbe essere qui");
console.log("La tua occupazione dovrebbe essere qui");

Esercizio nr. 2

let nome = "Il tuo nome dovrebbe essere qui";
let eta = "La tua età dovrebbe essere qui";
let occupazione = "La tua occupazione dovrebbe essere qui";

console.log(nome);
console.log(eta);
console.log(occupazione);

Esercizio nr. 3

1
false
true
true
true
false

Esercizio nr. 4

let colori = ["rosso", "verde", "blu"];

colori.push("nero");
console.log(colori);

colori.shift();
colori[0] = "blu";
colori[1] = "verde";
console.log(colori);

colori.unshift("giallo");
console.log(colori);

Esercizio nr. 5

Usando l'istruzione if...else :

let giudizio = "D";

if (giudizio === "A") {
  console.log("Hai ottenuto una A, eccoti del cioccolato");
} else if (giudizio === "B") {
  console.log("Hai ottenuto una B, eccoti un biscotto!");
} else if (giudizio === "C") {
  console.log(
    "Hai ottenuto una C, c'è spazio per migliorare, eccoti una caramella!"
  );
} else {
  console.log("Nessun premio da dare");
}

Usando l'istruzione switch...case

let giudizio = "C";
switch (giudizio) {
  case "A":
    console.log("Hai ottenuto una A, eccoti del cioccolato");   
    break;
  case "B":
    console.log("Hai ottenuto una B, eccoti un biscotto!");
    break;
  case "C":
    console.log(
      "Hai ottenuto una C, c'è spazio per migliorare, eccoti una caramella!"  
   );
    break;
  default:
    console.log("Nessun premio da dare");

}

Esercizio nr. 6

Modello della mezza piramide:

let pattern;

for (let i = 1; i <= 5; i++) {
  pattern = "";
  for (let j = 1; j <= i; j++) {
    pattern += "*";
  }
  console.log(pattern);
}

Modello della mezza piramide invertita:

for (let i = 4; i >= 0; i--) {
  pattern = "";
  for (let j = 0; j <= i; j++) {
    pattern += "*";
  }
  console.log(pattern);
}

Esercizio nr. 7

function calcolaQuadrato(lato) {
  console.log(`Il lato del quadrato è ${lato}`);
  console.log(`L'area del quadrato è ${lato * lato}`);
  console.log(`Il perimetro del quadrato è ${4 * lato}`);
}

calcolaQuadrato(7);

Esercizio nr. 8

const persona = {
  nome: "Alex",
  eta: 22,
  saluto: function () {
    console.log(
      `Ciao! Mi chiamo ${this.nome} e ho ${this.age} anni.`
    );
  },
};

persona.saluto();

Esercizio finale

Crea un file chiamato registratoreDiCassa.js e inserisci il seguente codice:

const registratoreDiCassa = {
  articoliInVendita: [
    { nome: "Telefono", prezzo: 300 },
    { nome: "Smart TV", prezzo: 220 },
    { nome: "Console di Gioco", prezzo: 150 },
  ],
  carrelloSpesa: [],
  aggiungiArticolo: function (nome) {
    let articoloTrovato = this.articoliInVendita.find(function (articolo) {
      return articolo.nome === nome;
    });
    if (articoloTrovato) {
      this.carrelloSpesa.push(articoloTrovato);
      console.log(`Aggiunto ${nome} al tuo carrello della spesa`);
    } else {
      console.log(`Mi dispiace, non vendiamo ${nome} qui!`);
    }
  },
  calcolaPrezzoTotale: function () {
    let prezzoTotale = 0;
    this.carrelloSpesa.forEach(function (articoloAcquistato) {
      prezzoTotale += articoloAcquistato.prezzo;
    });
    return prezzoTotale;
  },
  pagamento: function (pagato) {
    let prezzoTotale = this.calcolaPrezzoTotale();
    if (prezzoTotale > 400) {
      prezzoTotale -= prezzoTotale * 0.1;
      console.log(
        `Hai il 10% di sconto e il tuo prezzo da pagare è ${prezzoTotale}`
      );
    }
    if (pagato >= prezzoTotale) {
      if (pagato - prezzoTotale > 0) {
        console.log(`Ecco il tuo resto ${amount - prezzoTotale}`);
      }
      console.log(`Grazie per l'acquisto! Speriamo di averti di nuovo qui!`);
    } else {
      console.log(
        "Spiacenti, non non hai abbastanza denaro per acquistare gli articoli nel carrello"
      );
    }
  },
};

Per verificare il programma, aggiungi le righe seguenti alla fine del file registratoreDiCassa.js:

registratoreDiCassa.aggiungiArticolo("Telefono");
registratoreDiCassa.aggiungiArticolo("Smart TV");
console.log(registratoreDiCassa.calcolaPrezzoTotale());
registratoreDiCassa.pagamento(700);

Quando esegui il programma con node registratoreDiCassa.js dovresti ottenere questo risultato:

Aggiunto Telefono al tuo carrello della spesa
Aggiunto Smart TV al tuo carrello della spesa
520
Hai il 10% di sconto e il tuo prezzo da pagare è 468
Ecco il tuo resto 232
Grazie per l'acquisto! Speriamo di averti di nuovo qui!

Grazie per la lettura!

Impara a conoscere le strutture dati che usi ogni giorno.

👋 Benvenuto! Iniziamo con un po' di necessario contesto. Ho qualche domanda per te:
✅ Ascolti musica sul tuo smartphone?
✅ Mantieni un elenco di contatti sul telefono?
✅ Hai mai visto una classifica durante una competizione?

Se la tua risposta è "sì" a una qualsiasi di queste domande, allora è quasi certo che hai usato gli array e non lo sapevi nemmeno! 😃 Gli array sono strutture di dati molto potenti che memorizzano elenchi di elementi. Hanno infinite applicazioni. Sono molto importanti nel mondo dell'informatica.

In questo articolo imparerai i pro e i contro degli array, la loro struttura, le operazioni che puoi eseguire su di essi e i casi d'uso.

Cominciamo! 👍

🔎 Approfondimento della struttura di base degli array

Per capire come funzionano, è molto utile visualizzare la memoria del tuo computer come una griglia, proprio come quella qui sotto. Ogni parte di informazione viene conservata in uno di quei piccoli elementi (i quadrati) che compongono la griglia.

Gli array si avvalgono di questa struttura a "griglia" per conservare elenchi di informazioni correlate in posizioni di memoria adiacenti al fine di garantire estrema efficienza nel trovare questi valori. 🔳🔳🔳🔳

Puoi visualizzare la struttura di un array in questo modo:

Gli elementi di un array sono adiacenti nella memoria. Se devi accedere a più di uno di essi, il processo è estremamente ottimizzato in quanto il tuo computer sa già dove si trova il valore.

Stupendo, non è vero? Impariamo come avviene dietro le quinte! 😃

📚 Classificazione

Gli array sono classificati come Strutture Dati Omogenee in quanto conservano elementi dello stesso tipo.

Possono conservare numeri, stringhe, valori booleani (vero e falso), caratteri, oggetti e così via. Ma una volta definito il tipo di valore che dovrà contenere il tuo array, tutti i suoi elementi dovranno essere dello stesso tipo. Non puoi "mischiare" elementi di tipi diversi.

👀 Leggere Valori — La Magia Inizia!

Il meraviglioso potere degli array proviene direttamente dalla loro efficienza nell'accedere ai valori. Questo avviene grazie alla loro struttura tipo griglia. Esaminiamo il processo in maggiore dettaglio.🔍

Quando crei un array:
- Lo assegni a una variabile. 👈
- Definisci il tipo di elementi che dovrà contenere. 🎈
- Definisci la sua dimensione (il numero massimo di elementi). 📚

💡 Nota: Il nome che assegni a questa variabile è molto importante in quanto lo utilizzerai successivamente nel tuo codice per accedere e/o modificarne i valori.

Ma come puoi dire al computer di accedere a un particolare valore? Qui gli indici hanno un ruolo vitale!

1️⃣ Indici

Si usa quello che viene chiamato "indice" per accedere a un valore in un array. È un numero che fa riferimento alla posizione in cui il valore è conservato.

Come puoi vedere nel diagramma qui sotto, il primo elemento dell'array viene indirizzato usando l'indice 0. Mano a mano che ti sposti verso destra, il valore dell'indice aumenta di uno per ciascuno spazio in memoria.

💡 Nota: So che partire a contare da 0 invece che da 1 può sembrare strano, ma è quella che viene chiamata Numerazione a base zero. È molto comune in informatica.

La sintassi generale per accedere a un elemento è <VariabileArray>[<indice>]

Per esempio:
Se il tuo array è associato alla variabile myArray e vuoi accedere al primo elemento (indice 0), dovresti usare myArray[0]

2️⃣ Memoria

Ora che sai come accedere ai valori, vediamo come sono conservati gli array nella memoria del computer. Quando definisci la dimensione di un array, tutto lo spazio in memoria corrispondente alla dimensione viene "riservato" da quel momento in poi per valori futuri che vorresti poter inserire.

💡 Nota: Se non riempi tutto l'array con valori, quello spazio verrà riservato e mantenuto vuoto fino a quando non lo farai.

Per esempio:
Diciamo che definisci un array di dimensione 5 ma inserisci un solo valore. Tutto lo spazio rimanente sarà vuoto e "riservato" in memoria, in attesa di future assegnazioni.

Questa è la chiave: gli array sono estremamente efficienti nell'accedere ai valori in quanto tutti gli elementi sono conservati in spazi contigui di memoria. In questo modo, il computer sa esattamente dove cercare per trovare le informazioni che hai richiesto.

Ma… c'è un aspetto negativo 😞 in quanto non è efficiente dal punto di vista della memoria. Stai riservando memoria per operazioni future che potrebbero non accadere mai. Ecco perché gli array sono consigliati in situazioni dove sai in anticipo quanti elementi andrai a conservare.

🔧 Operazioni — Dietro le quinte!

Ora che sai cosa sono gli array, quando vengono usati e come conservano i loro elementi, approfondiremo le operazioni che si possono compiere su di essi come l'inserimento e l'eliminazione.

1️⃣ Inserimento — Benvenuto!

Supponiamo di avere un array di dimensione 6 e di avere ancora spazio vuoto all'interno. Vogliamo inserire un elemento "e" all'inizio dell'array (indice 0), ma questa posizione è già occupata dall'elemento "a". Cosa dovremmo fare?

Per inserire elementi negli array, spostiamo tutti gli elementi già presenti che si trovano alla destra della posizione di inserimento di una posizione in avanti verso destra. L'elemento "a" ora sarà a indice 1, l'elemento "b" a indice 2 e così via…

💡 Nota: Potresti aver bisogno di creare una variabile per tenere traccia del valore dell'ultimo indice che contiene elementi. Nel diagramma qui sopra, l'array viene riempito fino all'indice 4 prima dell'inserimento. In questo modo, puoi determinare se l'array è pieno e quale indice dovresti utilizzare per inserire un elemento alla fine.

Dopo aver fatto questo, il nuovo elemento viene inserito con successo. 👏

⚠️ Aspetta un minuto! Cosa succede se l'array è pieno?

Cosa pensi che accada se l'array è pieno e cerchi di inserire un elemento? 😱

In questo caso devi creare un array nuovo più grande, poi copiare manualmente tutti gli elementi nel nuovo array. Questa operazione è molto onerosa dal punto di vista del tempo. Immagina cosa accadrebbe se avessi un array con milioni di elementi! Potrebbe volerci moltissimo tempo per completare l'operazione. ⏳

💡 Nota: L'unica eccezione a questa regola, laddove l'inserimento è molto veloce, è quando inserisci un elemento alla fine dell'array (alla posizione di indice alla destra dell'ultimo elemento) e c'è ancora spazio disponibile. Questo viene fatto con un tempo costante O(1).

2️⃣ Cancellazione— Ciao Ciao!

Diciamo ora che vuoi eliminare un elemento dall'array.

Per mantenere l'efficienza per l'accesso casuale (essere in grado di accedere in modo estremamente veloce all'array tramite un indice) gli elementi devono essere conservati in spazi contigui di memoria. Non puoi semplicemente eliminare l'elemento e lasciare uno spazio vuoto.

Dovresti spostare di una posizione a sinistra gli elementi situati dopo l'elemento che vuoi cancellare.

Alla fine l'array risulterà questo 👇. Come puoi vedere, "b" è stato eliminato con successo.

💡 Nota: La cancellazione è molto efficiente quando rimuove l'ultimo elemento. Visto che devi creare una variabile che tenga traccia dell'ultimo indice che contiene un elemento (nel diagramma qui sopra, 3), puoi rimuovere direttamente l'elemento usando l'indice.

3️⃣ Trovare un elemento

Hai tre opzioni per trovare un elemento in un array:

• Se conosci la sua posizione, usa l'indice.
• Se non conosci la sua posizione e i tuoi dati sono ordinati, puoi usare degli algoritmi per ottimizzare la tua ricerca, come la Ricerca Binaria.
• Se non conosci la sua posizione e i dati non sono ordinati, devi scorrere tutti gli elementi nell'array e verificare se l'elemento corrente è quello che stai cercando (vedi la serie di diagrammi qui sotto).

👋 Riepilogando …

• Gli array sono strutture dati estremamente potenti che conservano elementi dello stesso tipo. Il tipo degli elementi e la dimensione dell'array sono fissi e definiti in fase di creazione.
• La memoria è allocata immediatamente dopo che l'array è creato ed è vuota fino a quando non assegni i valori.
• Gli elementi sono posti in posizioni contigue di memoria, in modo che vi si possa accedere in modo molto efficiente (accesso casuale O(1) = tempo costante) usando gli indici.
• Gli indici partono da 0, non da 1 come siamo abituati.
• L'inserimento di elementi all'inizio o in mezzo all'array comporta lo spostamento degli elementi verso destra. Se l'array è pieno, occorre creare un nuovo array di maggiori dimensioni (il che non è molto efficiente). L'inserimento alla fine dell'array è molto efficiente - tempo costante O(1).
• La rimozione di elementi dall'inizio o nel mezzo dell'array comporta lo spostamento di tutti gli elementi verso sinistra per evitare di lasciare uno spazio vuoto in memoria. Questo garantisce che gli elementi siano conservati in spazi di memoria contigui. La rimozione di un elemento alla fine dell'array è molto efficiente in quanto cancelli solo l'ultimo elemento senza spostare gli altri.
• Per trovare un elemento, devi controllare l'intero array fino a quando non lo trovi. Se i dati sono ordinati, puoi usare algoritmi come la Ricerca Binaria per ottimizzare il processo.

“Impara dal passato, vivi nel presente, spera nel futuro. La cosa importante è non smettere di fare domande.”

— Albert Einstein

👋 Grazie!

Spero vivamente che ti sia piaciuto il mio articolo. ❤️
Seguimi su Twitter per trovare altri articoli come questo. 😃

Impara a conoscere le strutture dati che usi ogni giorno

👋 Benvenuto! Iniziamo con un po' di necessario contesto. Ho qualche domanda per te:
✅ Usi Google Search?
✅ Usi Google Maps?
✅ Usi i siti di social media?

Se la tua risposta è "sì" a una qualsiasi di queste domande, allora hai sicuramente utilizzato i grafi e non lo sapevi nemmeno! Sorpreso? 😲 Lo ero anch'io! Questo articolo ti fornirà un'introduzione visiva al mondo dei grafi, al loro scopo, elementi e tipi.

Queste strutture di dati hanno davvero attirato la mia attenzione grazie alle loro incredibili capacità. Sono così potenti che non immagini nemmeno quanto possano essere diverse le loro applicazioni nel mondo reale. Cominciamo! 😁

🌐 Applicazioni nel Mondo Reale — La Magia Inizia!

I grafi sono usati in diversi settori e campi:

• I sistemi GPS e Google Maps usano i grafi per trovare il percorso più breve da una destinazione a un'altra.
• I Social Network usano i grafi per rappresentare le connessioni tra utenti.
• L'algoritmo di Google Search usa i grafi per determinare la rilevanza dei risultati della ricerca.
• La Ricerca Operativa è un campo che utilizza i grafi per trovare il percorso ottimale per ridurre i costi di trasporto e consegna di beni e servizi.
• Anche la chimica usa i grafi per rappresentare le molecole!!! ❤️

Le loro applicazioni sono fantastiche, vero?
Iniziamo il nostro viaggio attraverso questo mondo! 😄

🔵 Ti Presento i Grafi!

Ora che hai un po' di contesto, iniziamo parlando del loro scopo principale e degli elementi che li costituiscono.

I grafi sono usati per rappresentare, trovare, analizzare e ottimizzare connessioni tra gli elementi (case, aeroporti, luoghi, utenti, articoli ecc.).

Questo è  un esempio dell'aspetto di un grafo:

💠 Elementi Costitutivi

Sono sicuro che avrai notato due elementi principali nel diagramma qui sopra: dei cerchi e delle linee spesse che li connettono tra loro. Sono chiamati rispettivamente nodi (nodes) e connessioni (edges).

Entriamo nei dettagli! 👍

• Nodi: sono gli  elementi che creano la rete. Potrebbero rappresentare case, luoghi, aeroporti, porti, fermate d'autobus, edifici, utenti, praticamente qualunque cosa tu possa rappresentare come collegata ad altri elementi simili in una rete.
• Connessioni: sono collegamenti tra i nodi. Potrebbero rappresentare strade, voli, percorsi di autobus, una connessione tra due utenti in un social network, o qualunque cosa che potrebbe possibilmente rappresentare una connessione tra nodi nel contesto nel quale stai operando.

😱 Cosa Succede Se Non Ci Sono Connessioni?

Se due nodi non sono collegati tra loro, vuol dire che non esiste connessione diretta tra i medesimi. Ma non ti spaventare! 😩 Potresti essere comunque in grado di andare da un nodo all'altro seguendo una serie di connessioni, come se passassi per diverse strade per raggiungere la tua destinazione finale. 🚛️ 🚛 🚛

Per esempio, nel diagramma qui sotto, sebbene non vi sia diretta connessione tra il nodo viola (a sinistra) e il nodo giallo (a destra), puoi comunque raggiungerlo dal nodo viola passando per il nodo arancione, poi per il nodo rosa, quindi per quello verde e arrivare finalmente al nodo giallo. 🏁

Questo è un aspetto chiave dei grafi, puoi trovare l'elemento desiderato seguendo i percorsi a disposizione.

🌟 Notazione e Terminologia

È molto importante imparare il "linguaggio" formale per lavorare con i grafi:

• |V| = Numero totale di vertici (nodi) in un grafo.
• |E| = Numero totale di connessioni in un grafo.

Nell'esempio che segue,  |V| = 6 in quanto ci sono sei nodi (i cerchi) ed |E| = 7 poiché ci sono sette connessioni (le righe).

📚 Tipi di Grafo

I grafi sono classificati in base alle caratteristiche delle loro connessioni. Vediamoli in dettaglio! 😃

1️⃣ Grafi Orientati

Nei grafi orientati, le connessioni hanno una direzione. Vanno da un nodo all'altro, e non c'è modo di tornare al nodo iniziale usando quella connessione.

Come puoi vedere nel diagramma qui sotto, le connessioni ora hanno delle frecce che puntano verso una specifica direzione. Pensa a queste connessioni come a strade a senso unico. Puoi andare in una direzione per raggiungere la tua destinazione, ma non puoi tornare indietro facendo la stessa strada, devi cercare un percorso alternativo.

🍕 Per esempio se per un servizio di consegna pizza a domicilio creiamo un grafo  che rappresenta una città, due case (i nodi) potrebbero essere connesse da una strada a senso unico. Potresti andare dalla casa A alla casa B passando per questa strada, ma non potresti ritornare, quindi dovresti utilizzare un percorso alternativo.

💡 Nota: In un grafo orientato, potresti non essere in grado di ritornare al tuo luogo di partenza in alcun modo se non esiste un percorso con le direzioni appropriate. 😞 Nel diagramma che segue, puoi notare che puoi andare dal nodo viola a quello verde, ma puoi vedere anche che non c'è modo di tornare dal nodo verde a quello viola, in quanto le connessioni sono "strade a senso unico".

2️⃣ Grafi Non Orientati

In questo tipo di grafi, le connessioni non sono orientate (non hanno una direzione specifica). Pensa a questo tipo di connessioni come a strade a doppio senso. Puoi andare da un nodo all'altro e tornare indietro usando lo stesso "percorso".

💡 Nota: Quando vedi un diagramma di un grafo dove le connessioni non hanno frecce che puntano verso una specifica direzione, puoi assumere che il grafo non è orientato.

🍕 Per il nostro servizio di consegna pizze a domicilio significherebbe che il veicolo per le consegna può andare dalla sorgente alla destinazione e tornare indietro usando la stessa strada o percorso (con sollievo del guidatore! 😇).

Nel grafo qui sotto potresti andare dal nodo viola a quello verde e tornare indietro seguendo lo stesso percorso, quindi non raggiungerai un punto di non ritorno. 😌

🏋 Pesi? — Sì, Pesi!

1️⃣ Grafici Ponderati

Nei grafici ponderati, ciascuna connessione ha un valore associato (chiamato peso). Questo valore viene usato per rappresentare una data relazione quantificabile tra i nodi che collega.

Per esempio i pesi potrebbero rappresentare distanza, tempo, il numero di connessioni condivise tra due utenti in un social network, o qualsiasi cosa che potrebbe essere usata per descrivere la connessione tra nodi nel contesto nel quale stai lavorando.

Questi pesi sono usati dall'algoritmo di Dijkstra per ottimizzare le rotte per trovare i percorsi più brevi o meno costosi tra i nodi in una rete.

2️⃣ Grafi Non Ponderati

Nei grafi non ponderati, al contrario, non abbiamo pesi associati alle loro connessioni. Un esempio di questo tipo di grafo si può trovare nei social network, dove le connessioni tra due utenti non possono essere quantificate. Pertanto la connessione non ha un peso.

💡 Nota: Potresti aver notato che, fino ad ora, i nostri grafi hanno solo una connessione che connette ciascuna coppia di nodi. È normale chiedersi se potrebbero esserci più connessioni tra una coppia di nodi. In effetti questo è possibile con i  Multigrafi! Essi possono avere più connessioni che connettono la stessa coppia di nodi.

🏆 Numero di Connessioni! — Un Fattore Importante

È molto importante sapere se un grafo ha molte o poche connessioni in quanto questo è un fattore cruciale per decidere come vorrai rappresentare questa struttura dati nel tuo codice. Vediamo i diversi tipi! 👍

1️⃣ Grafo Denso

Sono i grafi che hanno molte connessioni. Ma, un momento! ⚠️ So quello che starai pensando, come puoi quantificare "molte connessioni"? Questo è piuttosto soggettivo, giusto? 😇 Sono d'accordo con te, quindi quantifichiamole:

👉 Troviamo il numero massimo di connessioni in un grafo orientato. Se ci sono |V| nodi in un grafo orientato (sei, nell'esempio qui sotto), vuol dire che ogni nodo può avere fino a  |v| connessioni (nell'esempio qui sotto, sei).

Questo perché ogni nodo potrebbe potenzialmente essere connesso con tutti gli altri nodi e con sé stesso (vedi il "loop" qui sotto). Pertanto il numero massimo di connessioni che il grafo può avere è |V|*|V| , che rappresenta il numero totale di nodi moltiplicato per il numero massimo di connessioni che ogni nodo può avere.

Quando il numero di connessioni nel grafo è vicino al numero massimo di connessioni, il grafo è denso. 😉

💡 Nota: I “loop” si verificano quando un nodo ha una connessione che connette se stesso. Strano e interessante, vero? 😄

2️⃣ Grafi Sparsi

I grafi sparsi hanno poche connessioni. Come puoi vedere nel diagramma qui sotto, non ci sono molte connessioni tra i nodi.

Quando il numero di connessioni in un grafo è significativamente minore del numero massimo di connessioni, il grafo è sparso. 😉

⭕️ Ti Presento i Cicli!

Ora vediamo un concetto vitale per comprendere i grafi, i cicli.

Avrai probabilmente notato che, se segui una sequenza di connessioni in un grafo, potresti trovare il percorso che ti riporta allo stesso nodo. Questo è come "girare in tondo", esattamente come se stessi guidando per la tua città e prendessi un percorso che ti potrebbe portare al punto di partenza.

Nei grafi, questi percorsi "circolari" sono chiamati cicli. Sono percorsi validi che iniziano e finiscono allo stesso nodo. Per esempio, nel diagramma qui sotto, puoi vedere che partendo da qualsiasi nodo puoi ritornarci seguendo le connessioni.

I cicli non sono sempre "isolati" in quanto possono fare parte di un grafo più grande. Puoi rilevarli facendo partire la tua ricerca da uno specifico nodo e cercando un percorso che ti riporta allo stesso nodo.

👋 Riepilogando …

• I grafi sono strutture meravigliose che puoi usare quotidianamente tramite Google Search, Google Maps, GPS e i social media.
• Sono usati per rappresentare elementi che condividono connessioni.
• Gli elementi nel grafo sono chiamati nodi (nodes) i collegamenti tra loro connessioni (edges).
• I grafi possono essere orientati, quando le loro connessioni hanno uno specifico orientamento, simili alle strade a senso unico, oppure non orientati, quando le connessioni non hanno un orientamento specifico, simili alle strade a doppio senso.
• Le connessioni possono avere un valore associato ad esse, chiamato peso.
• Se un grafo ha molte connessioni si dice denso, altrimenti, se ha poche connessioni, viene detto sparso.
• Una serie di connessioni può formare un ciclo se esse creano un percorso che ti consente di tornare al nodo di partenza.

Continua ad apprendere queste stupende strutture! Ne varrà sicuramente la pena per il tuo futuro di programmatore. In questo momento sto imparando le strutture dati e le trovo assolutamente affascinanti. 😃 🎆 ❤️

La cosa importante è non smettere di fare domande. La curiosità esiste per ragioni proprie. — Albert Einstein

👋 Grazie!

Spero davvero che tu abbia apprezzato il mio articolo. ❤️
Seguimi su Twitter. 😃

La parola chiave di JavaScript this è uno degli aspetti del linguaggio più difficili da comprendere. Tuttavia è di importanza critica per la scrittura di codice JavaScript più avanzato.

In JavaScript, la parola chiave this ci consente di:

• Riutilizzare funzioni in diversi contesti di esecuzione. Vale a dire che una funzione, una volta definita, può essere chiamata per oggetti diversi usando la parola chiave this.
• Identificare l'oggetto nel contesto di esecuzione corrente quando chiamiamo un metodo.

La parola chiave this è strettamente associata  alle funzioni JavaScript. Quando si parla di this, la cosa fondamentale è capire dove viene chiamata una funzione, poiché non sappiamo a cosa si riferisca la parola chiave this fino a quando la funzione non viene invocata.

L'uso di  this può essere categorizzato in cinque diversi aspetti di binding (associazione). In questo articolo, esamineremo tutti e cinque gli aspetti con degli esempi.

Innanzitutto, Cos'è il Binding?

In JavaScript, un ambiente lessicale è il posto in cui viene fisicamente scritto il codice. Nell'esempio qui sotto, la variabile name dal punto di vista lessicale è all'interno della funzione sayName().

function sayName() {
  let name = 'someName';
  console.log('Il nome è, ', name);
 }

Un contesto di esecuzione fa riferimento al codice attualmente in esecuzione e tutto ciò che contribuisce a eseguirlo. Possono esserci molti ambienti lessicali a disposizione ma quello che è attualmente in esecuzione viene gestito dal contesto di esecuzione.

Ciascun contesto di esecuzione contiene un record di ambiente. Quando il motore JavaScript esegue il codice, variabili e nomi di funzioni vengono aggiunti al record di ambiente.

Questo fenomeno è noto in JavaScript come binding. Il binding aiuta l'associazione degli identificatori (variabili e nomi di funzioni) con la parola chiave this per costituire un contesto di esecuzione.

Non preoccuparti se trovi questo concetto difficile da capire adesso. Ne avrai una migliore comprensione mano a mano che procediamo.

Regola #1: Come Funziona il Binding Implicito di JavaScript

Il binding implicito copre la maggior parte dei casi d'uso per quanto riguarda la parola chiave this.

Quando invochiamo un metodo di un oggetto, usiamo la notazione punto (.) per accedervi. Nel binding implicito, devi verificare l'oggetto adiacente al metodo in fase di invocazione. Questo determina a cosa viene associato this.

Esaminiamo un esempio per capire meglio.

let blog = {
    name: 'Tapas',
    address: 'freecodecamp',
    message: function() {
        console.log(`${this.name} ha un blog su ${this.address}`);
    }
};

blog.message();

Qui this viene associato all'oggetto blog. Lo sappiamo perché chiamiamo il metodo message() sull'oggetto blog. Pertanto this.name sarà Tapas e this.address sarà  freeCodeCamp e tali valori verranno stampati nella console.

Vediamo un altro esempio per capire meglio questo concetto:

 function greeting(obj) {
      obj.logMessage = function() {
          console.log(`${this.name} ha ${this.age} anni!`);
      }
  };

  const tom = {
      name: 'Tom',
      age: 7
  };

  const jerry = {
      name: 'jerry',
      age: 3
  };

  greeting(tom);
  greeting(jerry);

  tom.logMessage ();
  jerry.logMessage ();

In questo esempio abbiamo due oggetti,  tom e jerry. Abbiamo decorato (arricchito) questi oggetti con un metodo chiamato logMessage().

Nota che quando invochiamo tom.logMessage(), il metodo viene chiamato sull'oggetto tom. Pertanto this è associato all'oggetto tom e i valori stampati saranno tom e 7 (this.name equivale a tom e this.age in questo caso è  7). Lo stesso vale quando viene invocato jerry.logMessage().

Regola #2: Come Funziona In JavaScript il Binding Esplicito

Abbiamo visto che JavaScript crea un ambiente per eseguire il codice che scriviamo. Si occupa della creazione in memoria di variabili, funzioni, oggetti e così via nella fase di creazione. Successivamente esegue il codice nella fase di esecuzione. Questo ambiente speciale viene chiamato contesto di esecuzione.

Possono essercene molti di questi ambienti (contesti di esecuzione) in un'applicazione JavaScript. Ogni contesto di esecuzione opera indipendentemente dagli altri.

A volte, tuttavia, potremmo voler usare cose che si trovano in un altro contesto di esecuzione. Ecco quando entra in gioco il binding esplicito.

Nel binding esplicito chiamiamo una funzione con un oggetto quando la funzione è al di fuori del contesto di esecuzione di quell'oggetto.

Ci sono tre metodi molto speciali:  call(), apply() e bind() che ci aiutano a ottenere il binding esplicito.

Come Funziona il Metodo call() di JavaScript

Con il metodo call(), il contesto nel quale la funzione deve essere chiamata verrà passato come parametro a  call(). Vediamo come funziona con un esempio:

let getName = function() {
     console.log(this.name);
 }
 
let user = {
   name: 'Tapas',
   address: 'Freecodecamp'  
 };

getName.call(user);

Qui sopra il metodo call() viene invocato su una funzione chiamata getName(). La funzione getName() stampa semplicemente alla console il valore di this.name. Ma cosa rappresenta this qui? Questo dipende da cosa è stato passato al metodo call().

In questo caso this sarà associato all'oggetto user, in quanto lo abbiamo passato come parametro al metodo call(). Pertanto this.name dovrebbe avere il valore associato alla proprietà name dell'oggetto user, vale a dire Tapas.

Nell'esempio qui sopra abbiamo passato solo un argomento a call(). Tuttavia  possiamo passare molteplici argomenti a call(), in questo modo:

let getName = function(hobby1, hobby2) {
     console.log('A ' + this.name + ' piace ' + hobby1 + ' , ' + hobby2);
 }

let user = {
   name: 'Tapas',
   address: 'Bangalore'  
 };

let hobbies = ['Nuotare', 'Tenere un Blog'];
 
getName.call(user, hobbies[0], hobbies[1]);

Qui abbiamo passato diversi argomenti al metodo call(). Il primo argomento deve essere il contesto dell'oggetto nel quale la funzione deve essere chiamata. Gli altri parametri potrebbero essere semplicemente valori da usare.

In questo caso sto passando Nuotare e Tenere un Blog come due parametri della funzione getName().

Hai notato il punto dolente qui? Nel caso di call(), gli argomenti devono essere passati uno ad uno  – il che non è un modo intelligente di fare le cose!. Ecco quando il nostro prossimo metodo, apply(), entra in  gioco.

Come Funziona il Metodo apply() in JavaScript

Questo modo di passare argomenti al metodo call() può essere risolto usando un metodo alternativo chiamato apply(). Funziona esattamente come call(), ma ti consente di passare gli argomenti in modo più conveniente. Dai un'occhiata a questo codice:

let getName = function(hobby1, hobby2) {
     console.log('A ' + this.name + ' piace ' + hobby1 + ' , ' + hobby2);
 }
 
let user = {
   name: 'Tapas',
   address: 'Bangalore'  
 };

let hobbies = ['Nuotare', 'Tenere un Blog'];
 
getName.apply(user, hobbies);

Qui siamo in grado di passare un array di argomenti, il che è molto più conveniente rispetto al passarli ad uno ad uno.

Suggerimento: Quando hai solo uno o nessun valore di argomento da passare, usa call(). Quando hai diversi valori di argomento, usa apply().

Come Funziona il Metodo bind() di JavaScript

Il metodo bind() è simile al metodo call(), con una differenza: diversamente da call(), che chiama la funzione direttamente,  bind() ritorna una funzione completamente nuova che possiamo invocare.

let getName = function(hobby1, hobby2) {
     console.log('A ' + this.name + ' piace ' + hobby1 + ' , ' + hobby2);
 }

let user = {
   name: 'Tapas',
   address: 'Bangalore'  
 };

let hobbies = ['Nuotare', 'Tenere un Blog'];
let newFn = getName.bind(user, hobbies[0], hobbies[1]); 

newFn();

Qui getName.bind() non chiama la funzione getName() direttamente. Ritorna una nuova funzione, newFn che possiamo invocare come newFn().

Rule #3: Il Binding new di JavaScript

La parola chiave new è usata per creare un oggetto dalla funzione costruttore.

let Cartoon = function(name, character) {
     this.name = name;
     this.character = character;
     this.log = function() {
         console.log(this.name +  ' è un ' + this.character);
     }
 };

Puoi creare oggetti usando la parola chiave new in questo modo:

 let tom = new Cartoon('Tom', 'Gatto');
 let jerry = new Cartoon('Jerry', 'Topo');

Quando una funzione viene invocata con la parola chiave new, JavaScript crea un oggetto this interno (così: this = {}) nella funzione. Il this appena creato si associa all'oggetto in fase di creazione usando la parola chiave new.

Sembra complicato? Ok, esaminiamolo approfonditamente. Osserva questa riga:

let tom = new Cartoon('Tom', 'Gatto');

Qui la funzione Cartoon viene invocata con la parola chiave new . Quindi il this creato internamente sarà associato al nuovo oggetto creato qui, che è tom.

Regola #4: Binding dell'Oggetto Globale di JavaScript

Quale pensi che sarà il risultato del codice qui sotto? A cosa è associato this qui?

let sayName = function(name) {
    console.log(this.name);
};

window.name = 'Tapas';
sayName();

Se la parola chiave this non viene risolta con alcuno dei binding, implicito, esplicito o new, allora this viene associata all'oggetto globale window() .

Esiste un'eccezione, tuttavia, la modalità strict (strict mode) di JavaScript non consente questo binding predefinito.

"use strict";
function myFunction() {
  return this;
}

Nell'esempio qui sopra,  this è undefined.

Regola #5: Binding di un Evento HTML in JavaScript

Nei gestori di eventi HTML, this viene associato all'elemento HTML che riceve l'evento.

<button onclick="console.log(this)">Click Me!</button>

Questo è il risultato nella console del click sul pulsante:

"<button onclick='console.log(this)'>Click Me!</button>"

Puoi cambiare lo stile del pulsante al click dell'utente usando la parola chiave this, in questo modo:

<button onclick="this.style.color='teal'">Click Me!</button>

Tuttavia, fai attenzione quando chiami una funzione per gestire un clic del pulsante e usi this all'interno di quella funzione; ipotizziamo questo codice HTML.

<button onclick="changeColor()">Click Me!</button>

e questo codice JavaScript:

function changeColor() {
  this.style.color='teal';
}

Quanto sopra non funzionerà come atteso. Come abbiamo visto nella regola  4, in questo caso this sarà associato all'oggetto globale (in modalità non strict), laddove non esiste un oggetto style con il quale impostare il colore.

Riepilogo

Per riassumere,

• In caso di binding implicito,  this viene associato all'oggetto adiacente all'operatore punto (.) quando si invoca il metodo.
• In caso di binding esplicito, possiamo chiamare una funzione con un oggetto quando la funzione è al di fuori del contesto di esecuzione dell'oggetto stesso. I metodi call(), apply(), e bind() giocano un grosso ruolo qui.
• Quando una funzione viene chiamata con la parola chiave new, la parola chiave this all'interno della funzione si associa al nuovo oggetto che si sta costruendo.
• Quando la parola chiave  this non è risolta con alcuna dei binding, implicito, esplicito o new, allora this viene associato all'oggetto globale window(). Nella modalità strict di JavaScript, this sarà undefined.
• Nei gestori di evento HTML,  this viene associato all'elemento HTML che riceve l'evento.

C'è un ulteriore caso nel quale  this si comporta in modo differente, vale a dire le funzioni freccia E6. Daremo uno sguardo a questo caso in un articolo successivo.

Spero che tu abbia trovato utile questo articolo. Ti potrebbero anche piacere:

• JavaScript Hoisting Internals
• Understanding JavaScript Execution Context like never before
• JavaScript Scope Fundamentals with Tom and Jerry
• Understanding JavaScript Closure with example

Se hai apprezzato questo articolo, condividilo in modo che altri lo possano leggere. Puoi menzionarmi su Twitter (@tapasadhikary) nei tuoi commenti, oppure sentiti libero di seguirmi.

Cos'è un Algoritmo di Grafo?

Gli algoritmi di grafo sono un insieme di istruzioni per attraversare (visitare i nodi di) un grafo.

Alcuni algoritmi sono usati per trovare uno specifico nodo o il percorso tra due dati nodi.

Perché gli Algoritmi di Grafo Sono Importanti

I grafi sono strutture dati molto utili che possono essere usate per modellare diversi problemi. Questi algoritmi hanno applicazione diretta nei siti di Social Network, nella modellazione di Macchine a Stati e molto altro.

Alcuni Comuni Algoritmi di Grafo

Alcuni dei più comuni sono:

• Ricerca in Ampiezza - Breadth First Search (BFS)
• Ricerca in Profondità - Depth First Search (DFS)
• Algoritmo di Dijkstra
• Algoritmo di Floyd-Warshall

Algoritmo di Bellman Ford

L'algoritmo di Bellman Ford è l'algoritmo per trovare il percorso più breve per grafi che possono avere pesi negativi. Questo algoritmo è anche valido per rilevare cicli di pesi negativi visto che l'algoritmo converge verso una soluzione ottimale in O(V*E) passaggi. Se quanto risultato non è ottimale, allora il grafo contiene un ciclo di peso negativo.

Ecco un'implementazione in  Python:

infinity = 1e10

def bellman_ford(graph, start, end):
    num_vertices = graph.get_num_vertices()
    edges = graph.get_edges()

    distance = [infinity for vertex in range(num_vertices)]
    previous = [None for vertex in range(num_vertices)]

    distance[start] = 0
    for i range(end+1):
        for (u, v) in edges:
            if distance[v] > distance[u] + graph.get_weight(u, v):
                distance[v] = distance[u] + graph.get_weight(u, v)
                previous[v] = u

    for (u,v) in edges:
        if distance[v] > distance[u] + graph.get_weight(u, v):
            raise NegativeWeightCycleError()
    return distance, previous
# 'distance' è la distanza dall'inizio verso quel nodo con il
# percorso più breve, utile per stampare la distanza più breve.
# 'previous' è un array che contiene il nodo che viene prima di 
# quello corrente, utile per stampare il percorso.

Ricerca in Profondità - Deep Search First (DFS)

È uno dei più semplici algoritmi di grafo. Attraversa il grafo prima verificando il nodo corrente, poi spostandosi verso uno dei suoi successori e ripetendo il processo. Se il nodo corrente non ha successori da verificare, torna indietro al suo predecessore e il processo continua (spostandosi verso un altro successore). Se viene trovata la soluzione la ricerca si arresta.

Implementazione (C++14)

#include <iostream> 
#include <vector> 
#include <queue>  
#include <algorithm>
using namespace std; 
 
class Graph{ 
   int v;    // numero di vertici 
 
   // puntatore a un vettore che contiene una lista di adiacenze
   vector < int > *adj;
public: 
   Graph(int v);  // Costruttore 
 
   // funzione per aggiugere una connessione tra due nodi (edge)
   void add_edge(int v, int w);  
 
   // stampa l'attraversamento dfs da una data sorgente `s` 
   void dfs();
   void dfs_util(int s, vector < bool> &visited);   
}; 
 
Graph::Graph(int v){ 
   this -> v = v; 
   adj = new vector < int >[v]; 
} 
 
void Graph::add_edge(int u, int v){ 
   adj[u].push_back(v); // aggiunge v alla lista u
   adj[v].push_back(v);  // aggiunge u alla lista v (elimina questa istruzione se il grafo è diretto!)
} 
void Graph::dfs(){
   // vettore dei visitati - per tenere traccia dei visitati durante la ricerca DFS
   vector < bool > visited(v, false);  // marca tutti i nodi/vertici come non visitati
   for(int i = 0; i < v; i++)
       if(!visited[i])
           dfs_util(i, visited);
} 
// nota l'utilizzo di una chiamata per riferimento qui!
void Graph::dfs_util(int s, vector < bool > &visited){ 
   // marca il nodo/vertice corrente come visitato
   visited[s] = true;
    // stampa allo standard output (schermo)
   cout << s << " ";
   
   // attraversa la suo lista di adiacenze e chiama ricorsivamente dfs_util per tutti i suoi vicini!
   // (solo se il vicino non è ancora stato visitato!)
   for(vector < int > :: iterator itr = adj[s].begin(); itr != adj[s].end(); itr++)
       if(!visited[*itr])
           dfs_util(*itr, visited); 
} 
 
int main() 
{ 
   // crea un grafo usando la classe Graph definita qui sopra
   Graph g(4); 
   g.add_edge(0, 1); 
   g.add_edge(0, 2); 
   g.add_edge(1, 2); 
   g.add_edge(2, 0); 
   g.add_edge(2, 3); 
   g.add_edge(3, 3); 
 
   cout << "Il seguente è l'attraversamento Deep First del grafo fornito"
        << "(a partire dal vertice 0): "; 
   g.dfs(); 
   // il risultato sarebbe: 0 1 2 3
   return 0; 
} 

Valutazione

Complessità di spazio: O(n)

Complessità temporale per il caso peggiore O(n). Depth First Search è completo su una serie di nodi finita. Funziona meglio su alberi shallow (vale a dire alberi che hanno una piccola altezza o profondità, cioè un limitato numero di livelli o strati - n.d.t.).

Implementazione di DFS in C++

#include<iostream>
#include<vector>
#include<queue>

using namespace std;

struct Graph{
	int v;
	bool **adj;
	public:
		Graph(int vcount);
		void addEdge(int u,int v);
		void deleteEdge(int u,int v);
		vector<int> DFS(int s);
		void DFSUtil(int s,vector<int> &dfs,vector<bool> &visited);
};
Graph::Graph(int vcount){
	this->v = vcount;
	this->adj=new bool*[vcount];
	for(int i=0;i<vcount;i++)
		this->adj[i]=new bool[vcount];
	for(int i=0;i<vcount;i++)
		for(int j=0;j<vcount;j++)
			adj[i][j]=false;
}

void Graph::addEdge(int u,int w){
	this->adj[u][w]=true;
	this->adj[w][u]=true;
}

void Graph::deleteEdge(int u,int w){
	this->adj[u][w]=false;
	this->adj[w][u]=false;
}

void Graph::DFSUtil(int s, vector<int> &dfs, vector<bool> &visited){
	visited[s]=true;
	dfs.push_back(s);
	for(int i=0;i<this->v;i++){
		if(this->adj[s][i]==true && visited[i]==false)
			DFSUtil(i,dfs,visited);
	}
}

vector<int> Graph::DFS(int s){
	vector<bool> visited(this->v);
	vector<int> dfs;
	DFSUtil(s,dfs,visited);
	return dfs;
}

Algoritmo di Floyd Warshall

È un ottimo algoritmo per trovare la distanza più breve tra tutti i vertici in un grafo. È un algoritmo molto conciso e una complessità temporale di O(V^3) (dove V è il numero dei vertici). Può essere usato con pesi negativi, anche se i cicli di pesi negativi non devono essere presenti nei grafi.

Valutazione

Complessità di spazio: O(V^2)

Complessità temporale per il caso peggiore: O(V^3)

Implementazione Python

# Un grande valore come infinito
inf = 1e10 

def floyd_warshall(weights):
    V = len(weights)
    distance_matrix = weights
    for k in range(V):
        next_distance_matrix = [list(row) for row in distance_matrix] # fa una copia della matrice di distanze
        for i in range(V):
            for j in range(V):
                # Sceglie se il vertice k può andare bene come percorso con una distanza minore
                next_distance_matrix[i][j] = min(distance_matrix[i][j], distance_matrix[i][k] + distance_matrix[k][j])
        distance_matrix = next_distance_matrix # update
    return distance_matrix

# Un grafo rappresentato come matrice delle adiacenze 
graph = [
    [0, inf, inf, -3],
    [inf, 0, inf, 8],
    [inf, 4, 0, -2],
    [5, inf, 3, 0]
]

print(floyd_warshall(graph))

Ricerca in Ampiezza - Breadth First Search (BFS)

È uno degli algoritmi di grafo più semplici. Attraversa il grafo prima verificando il nodo corrente, quindi espandendosi aggiungendo i suoi successori al livello successivo. Questo processo viene ripetuto per tutti i nodi nel livello corrente prima di spostarsi a quello successivo. Se la soluzione viene trovata, la ricerca si arresta.

Visualizzazione

Valutazione

Complessità di spazio: O(n)

Complessità per il caso peggiore: O(n)

La Ricerca in Ampiezza è completa su un insieme finito di nodi e ottimale se il costo dello spostamento da un nodo all'altro è costante.

Codice C++ per l'implementazione di BFS

// Programma per stampre l'attraversamento BFS da un dato
// vertice sorgente. BFS(int s) attraversa i vertici
// raggiungibili da s
#include<iostream> 
#include <list> 
  
using namespace std; 
  
// Questa classe rappresenta un grafo diretto usando una
// rappresentazione con lista di adiacenze
class Graph 
{ 
    int V;    // No. of vertices 
  
    // Puntatore a un array che contiene una lista di adiacenze
    list<int> *adj;    
public: 
    Graph(int V);  // Costruttore
  
    // funczione per aggiungere una connessione tra due nodi (edge) al grafo
    void addEdge(int v, int w);  
  
    // stampa l'attraversamento BFS da una data sorgente s
    void BFS(int s);   
}; 
  
Graph::Graph(int V) 
{ 
    this->V = V; 
    adj = new list<int>[V]; 
} 
  
void Graph::addEdge(int v, int w) 
{ 
    adj[v].push_back(w); // Add w to v’s list. 
} 
  
void Graph::BFS(int s) 
{ 
    // marca tutti i vertici come non visitati
    bool *visited = new bool[V]; 
    for(int i = 0; i < V; i++) 
        visited[i] = false; 
  
    // Crea una coda per BFS 
    list<int> queue; 
  
    // Marca il nodo corrente come visitato e lo accoda
    visited[s] = true; 
    queue.push_back(s); 
  
    // 'i' verrà usato per ottenere tutti i vertici 
    // adiacenti di un vertice
    list<int>::iterator i; 
  
    while(!queue.empty()) 
    { 
        // Fa uscire un vertice dalla code e lo stampa
        s = queue.front(); 
        cout << s << " "; 
        queue.pop_front(); 
  
        // Ottiene tutti i vertici adiacenti di quello 
        // tolto dalla coda s. Se una adiacente non è stato
        // visitato, viene marcato come visitato e accodato
        for (i = adj[s].begin(); i != adj[s].end(); ++i) 
        { 
            if (!visited[*i]) 
            { 
                visited[*i] = true; 
                queue.push_back(*i); 
            } 
        } 
    } 
} 
  
// Programma per testare i metodi della classe Graph
int main() 
{ 
    // Crea un grafo dato il diagramma seguente
    Graph g(4); 
    g.addEdge(0, 1); 
    g.addEdge(0, 2); 
    g.addEdge(1, 2); 
    g.addEdge(2, 0); 
    g.addEdge(2, 3); 
    g.addEdge(3, 3); 
  
    cout << "Il seguente è un attraversamento Breadth First Traversal "
         << "(a partire dal vertice 2) \n"; 
    g.BFS(2); 
  
    return 0; 
}

Algoritmo di Dijkstra

È un algoritmo presentato da E.W. Dijkstra. Cerca la sorgente del percorso più breve in un grafo con connessioni (edge) non negative (perché?).

Creiamo 2 array: visited e distance, che registrano rispettivamente se un vertice è visitato e qual è la distanza minima dal vertice sorgente. Inizialmente l'array visited viene assegnato con valori false e distance come infinito.

Partiamo dal vertice sorgente, che sarà u, e i suoi vertici adiacenti v. Ora per ogni v che è adiacente a u, la distanza è aggiornata se non è stato visitato prima e la distanza da u è minore della distanza corrente. Poi selezioniamo il vertice successivo con la distanza minore e che non sia stato ancora visitato.

Una coda di priorità è spesso usata per soddisfare quest'ultimo requisito nel minor tempo. Qui sotto un'implementazione della stessa idea usando PriorityQueue in Java.

import java.util.*;
public class Dijkstra {
    class Graph {
	LinkedList<Pair<Integer>> adj[];
	int n; // Numero di vertici.
	Graph(int n) {
	    this.n = n;
	    adj = new LinkedList[n];
	    for(int i = 0;i<n;i++) adj[i] = new LinkedList<>();
	}
	// aggiunge una connessione tra i vertici a e b con il costo come peso	public void addEdgeDirected(int a, int b, int cost) {
	    adj[a].add(new Pair(b, cost));
	}
	public void addEdgeUndirected(int a, int b, int cost) {
	    addEdgeDirected(a, b, cost);
	    addEdgeDirected(b, a, cost);
	}
    }
    class Pair<E> {
	E first;
	E second;
	Pair(E f, E s) {
	    first = f;
	    second = s;
	}
    }

    // Comparator per ordinare gli oggetti Pairs nella Priority Queue
    class PairComparator implements Comparator<Pair<Integer>> {
	public int compare(Pair<Integer> a, Pair<Integer> b) {
	    return a.second - b.second;
	}
    }

    // Calola il percorso più corto dalla sorgente per ogni vertice e ritorna la distanza
    public int[] dijkstra(Graph g, int src) {
	int distance[] = new int[g.n]; // la distanza più breve di ciascun vertice da src
	boolean visited[] = new boolean[g.n]; // il vertice è visitato o no
	Arrays.fill(distance, Integer.MAX_VALUE);
	Arrays.fill(visited, false);
	PriorityQueue<Pair<Integer>> pq = new PriorityQueue<>(100, new PairComparator());
        pq.add(new Pair<Integer>(src, 0));
	distance[src] = 0;
	while(!pq.isEmpty()) {
	    Pair<Integer> x = pq.remove(); // Estrae il vertice con la distanza più breve da src
	    int u = x.first;
	    visited[u] = true;
	    Iterator<Pair<Integer>> iter = g.adj[u].listIterator();
	    // Itera sui vicini di u e aggiorna le loro distanze
	    while(iter.hasNext()) {
		Pair<Integer> y = iter.next();
		int v = y.first;
		int weight = y.second;
		// Verifica se il vertice v non è visitato
		// Se il nuovo percorso attraverso u offre un costo minore allora aggiorna l'array distance e aggiungi a pq
		if(!visited[v] && distance[u]+weight<distance[v]) {
		    distance[v] = distance[u]+weight;
		    pq.add(new Pair(v, distance[v]));
		}
	    }
	}
	return distance;
    }

    public static void main(String args[]) {
	Dijkstra d = new Dijkstra();
	Dijkstra.Graph g = d.new Graph(4);
	g.addEdgeUndirected(0, 1, 2);
	g.addEdgeUndirected(1, 2, 1);
	g.addEdgeUndirected(0, 3, 6);
	g.addEdgeUndirected(2, 3, 1);
	g.addEdgeUndirected(1, 3, 3);

	int dist[] = d.dijkstra(g, 0);
	System.out.println(Arrays.toString(dist));
    }
}

Algoritmo di Ford Fulkerson

Questo algoritmo risolve il problema del massimo flusso del grafo. Trova la migliore soluzione di flusso tramite le connessioni (edge) dei grafi in modo da ottenere il massimo flusso in uscita dall'altra parte. La sorgente ha una specifica velocità di input e ciascuna connessione ha un peso associato a essa che è la quantità massima che può passare attraverso quella connessione.

L'algoritmo di Ford Fulkerson è anche chiamato algoritmo di Edmund-Karp visto che le specifiche complete sono state fornite da Jack Edmonds e Richard Karp.

Funziona creando percorsi di aumento, ovvero percorsi dalla sorgente all'uscita che hanno un flusso non zero. Facciamo passare il flusso attraverso i percorsi e aggiorniamo i limiti. Ciò può portare a situazioni in cui non abbiamo più mosse disponibili. Ecco dove la capacità di "annullamento" di questo algoritmo gioca un ruolo importante. In caso di blocco, diminuiamo il flusso e apriamo la connessione per far passare la nostra sostanza corrente.

Passaggi

1. Imposta il flusso a zero per tutte le connessioni.
2. Fintanto che c'è un percorso dalla sorgente allo scarico:
3. Cerca il peso minimo sul percorso, che associ a  limit .
4. Trova tutte le connessioni (u, v) sul percorso e:
   1. Aggiungi  limit  al flusso da u a v. (Per la mossa corrente)
   2. Sottrai  limit  dal flusso da v a u (Per un annullamento della mossa in futuro)

Valutazione

Complessità temporale: O(V*E^2)

Implementazione Python

# Un numero grande per infinito
inf = 1e10

def maximum_flow(graph, source, sink):
  max_flow = 0
  parent = bfs(graph, source, sink)
  while path:
    limit = inf
    v = sink
    while v != source:
        u = parent[s]
        path_flow = min(limit, graph[u][v])
        v = parent[v]
    max_flow += path_flow

    v = sink
    while v != source:
        u = parent[v]
        graph[u][v] -= path_flow
        graph[v][u] += path_flow
        v = parent[v]

    path = bfs(graph, source, sink)
  return max_flow

Ho creato e utilizzato molte API negli ultimi anni. In questo periodo, mi sono imbattuto in buone e cattive pratiche e ho sperimentato brutte situazioni durante l'utilizzo e la creazione di API. Ma ci sono stati anche grandi momenti.

Ci sono articoli utili online che presentano molte migliori pratiche, ma secondo me molti di essi mancano di praticità. Conoscere la teoria con pochi esempi va bene, ma mi sono sempre chiesto come sarebbe l'implementazione in un esempio più attinente al mondo reale.

Fornire esempi semplici aiuta nella comprensione del concetto stesso senza molta complessità, ma in pratica le cose non sono sempre così semplici. Sono piuttosto sicuro che sai di cosa sto parlando 😁

Ecco perché ho deciso di scrivere questo tutorial. Ho unito insieme tutte le cose (buone e meno buone) che ho appreso in un articolo fruibile fornendo un esempio pratico che può essere seguito. Alla fine, creeremo un'API completa mentre implementeremo una buona pratica dopo l'altra.

Alcune cose da ricordare prima di partire:

Le buone pratiche, come potresti avere intuito, non sono leggi o regole specifiche da seguire. Sono convenzioni o suggerimenti che si sono evoluti nel tempo e si sono rivelati efficaci. Al giorno d'oggi, alcune sono diventate lo standard. Tuttavia questo non vuol dire che tu le debba adottare in toto.

Dovrebbero fornirti una direzione per rendere la tua API migliore per quanto riguarda l'esperienza utente (sia chi la usa che chi la crea), la sicurezza e le prestazioni.

Tieni a mente che i progetti sono diversi e richiedono diversi approcci. Potrebbero esserci situazioni nelle quali non puoi o non dovresti seguire certe convenzioni. Quindi ogni sviluppatore deve prendere queste decisioni in autonomia o con i suoi colleghi.

Ora che abbiamo tolto di mezzo queste cose, senza ulteriori indugi, mettiamoci al lavoro!

Sommario

• Il nostro progetto di esempio
• Prerequisiti
• Architettura
• Impostazione di base
• Migliori pratiche per API REST
• Versionamento
• Nomi risorse al plurale
• Accettare e rispondere con dati in formato JSON
• Rispondere con codici di errore standard HTTP
• Evitare verbi nei nomi degli endpoint
• Raggruppare risorse associate
• Integrare filtro, ordinamento e paginazione
• Usare cache dei dati per migliorare le prestazioni
• Buone pratiche di sicurezza
• Documentare correttamente la tua API
• Conclusione

Il Nostro Progetto di Esempio

Prima di iniziare l'implementazione delle migliori pratiche nel nostro progetto di esempio, ti faccio una breve introduzione di ciò che andremo a creare.

Creeremo un'API REST per una Applicazione di Allenamento CrossFit. Se non sei familiare con il CrossFit, si tratta di un metodo di fitness e uno sport competitivo che combina allenamenti ad alta intensità con elementi da parecchi sport (sollevamento pesi, ginnastica e altri).

Nella nostra applicazione vorremmo creare, leggere, aggiornare e cancellare i WOD (Workouts of the Day - Allenamenti della giornata). Questo aiuterà i nostri utenti (vale a dire i proprietari di palestre) a generare piani di allenamento e tracciare i propri allenamenti all'interno di una singola applicazione. Inoltre potranno anche aggiungere qualche importante suggerimento di allenamento per ciascuna sessione.

Il nostro compito sarà la progettazione e l'implementazione di un'API per quell'applicazione.

Prerequisiti

Per seguire il tutorial dovrai avere qualche esperienza di JavaScript, Node.js, Express.js e di architettura di backend. Termini come REST e API non dovrebbero essere nuovi per te e dovresti avere una comprensione del Modello Client-Server.

Naturalmente non devi essere un esperto in questi campi, ma averne familiarità e possibilmente qualche esperienza dovrebbe essere sufficiente.

Se non hai tutti i prerequisiti, ovviamente non è un motivo per saltare questo tutorial. C'è ancora molto da imparare qui anche per te. Ma avere queste conoscenze ti renderà più facile seguire.

Anche se questa API è scritta in JavaScript e usa Express, le migliori pratiche non si limitano a questi strumenti. Possono essere applicate anche ad altri linguaggi di programmazione o framework.

Architettura

Come discusso qui sopra, useremo Express.js per la nostra API. Non voglio creare un'architettura complessa, quindi mi piacerebbe attenermi all'architettura a 3 livelli:

All'interno del Controller gestiremo tutto ciò che abbia relazione con HTTP. Il che vuol dire che avremo a che fare con richieste e risposte per i nostri endpoint. Sopra questo livello c'è anche un piccolo Router da Express che instrada le richieste al controller corrispondente.

Tutta la logica di business sarà nel Service Layer (Livello Servizio) che esporta certi servizi (metodi) usati dal controller.

Il terzo livello, Data Access Layer  (Livello di Accesso Dati) sarà dove lavoreremo con il nostro database. Esporteremo alcuni metodi per certe operazioni di database come creare un WOD (allenamento del giorno) che può essere usato dal nostro Service Layer.

Nel nostro esempio non useremo un vero database come MongoDB o PostgreSQL in quanto preferirei concentrarmi maggiormente sulle migliori pratiche stesse. Pertanto useremo un file JSON locale che imita il nostro database. Tuttavia questa logica può essere trasferita ad altri database, naturalmente.

Impostazione di Base

Ora dovremmo essere in grado di creare l'impostazione di base per la nostra API. Non complicheremo eccessivamente le cose e costruiremo una struttura di progetto semplice ma organizzata.

Per prima cosa creiamo la struttura di directory generale con tutti i file necessari e le dipendenze. Quindi eseguiremo un piccolo test per verificare che tutto venga eseguito correttamente:

# Crea la directory del progetto e portati su di essa
mkdir crossfit-wod-api && cd crossfit-wod-api

# Crea una cartella src e portati su di essa
mkdir src && cd src

# Crea le sotto cartelle
mkdir controllers && mkdir services && mkdir database && mkdir routes

# Crea un file indice (il punto di entrata della nostra API)
touch index.js

# Attualmente ci troviamo nella cartella src, quindi dobbiamo prima salire di un livello 
cd .. 

# Crea il file package.json 
npm init -y

Installa le dipendenze per l'impostazione di base:

# Dipendenze di sviluppo
npm i -D nodemon 

# Dipendenze 
npm i express

Apri il progetto con il tuo editor di testo preferito e configura Express:

// In src/index.js 
const express = require("express"); 

const app = express(); 
const PORT = process.env.PORT || 3000; 

// A scopo di test 
app.get("/", (req, res) => { 
    res.send("<h2>It's Working!</h2>"); 
}); 

app.listen(PORT, () => { 
    console.log(`API is listening on port ${PORT}`); 
});

Aggiungi un nuovo script chiamato "dev" all'interno di package.json:

{
  "name": "crossfit-wod-api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon src/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.15"
  },
  "dependencies": {
    "express": "^4.17.3"
  }
}

Lo script si assicura che il server di sviluppo venga riavviato automaticamente quando eseguiamo delle modifiche (grazie a nodemon).

Lancia il server di sviluppo:

npm run dev

Se osservi il tuo terminale, dovresti vedere un messaggio che dice "API is listening on port 3000".

All'interno del tuo browser vai a localhost:3000. Se tutto è impostato correttamente, dovresti vedere quanto segue:

Grande! Ora tutto è impostato per implementare le migliori pratiche.

Migliori Pratiche per API REST

Bene! Ora che abbiamo un'impostazione veramente di base per Express, possiamo estendere la nostra API con le seguenti migliori pratiche.

Iniziamo in modo semplice con i nostri endpoint CRUD fondamentali. Successivamente estenderemo l'API con ciascuna migliore pratica.

Versionamento

Aspetta un secondo. Prima di scrivere codice specifico per qualsiasi API dobbiamo essere consapevoli del versionamento. Come in ogni altra applicazione, ci saranno miglioramenti, nuove funzionalità e cose di questo genere. Quindi è importante applicare un buon versionamento anche alla nostra API.

Il grande vantaggio è che possiamo lavorare con nuove funzionalità o miglioramenti su una nuova versione mentre i client stanno ancora usando la versione corrente e non saranno interessati da modifiche non retro compatibili.

Non forzeremo neanche i client ad adottare la nuova versione immediatamente. Possono usare la versione corrente e migrare in autonomia quando la nuova versione è stabile.

La versione corrente e la nuova sono praticamente in esecuzione in parallelo e non interferiscono tra loro.

Come possiamo differenziare le versioni? Una buona pratica è aggiungere un segmento di percorso come v1 o v2 all'interno dell'URL.

// Versione 1 
"/api/v1/workouts" 

// Versione 2 
"/api/v2/workouts" 

// ...

Ecco ciò che esporremo al mondo esterno, quello che sarà utilizzato da altri sviluppatori. Dobbiamo anche strutturare il nostro progetto per poter differenziare ogni versione.

Ci sono molti approcci diversi per la gestione del versionamento all'interno di una API Express. Nel nostro caso, vorrei creare una sotto cartella per ogni versione all'interno della directory src chiamata v1, v2 e così via.

mkdir src/v1

Ora spostiamo la cartella routes nella nuova directory v1.

# Ottieni il percorso della tua directory corrente (copialo)
pwd 

# Sposta "routes" in "v1" (inserisci il percorso ricavato qui sopra in {pwd}) 
mv {pwd}/src/routes {pwd}/src/v1

La nuova directory /src/v1/routes conterrà tutte le nostre rotte per la versione 1. Aggiungeremo "vero" contenuto successivamente. Per ora aggiungiamo un semplice file index.js per vedere se funziona.

# In /src/v1/routes 
touch index.js

All'interno del file inseriamo il codice per avviare un semplice router.

// In src/v1/routes/index.js
const express = require("express");
const router = express.Router();

router.route("/").get((req, res) => {
  res.send(`<h2>Hello from ${req.baseUrl}</h2>`);
});

module.exports = router;

Ora dobbiamo attaccare il nostro router per v1 all'interno del punto di entrata radice nel file src/index.js.

// In src/index.js
const express = require("express");
// *** AGGIUNGI ***
const v1Router = require("./v1/routes");

const app = express();
const PORT = process.env.PORT || 3000;

// *** RIMUOVI ***
app.get("/", (req, res) => {
  res.send("<h2>It's Working!</h2>");
});

// *** AGGIUNGI ***
app.use("/api/v1", v1Router);

app.listen(PORT, () => {
  console.log(`API is listening on port ${PORT}`);
});

Ora nel tuo browser vai a localhost:3000/api/v1 e dovresti vedere quanto segue:

Congratulazioni! Hai appena strutturato il progetto per gestire diverse versioni. Ora passiamo le richieste in arrivo su /api/v1 alla versione 1 del nostro router, il quale successivamente instraderà ogni richiesta al metodo del controller corrispondente.

Prima di continuare, vorrei sottolineare una cosa.

Abbiamo appena spostato la nostra cartella routes all'interno della directory v1. Le altre cartelle come controllers o services rimangono ancora nella directory src. Questo va bene per adesso in quanto stiamo creando un'API piuttosto piccola. Possiamo usare gli stessi controller e servizi in ogni versione globalmente.

Quando l'API sta crescendo e richiede diversi metodi di controller specifici per la versione v2, per esempio, sarebbe una idea migliore spostare la cartella controllers all'interno della directory v2 in modo di avere tutta la logica specifica per quella particolare versione incapsulata.

Un'altra ragione per fare questo potrebbe essere che potremmo cambiare un servizio che è usato da tutte le altre versioni. Non vogliamo che ci siano problemi di compatibilità con altre versioni. Pertanto sarebbe una decisione saggia spostare anche la cartella services all'interno della cartella della specifica versione.

Come detto in precedenza, tuttavia, nel nostro esempio ritengo che vada bene differenziare solo le rotte e lasciare che il router gestisca il resto. Cionondimeno è importante tenere a mente di avere una struttura pulita quando l'API cresce di dimensioni e necessita di modifiche.

Nomi di Risorse al Plurale

Dopo aver impostato tutto possiamo concentrarci sulla vera implementazione della nostra API. Come ho detto, vorrei iniziare con gli endpoint CRUD fondamentali.

In altre parole, iniziamo implementando gli endpoint per creare, leggere, aggiornare ed eliminare gli allenamenti.

Per prima cosa creiamo un controller, un servizio e un router specifici per i nostri allenamenti (workout).

touch src/controllers/workoutController.js 

touch src/services/workoutService.js 

touch src/v1/routes/workoutRoutes.js

Mi piace sempre partire prima con le rotte. Pensiamo come denominare i nostri endpoint. Ciò va di pari passo con questa particolare miglior pratica.

Possiamo denominare l'endpoint di creazione /api/v1/workout in quanto vorremmo aggiungere un altro allenamento, giusto? Praticamente c'è nulla di sbagliato con questo approccio, ma può portare a fraintendimenti.

Ricorda sempre: la tua API viene usata da altri esseri umani e dovrebbe essere precisa. Questo si applica anche per la denominazione delle tue risorse.

Ho sempre immaginato una risorsa come una scatola. Nel nostro esempio la scatola è una collezione che contiene diversi allenamenti (workouts).

Usare il plurale per denominare le tue risorse ha il grande vantaggio che per le altre persone risulta chiaro che si tratta di una collezione di diversi allenamenti.

Pertanto definiamo i nostri endpoint all'interno del router nel file workoutRoutes.js.

// In src/v1/routes/workoutRoutes.js
const express = require("express");
const router = express.Router();

router.get("/", (req, res) => {
  res.send("Get all workouts");
});

router.get("/:workoutId", (req, res) => {
  res.send("Get an existing workout");
});

router.post("/", (req, res) => {
  res.send("Create a new workout");
});

router.patch("/:workoutId", (req, res) => {
  res.send("Update an existing workout");
});

router.delete("/:workoutId", (req, res) => {
  res.send("Delete an existing workout");
});

module.exports = router;

Puoi eliminare il file di test index.js all'interno di src/v1/routes.

Ora passiamo ai nostri punti di entrata e agganciamo il nostro router per la versione v1 (v1WorkoutRouter).

// In src/index.js
const express = require("express");
// *** RIMUOVI ***
const v1Router = require("./v1/routes");
// *** AGGIUNGI ***
const v1WorkoutRouter = require("./v1/routes/workoutRoutes");

const app = express();
const PORT = process.env.PORT || 3000;

// *** RIMUOVI ***
app.use("/api/v1", v1Router);

// *** AGGIUNGI ***
app.use("/api/v1/workouts", v1WorkoutRouter);

app.listen(PORT, () => {
  console.log(`API is listening on port ${PORT}`);
});

È andato tutto liscio, giusto? Ora catturiamo tutte le richieste verso /api/v1/workouts con il nostro v1WorkoutRouter.

All'interno del nostro router chiameremo un metodo diverso gestito dal nostro controller per ciascun endpoint.

Creiamo un metodo per ciascun endpoint. Inviamo semplicemente un messaggio di risposta, dovrebbe bastare per adesso.

// In src/controllers/workoutController.js
const getAllWorkouts = (req, res) => {
  res.send("Get all workouts");
};

const getOneWorkout = (req, res) => {
  res.send("Get an existing workout");
};

const createNewWorkout = (req, res) => {
  res.send("Create a new workout");
};

const updateOneWorkout = (req, res) => {
  res.send("Update an existing workout");
};

const deleteOneWorkout = (req, res) => {
  res.send("Delete an existing workout");
};

module.exports = {
  getAllWorkouts,
  getOneWorkout,
  createNewWorkout,
  updateOneWorkout,
  deleteOneWorkout,
};

Ora è tempo di rifattorizzare un po' il nostro router e usare i metodi del controller.

// In src/v1/routes/workoutRoutes.js
const express = require("express");
const workoutController = require("../../controllers/workoutController");

const router = express.Router();

router.get("/", workoutController.getAllWorkouts);

router.get("/:workoutId", workoutController.getOneWorkout);

router.post("/", workoutController.createNewWorkout);

router.patch("/:workoutId", workoutController.updateOneWorkout);

router.delete("/:workoutId", workoutController.deleteOneWorkout);

module.exports = router;

Ora possiamo testare le nostre richieste GET per l'endopoint /api/v1/workouts/:workoutId digitando localhost:3000/api/v1/workouts/2342 nel browser. Dovresti vedere qualcosa tipo questo:

Ci siamo riusciti! Il primo livello della nostra architettura è fatto. Creiamo ora il livello del servizio implementando la nostra prossima migliore pratica.

Accettare e Rispondere con Dati in Formato JSON

Quando interagisci con un'API, invii sempre dati specifici con la tua richiesta oppure ricevi dati con la risposta. Ci sono molti formati di dato diversi ma JSON (JavaScript Object Notation) è un formato standardizzato.

Anche se JSON contiene il termine JavaScript, non legato specificatamente a questo linguaggio. Puoi scrivere le tue API anche in Java o Python, che sono anch'essi in grado di gestire bene JSON.

A causa della sua standardizzazione, l'API dovrebbe accettare e rispondere con dati in formato JSON.

Diamo uno sguardo alla nostra implementazione corrente e vediamo come possiamo integrare questa miglior pratica.

Per prima cosa creiamo il nostro livello di servizio.

// In src/services/workoutService.js
const getAllWorkouts = () => {
  return;
};

const getOneWorkout = () => {
  return;
};

const createNewWorkout = () => {
  return;
};

const updateOneWorkout = () => {
  return;
};

const deleteOneWorkout = () => {
  return;
};

module.exports = {
  getAllWorkouts,
  getOneWorkout,
  createNewWorkout,
  updateOneWorkout,
  deleteOneWorkout,
};

È anche una buona pratica denominare i metodi del servizio allo stesso modo dei metodi del controller, in modo da avere una connessione tra questi. Iniziamo con il restituire nulla.

All'interno del controller nel file workoutController.js possiamo usare questi metodi.

// In src/controllers/workoutController.js
// *** AGGIUNGI***
const workoutService = require("../services/workoutService");

const getAllWorkouts = (req, res) => {
  // *** AGGIUNGI ***
  const allWorkouts = workoutService.getAllWorkouts();
  res.send("Get all workouts");
};

const getOneWorkout = (req, res) => {
  // *** AGGIUNGI ***
  const workout = workoutService.getOneWorkout();
  res.send("Get an existing workout");
};

const createNewWorkout = (req, res) => {
  // *** AGGIUNGI ***
  const createdWorkout = workoutService.createNewWorkout();
  res.send("Create a new workout");
};

const updateOneWorkout = (req, res) => {
  // *** AGGIUNGI ***
  const updatedWorkout = workoutService.updateOneWorkout();
  res.send("Update an existing workout");
};

const deleteOneWorkout = (req, res) => {
  // *** AGGIUNGI ***
  workoutService.deleteOneWorkout();
  res.send("Delete an existing workout");
};

module.exports = {
  getAllWorkouts,
  getOneWorkout,
  createNewWorkout,
  updateOneWorkout,
  deleteOneWorkout,
};

Al momento non dovrebbe cambiare nulla all'interno delle nostre risposte. Tuttavia sotto il cofano il livello controller ora parla con il livello servizio.

All'interno dei metodi del servizio gestiremo la nostra logica di business come la trasformazione delle strutture dati e la comunicazione con il livello database.

Per fare questo, ci serve un database e una collezione di metodi che gestisca effettivamente l'interazione con il database. Il nostro database sarà un semplice file JSON che abbiamo già valorizzato in precedenza con qualche allenamento.

# Crea un nuovo file chiamato db.json all'interno di src/database 
touch src/database/db.json 

# Crea un file workout.js che contiene tutti i metodi specifici per l'allenamento in /src/database 
touch src/database/Workout.js

Copia quanto segue in db.json:

{
  "workouts": [
    {
      "id": "61dbae02-c147-4e28-863c-db7bd402b2d6",
      "name": "Tommy V",
      "mode": "For Time",
      "equipment": [
        "barbell",
        "rope"
      ],
      "exercises": [
        "21 thrusters",
        "12 rope climbs, 15 ft",
        "15 thrusters",
        "9 rope climbs, 15 ft",
        "9 thrusters",
        "6 rope climbs, 15 ft"
      ],
      "createdAt": "4/20/2022, 2:21:56 PM",
      "updatedAt": "4/20/2022, 2:21:56 PM",
      "trainerTips": [
        "Split the 21 thrusters as needed",
        "Try to do the 9 and 6 thrusters unbroken",
        "RX Weights: 115lb/75lb"
      ]
    },
    {
      "id": "4a3d9aaa-608c-49a7-a004-66305ad4ab50",
      "name": "Dead Push-Ups",
      "mode": "AMRAP 10",
      "equipment": [
        "barbell"
      ],
      "exercises": [
        "15 deadlifts",
        "15 hand-release push-ups"
      ],
      "createdAt": "1/25/2022, 1:15:44 PM",
      "updatedAt": "3/10/2022, 8:21:56 AM",
      "trainerTips": [
        "Deadlifts are meant to be light and fast",
        "Try to aim for unbroken sets",
        "RX Weights: 135lb/95lb"
      ]
    },
    {
      "id": "d8be2362-7b68-4ea4-a1f6-03f8bc4eede7",
      "name": "Heavy DT",
      "mode": "5 Rounds For Time",
      "equipment": [
        "barbell",
        "rope"
      ],
      "exercises": [
        "12 deadlifts",
        "9 hang power cleans",
        "6 push jerks"
      ],
      "createdAt": "11/20/2021, 5:39:07 PM",
      "updatedAt": "11/20/2021, 5:39:07 PM",
      "trainerTips": [
        "Aim for unbroken push jerks",
        "The first three rounds might feel terrible, but stick to it",
        "RX Weights: 205lb/145lb"
      ]
    }
  ]
}

Come puoi vedere ci sono tre allenamenti inseriti. Un allenamento contiene i campi id, name, mode, equipment, exercises, createdAt, updatedAt, e trainerTips, (rispettivamente  id, nome, modalità, equipaggiamenti, esercizi, creatoIl, aggiornatoIl e suggerimentiAllenatore - n.d.t.).

Partiamo con il più semplice e ritorniamo tutti gli allenamenti che sono stati salvati, poi iniziamo a implementare il metodo corrispondente all'interno del livello di accesso dati (src/database/Workout.js).

Ancora una volta, ho scelto di denominare il metodo qui con lo stesso nome di quello del servizio e del controller, ma è completamente opzionale.

// In src/database/Workout.js
const DB = require("./db.json");

const getAllWorkouts = () => {
  return DB.workouts;
};

module.exports = { getAllWorkouts };

Torniamo nuovamente al servizio nel file workoutService.js e implementiamo la logica per getAllWorkouts.

// In src/services/workoutService.js
// *** AGGIUNGI ***
const Workout = require("../database/Workout");
const getAllWorkouts = () => {
  // *** AGGIUNGI ***
  const allWorkouts = Workout.getAllWorkouts();
  // *** AGGIUNGI ***
  return allWorkouts;
};

const getOneWorkout = () => {
  return;
};

const createNewWorkout = () => {
  return;
};

const updateOneWorkout = () => {
  return;
};

const deleteOneWorkout = () => {
  return;
};

module.exports = {
  getAllWorkouts,
  getOneWorkout,
  createNewWorkout,
  updateOneWorkout,
  deleteOneWorkout,
};

Ritornare tutti gli allenamenti è piuttosto semplice e non dobbiamo fare trasformazioni in quanto è già un file JSON. Non dobbiamo neppure ricevere alcun argomento per ora. Quindi questa implementazione è piuttosto semplice, ma ci torneremo sopra in futuro.

Tornando al controller in workoutControllers.js riceviamo il valore di ritorno da workoutService.getAllWorkouts() e lo inviamo semplicemente al client. Abbiamo girato al controller la risposta dal database tramite il nostro servizio.

// In src/controllers/workoutControllers.js
const workoutService = require("../services/workoutService");

const getAllWorkouts = (req, res) => {
  const allWorkouts = workoutService.getAllWorkouts();
  // *** AGGIUNGI ***
  res.send({ status: "OK", data: allWorkouts });
};

const getOneWorkout = (req, res) => {
  const workout = workoutService.getOneWorkout();
  res.send("Get an existing workout");
};

const createNewWorkout = (req, res) => {
  const createdWorkout = workoutService.createNewWorkout();
  res.send("Create a new workout");
};

const updateOneWorkout = (req, res) => {
  const updatedWorkout = workoutService.updateOneWorkout();
  res.send("Update an existing workout");
};

const deleteOneWorkout = (req, res) => {
  workoutService.deleteOneWorkout();
  res.send("Delete an existing workout");
};

module.exports = {
  getAllWorkouts,
  getOneWorkout,
  createNewWorkout,
  updateOneWorkout,
  deleteOneWorkout,
};

Nel browser vai a localhost:3000/api/v1/workouts e dovresti vedere la risposta in formato JSON.

È andata alla grande! Rispondiamo con dati in formato JSON. E per quanto riguarda quello che accettiamo? Pensiamo a un endpoint dove riceviamo dati JSON dal client. L'endpoint per creare o aggiornare un allenamento necessita di dati dal client.

All'interno del controller estraiamo il corpo della richiesta per creare un nuovo allenamento e lo passiamo al servizio. All'interno del servizio lo inseriamo nel nostro DB.json e inviamo l'allenamento appena creato al client.

Per essere in grado di elaborare JSON inviato all'interno del corpo di una richiesta dobbiamo prima installare body-parser e configurarlo.

npm i body-parser

// In src/index.js 
const express = require("express");
// *** AGGIUNGI ***
const bodyParser = require("body-parser");
const v1WorkoutRouter = require("./v1/routes/workoutRoutes");

const app = express();
const PORT = process.env.PORT || 3000;

// *** AGGIUNGI ***
app.use(bodyParser.json());
app.use("/api/v1/workouts", v1WorkoutRouter);

app.listen(PORT, () => {
  console.log(`API is listening on port ${PORT}`);
});

Ora siamo in grado di ricevere dati in formato JSON all'interno del nostro controller in req.body.

Per eseguire un test appropriato, apriamo il nostro client HTTP preferito (io uso Postman), creiamo una richiesta POST a localhost:3000/api/v1/workouts e nel corpo della richiesta inseriamo in formato JSON quanto segue:

{
  "name": "Core Buster",
  "mode": "AMRAP 20",
  "equipment": [
    "rack",
    "barbell",
    "abmat"
  ],
  "exercises": [
    "15 toes to bars",
    "10 thrusters",
    "30 abmat sit-ups"
  ],
  "trainerTips": [
    "Split your toes to bars into two sets maximum",
    "Go unbroken on the thrusters",
    "Take the abmat sit-ups as a chance to normalize your breath"
  ]
}

Come potresti aver notato, ci sono alcune proprietà mancanti come "id", "createdAt" e "updatedAt". È compito della nostra API aggiungere queste proprietà prima dell'inserimento. Ce ne occuperemo all'interno del servizio che gestisce gli allenamenti successivamente.

All'interno del metodo createNewWorkout nel controller, nel file workoutController.js, possiamo estrarre il corpo dall'oggetto request, effettuare qualche validazione e passarlo come argomento per il nostro servizio.

// In src/controllers/workoutController.js
...

const createNewWorkout = (req, res) => {
  // *** AGGIUNGI ***
  const { body } = req;
  if (
    !body.name ||
    !body.mode ||
    !body.equipment ||
    !body.exercises ||
    !body.trainerTips
  ) {
    return;
  }
  // *** AGGIUNGI ***
  const newWorkout = {
    name: body.name,
    mode: body.mode,
    equipment: body.equipment,
    exercises: body.exercises,
    trainerTips: body.trainerTips,
  };
  // *** AGGIUNGI ***
  const createdWorkout = workoutService.createNewWorkout(newWorkout);
  // *** AGGIUNGI ***
  res.status(201).send({ status: "OK", data: createdWorkout });
};

...

Per migliorare la validazione della richiesta in genere vorrai usare un pacchetto di terze parti come express-validator.

Passiamo al servizio che gestisce gli allenamenti e riceviamo i dati dal controller all'interno del metodo createNewWorkout.

Dopo avere aggiunto le proprietà mancanti all'oggetto, lo passiamo a un nuovo metodo nel nostro livello di accesso dati per conservarlo nel nostro DB.

Per prima cosa creiamo una semplice funzione di utilità che sovrascrive il nostro file JSON per salvare i nuovi dati.

# Crea un file utils.js all'interno della directory database 
touch src/database/utils.js

// In src/database/utils.js
const fs = require("fs");

const saveToDatabase = (DB) => {
  fs.writeFileSync("./db.json", JSON.stringify(DB, null, 2), {
    encoding: "utf-8",
  });
};

module.exports = { saveToDatabase };

Poi possiamo usare questa funzione nel nostro file Workout.js.

// In src/database/Workout.js
const DB = require("./db.json");
// *** AGGIUNGI ***
const { saveToDatabase } = require("./utils");


const getAllWorkouts = () => {
  return DB.workouts;
};

// *** AGGIUNGI ***
const createNewWorkout = (newWorkout) => {
  const isAlreadyAdded =
    DB.workouts.findIndex((workout) => workout.name === newWorkout.name) > -1;
  if (isAlreadyAdded) {
    return;
  }
  DB.workouts.push(newWorkout);
  saveToDatabase(DB);
  return newWorkout;
};

module.exports = {
  getAllWorkouts,
  // *** AGGIUNGI ***
  createNewWorkout,
};

È andato tutto bene! Il passaggio successivo consiste nell'utilizzare i metodi del database all'interno del nostro servizio.

# Installa il pacchetto uuid 
npm i uuid

// In src/services/workoutService.js
// *** AGGIUNGI ***
const { v4: uuid } = require("uuid");
// *** AGGIUNGI ***
const Workout = require("../database/Workout");

const getAllWorkouts = () => {
    const allWorkouts = Workout.getAllWorkouts();
    return allWorkouts;
};

const getOneWorkout = () => {
  return;
};

const createNewWorkout = (newWorkout) => {
  // *** AGGIUNGI ***
  const workoutToInsert = {
    ...newWorkout,
    id: uuid(),
    createdAt: new Date().toLocaleString("en-US", { timeZone: "UTC" }),
    updatedAt: new Date().toLocaleString("en-US", { timeZone: "UTC" }),
  };
  // *** AGGIUNGI ***
  const createdWorkout = Workout.createNewWorkout(workoutToInsert);
  return createdWorkout;
};

const updateOneWorkout = () => {
  return;
};

const deleteOneWorkout = () => {
  return;
};

module.exports = {
  getAllWorkouts,
  getOneWorkout,
  createNewWorkout,
  updateOneWorkout,
  deleteOneWorkout,
};

Wow! Divertente, non è vero? Ora puoi usare il tuo client HTTP e inviare la richiesta POST nuovamente, dovresti ricevere il nuovo allenamento creato in formato  JSON.

Se provi ad aggiungere lo stesso allenamento nuovamente, riceverai un codice di stato 201, senza che l'allenamento venga inserito.

Questo significa che il nostro metodo di database per ora cancella gli inserimenti e non ritorna nulla. Infatti la nostra istruzione if verifica se un allenamento con lo stesso nome si trova già nel database. Per ora va bene così, gestiremo questa casistica nella nostra prossima miglior pratica!

Ora nel tuo browser invia una richiesta GET a localhost:3000/api/v1/workouts per ottenere tutti gli allenamenti. Dovresti vedere che il nostro allenamento è stato inserito e salvato con successo:

Puoi implementare gli altri metodi in autonomia oppure puoi semplicemente copiare le mia implementazioni.

Per primo il controller (puoi copiare semplicemente tutto il contenuto):

// In src/controllers/workoutController.js
const workoutService = require("../services/workoutService");

const getAllWorkouts = (req, res) => {
  const allWorkouts = workoutService.getAllWorkouts();
  res.send({ status: "OK", data: allWorkouts });
};

const getOneWorkout = (req, res) => {
  const {
    params: { workoutId },
  } = req;
  if (!workoutId) {
    return;
  }
  const workout = workoutService.getOneWorkout(workoutId);
  res.send({ status: "OK", data: workout });
};

const createNewWorkout = (req, res) => {
  const { body } = req;
  if (
    !body.name ||
    !body.mode ||
    !body.equipment ||
    !body.exercises ||
    !body.trainerTips
  ) {
    return;
  }
  const newWorkout = {
    name: body.name,
    mode: body.mode,
    equipment: body.equipment,
    exercises: body.exercises,
    trainerTips: body.trainerTips,
  };
  const createdWorkout = workoutService.createNewWorkout(newWorkout);
  res.status(201).send({ status: "OK", data: createdWorkout });
};

const updateOneWorkout = (req, res) => {
  const {
    body,
    params: { workoutId },
  } = req;
  if (!workoutId) {
    return;
  }
  const updatedWorkout = workoutService.updateOneWorkout(workoutId, body);
  res.send({ status: "OK", data: updatedWorkout });
};

const deleteOneWorkout = (req, res) => {
  const {
    params: { workoutId },
  } = req;
  if (!workoutId) {
    return;
  }
  workoutService.deleteOneWorkout(workoutId);
  res.status(204).send({ status: "OK" });
};

module.exports = {
  getAllWorkouts,
  getOneWorkout,
  createNewWorkout,
  updateOneWorkout,
  deleteOneWorkout,
};

Quindi il servizio (puoi copiare semplicemente tutto il contenuto):

// In src/services/workoutServices.js
const { v4: uuid } = require("uuid");
const Workout = require("../database/Workout");

const getAllWorkouts = () => {
  const allWorkouts = Workout.getAllWorkouts();
  return allWorkouts;
};

const getOneWorkout = (workoutId) => {
  const workout = Workout.getOneWorkout(workoutId);
  return workout;
};

const createNewWorkout = (newWorkout) => {
  const workoutToInsert = {
    ...newWorkout,
    id: uuid(),
    createdAt: new Date().toLocaleString("en-US", { timeZone: "UTC" }),
    updatedAt: new Date().toLocaleString("en-US", { timeZone: "UTC" }),
  };
  const createdWorkout = Workout.createNewWorkout(workoutToInsert);
  return createdWorkout;
};

const updateOneWorkout = (workoutId, changes) => {
  const updatedWorkout = Workout.updateOneWorkout(workoutId, changes);
  return updatedWorkout;
};

const deleteOneWorkout = (workoutId) => {
  Workout.deleteOneWorkout(workoutId);
};

module.exports = {
  getAllWorkouts,
  getOneWorkout,
  createNewWorkout,
  updateOneWorkout,
  deleteOneWorkout,
};

Infine implementiamo i nostri metodi di database all'interno del livello di accesso dati (puoi copiare semplicemente tutto il contenuto):

// In src/database/Workout.js
const DB = require("./db.json");
const { saveToDatabase } = require("./utils");

const getAllWorkouts = () => {
  return DB.workouts;
};

const getOneWorkout = (workoutId) => {
  const workout = DB.workouts.find((workout) => workout.id === workoutId);
  if (!workout) {
    return;
  }
  return workout;
};

const createNewWorkout = (newWorkout) => {
  const isAlreadyAdded =
    DB.workouts.findIndex((workout) => workout.name === newWorkout.name) > -1;
  if (isAlreadyAdded) {
    return;
  }
  DB.workouts.push(newWorkout);
  saveToDatabase(DB);
  return newWorkout;
};

const updateOneWorkout = (workoutId, changes) => {
  const indexForUpdate = DB.workouts.findIndex(
    (workout) => workout.id === workoutId
  );
  if (indexForUpdate === -1) {
    return;
  }
  const updatedWorkout = {
    ...DB.workouts[indexForUpdate],
    ...changes,
    updatedAt: new Date().toLocaleString("en-US", { timeZone: "UTC" }),
  };
  DB.workouts[indexForUpdate] = updatedWorkout;
  saveToDatabase(DB);
  return updatedWorkout;
};

const deleteOneWorkout = (workoutId) => {
  const indexForDeletion = DB.workouts.findIndex(
    (workout) => workout.id === workoutId
  );
  if (indexForDeletion === -1) {
    return;
  }
  DB.workouts.splice(indexForDeletion, 1);
  saveToDatabase(DB);
};

module.exports = {
  getAllWorkouts,
  createNewWorkout,
  getOneWorkout,
  updateOneWorkout,
  deleteOneWorkout,
};

Grande! Ora passiamo alla prossima miglior pratica e vediamo come possiamo gestire gli errori in modo appropriato.

Rispondere con Codici di Errore Standard HTTP

Siamo già arrivati piuttosto lontano, ma non abbiamo ancora finito. La nostra API ha ora la capacità di gestire operazioni CRUD di base con conservazione dati. Grande, ma non l'ideale tuttavia.

Come mai? Fammi spiegare.

In un mondo perfetto va tutto liscio senza alcun errore. Ma come probabilmente saprai nel modo reale si possono verificare molti errori, da una prospettiva sia umana che tecnica.

Probabilmente potresti conoscere quella strana sensazione quando le cose funzionano bene fin dall'inizio senza errori. Questo è fantastico e divertente, ma come sviluppatori siamo più abituati a cose che non funzionano correttamente. 😁

Lo stesso vale per la nostra API. Dovremmo gestire quelle situazioni nelle quali le cose potrebbero andare male oppure generare un errore. Questo contribuirà a rendere la nostra API più robusta.

Quando qualcosa non va (sia nella richiesta che all'interno della nostra API) restituiamo un codice di errore HTTP. Ho visto e usato API che ritornavano sempre il codice di errore 400 quando una richiesta conteneva errori senza alcun messaggio specifico sul PERCHÉ  questo errore si era verificato o quale fosse. Pertanto il debug diventava problematico.

Ecco la ragione per la quale è sempre buona pratica ritornare il codice di errore HTTP appropriato per ciascun caso. Questo aiuta l'utilizzatore o lo sviluppatore che ha creato l'API a identificare il problema più facilmente.

Per migliorare l'esperienza possiamo anche inviare un veloce messaggio di errore assieme al codice dell'errore con la risposta. Ma come ho scritto nell'introduzione, questo non è sempre saggio e dovrebbe essere deciso dal programmatore stesso.

Per esempio, ci si dovrebbe pensare bene prima di ritornare qualcosa come "Questo username ha già effettuato il login" in quanto si forniscono informazioni sui tuoi utenti che andrebbero tenute nascoste.

Nella nostra API Crossfit esaminiamo la creazione di un endpoint e vediamo quali errori potrebbero verificarsi e come gestirli. Alla fine di questa sezione troverai nuovamente l'implementazione completa per gli altri endpoint.

Iniziamo con il metodo createNewWorkout all'interno del controller:

// In src/controllers/workoutController.js
...

const createNewWorkout = (req, res) => {
  const { body } = req;
  if (
    !body.name ||
    !body.mode ||
    !body.equipment ||
    !body.exercises ||
    !body.trainerTips
  ) {
    return;
  }
  const newWorkout = {
    name: body.name,
    mode: body.mode,
    equipment: body.equipment,
    exercises: body.exercises,
    trainerTips: body.trainerTips,
  };
  const createdWorkout = workoutService.createNewWorkout(newWorkout);
  res.status(201).send({ status: "OK", data: createdWorkout });
};

...

Abbiamo già intercettato il caso nel quale il corpo della richiesta non è composto correttamente e mancano chiavi che sono richieste.

Questo sarebbe un buon esempio per ritornare un errore HTTP 400 con un relativo messaggio di errore che (tradotto - n.d.t.) dice: "Una delle seguenti chiavi è mancante o vuota nel corpo della richiesta: 'name', 'mode', 'equipment', 'exercises', 'trainerTips".

// In src/controllers/workoutController.js
...

const createNewWorkout = (req, res) => {
  const { body } = req;
  if (
    !body.name ||
    !body.mode ||
    !body.equipment ||
    !body.exercises ||
    !body.trainerTips
  ) {
    res
      .status(400)
      .send({
        status: "FAILED",
        data: {
          error:
            "One of the following key is missing or is empty in request body: 'name', 'mode', 'equipment', 'exercises', 'trainerTips'",
        },
      });
    return;
  }
  const newWorkout = {
    name: body.name,
    mode: body.mode,
    equipment: body.equipment,
    exercises: body.exercises,
    trainerTips: body.trainerTips,
  };
  const createdWorkout = workoutService.createNewWorkout(newWorkout);
  res.status(201).send({ status: "OK", data: createdWorkout });
};

...

Se cerchi di aggiungere un nuovo allenamento ma dimentichi di passare la proprietà "mode" nel corpo della richiesta, dovresti vedere un messaggio di errore assieme al codice di errore HTTP 400.

Uno sviluppatore che utilizza l'API è ora meglio informato su cosa cercare. Saprà immediatamente di dover cercare all'interno del corpo della richiesta per verificare se non sia stata fornita una delle proprietà richieste.

Lasciare questo messaggio di errore più generico per tutte le proprietà per ora va bene. In genere dovresti usare un validatore di schema per gestire questo.

Andiamo a un livello più profondo nel nostro servizio workout e vediamo quali potenziali errori si potrebbero verificare.

// In src/services/workoutService.js
...

const createNewWorkout = (newWorkout) => {
  const workoutToInsert = {
    ...newWorkout,
    id: uuid(),
    createdAt: new Date().toLocaleString("en-US", { timeZone: "UTC" }),
    updatedAt: new Date().toLocaleString("en-US", { timeZone: "UTC" }),
  };
  const createdWorkout = Workout.createNewWorkout(workoutToInsert);
  return createdWorkout;
};

...

Una cosa che potrebbe andare male è l'inserimento nel database con il metodo Workout.createNewWorkout(). Mi piace incapsulare questa parte di codice in un blocco  try/catch per intercettare l'errore quando si verifica.

// In src/services/workoutService.js
...

const createNewWorkout = (newWorkout) => {
  const workoutToInsert = {
    ...newWorkout,
    id: uuid(),
    createdAt: new Date().toLocaleString("en-US", { timeZone: "UTC" }),
    updatedAt: new Date().toLocaleString("en-US", { timeZone: "UTC" }),
  };
  try {
    const createdWorkout = Workout.createNewWorkout(workoutToInsert);
    return createdWorkout;
  } catch (error) {
    throw error;
  }
};

...

Ogni errore che si verifica all'interno del metodo Workout.createNewWorkout() verrà catturato all'interno del blocco catch. Lo reiteriamo semplicemente, in modo da poter modellare le nostre risposte successivamente all'interno del nostro controller.

Definiamo i nostri errori in Workout.js:

// In src/database/Workout.js
...

const createNewWorkout = (newWorkout) => {
  const isAlreadyAdded =
    DB.workouts.findIndex((workout) => workout.name === newWorkout.name) > -1;
  if (isAlreadyAdded) {
    throw {
      status: 400,
      message: `Workout with the name '${newWorkout.name}' already exists`,
    };
  }
  try {
    DB.workouts.push(newWorkout);
    saveToDatabase(DB);
    return newWorkout;
  } catch (error) {
    throw { status: 500, message: error?.message || error };
  }
};

...

Come puoi vedere, un errore consiste di due parti, uno stato e un messaggio. Sto usando semplicemente la parola chiave throw per ritornare una struttura dati diversa da una stringa, che è richiesta se usi throw new Error().

Un piccolo svantaggio nell'inviare l'errore con throw è che non si ha uno stack trace. Normalmente questa generazione dell'errore dovrebbe essere gestita da una libreria di terze parti di nostra scelta (per esempio Mongoose se usi un database MongoDB). Per lo scopo di questo tutorial questo dovrebbe essere sufficiente.

Ora siamo in grado di generare e catturare gli errori nel servizio e nel livello di accesso dati. Possiamo passare ora al controller, catturare anche qui gli errori e rispondere di conseguenza.

// In src/controllers/workoutController.js
...

const createNewWorkout = (req, res) => {
  const { body } = req;
  if (
    !body.name ||
    !body.mode ||
    !body.equipment ||
    !body.exercises ||
    !body.trainerTips
  ) {
    res
      .status(400)
      .send({
        status: "FAILED",
        data: {
          error:
            "One of the following keys is missing or is empty in request body: 'name', 'mode', 'equipment', 'exercises', 'trainerTips'",
        },
      });
    return;
  }
  const newWorkout = {
    name: body.name,
    mode: body.mode,
    equipment: body.equipment,
    exercises: body.exercises,
    trainerTips: body.trainerTips,
  };
  // *** ADD ***
  try {
    const createdWorkout = workoutService.createNewWorkout(newWorkout);
    res.status(201).send({ status: "OK", data: createdWorkout });
  } catch (error) {
    res
      .status(error?.status || 500)
      .send({ status: "FAILED", data: { error: error?.message || error } });
  }
};

...

Puoi fare un test aggiungendo un allenamento con lo stesso nome due volte oppure non fornire una proprietà richiesta all'interno del corpo della tua richiesta. Dovresti ricevere i codici di errore HTTP corrispondenti, oltre ai messaggi di errore.

Per ricapitolare e passare al prossimo suggerimento, puoi copiare l'intera implementazione dei metodi nei seguenti file oppure puoi provare da solo:

// In src/controllers/workoutController.js
const workoutService = require("../services/workoutService");

const getAllWorkouts = (req, res) => {
  try {
    const allWorkouts = workoutService.getAllWorkouts();
    res.send({ status: "OK", data: allWorkouts });
  } catch (error) {
    res
      .status(error?.status || 500)
      .send({ status: "FAILED", data: { error: error?.message || error } });
  }
};

const getOneWorkout = (req, res) => {
  const {
    params: { workoutId },
  } = req;
  if (!workoutId) {
    res
      .status(400)
      .send({
        status: "FAILED",
        data: { error: "Parameter ':workoutId' can not be empty" },
      });
  }
  try {
    const workout = workoutService.getOneWorkout(workoutId);
    res.send({ status: "OK", data: workout });
  } catch (error) {
    res
      .status(error?.status || 500)
      .send({ status: "FAILED", data: { error: error?.message || error } });
  }
};

const createNewWorkout = (req, res) => {
  const { body } = req;
  if (
    !body.name ||
    !body.mode ||
    !body.equipment ||
    !body.exercises ||
    !body.trainerTips
  ) {
    res
      .status(400)
      .send({
        status: "FAILED",
        data: {
          error:
            "One of the following keys is missing or is empty in request body: 'name', 'mode', 'equipment', 'exercises', 'trainerTips'",
        },
      });
    return;
  }
  const newWorkout = {
    name: body.name,
    mode: body.mode,
    equipment: body.equipment,
    exercises: body.exercises,
    trainerTips: body.trainerTips,
  };
  try {
    const createdWorkout = workoutService.createNewWorkout(newWorkout);
    res.status(201).send({ status: "OK", data: createdWorkout });
  } catch (error) {
    res
      .status(error?.status || 500)
      .send({ status: "FAILED", data: { error: error?.message || error } });
  }
};

const updateOneWorkout = (req, res) => {
  const {
    body,
    params: { workoutId },
  } = req;
  if (!workoutId) {
    res
      .status(400)
      .send({
        status: "FAILED",
        data: { error: "Parameter ':workoutId' can not be empty" },
      });
  }
  try {
    const updatedWorkout = workoutService.updateOneWorkout(workoutId, body);
    res.send({ status: "OK", data: updatedWorkout });
  } catch (error) {
    res
      .status(error?.status || 500)
      .send({ status: "FAILED", data: { error: error?.message || error } });
  }
};

const deleteOneWorkout = (req, res) => {
  const {
    params: { workoutId },
  } = req;
  if (!workoutId) {
    res
      .status(400)
      .send({
        status: "FAILED",
        data: { error: "Parameter ':workoutId' can not be empty" },
      });
  }
  try {
    workoutService.deleteOneWorkout(workoutId);
    res.status(204).send({ status: "OK" });
  } catch (error) {
    res
      .status(error?.status || 500)
      .send({ status: "FAILED", data: { error: error?.message || error } });
  }
};

module.exports = {
  getAllWorkouts,
  getOneWorkout,
  createNewWorkout,
  updateOneWorkout,
  deleteOneWorkout,
  getRecordsForWorkout,
};

// In src/services/workoutService.js
const { v4: uuid } = require("uuid");
const Workout = require("../database/Workout");

const getAllWorkouts = () => {
  try {
    const allWorkouts = Workout.getAllWorkouts();
    return allWorkouts;
  } catch (error) {
    throw error;
  }
};

const getOneWorkout = (workoutId) => {
  try {
    const workout = Workout.getOneWorkout(workoutId);
    return workout;
  } catch (error) {
    throw error;
  }
};

const createNewWorkout = (newWorkout) => {
  const workoutToInsert = {
    ...newWorkout,
    id: uuid(),
    createdAt: new Date().toLocaleString("en-US", { timeZone: "UTC" }),
    updatedAt: new Date().toLocaleString("en-US", { timeZone: "UTC" }),
  };
  try {
    const createdWorkout = Workout.createNewWorkout(workoutToInsert);
    return createdWorkout;
  } catch (error) {
    throw error;
  }
};

const updateOneWorkout = (workoutId, changes) => {
  try {
    const updatedWorkout = Workout.updateOneWorkout(workoutId, changes);
    return updatedWorkout;
  } catch (error) {
    throw error;
  }
};

const deleteOneWorkout = (workoutId) => {
  try {
    Workout.deleteOneWorkout(workoutId);
  } catch (error) {
    throw error;
  }
};

module.exports = {
  getAllWorkouts,
  getOneWorkout,
  createNewWorkout,
  updateOneWorkout,
  deleteOneWorkout,
};

// In src/database/Workout.js
const DB = require("./db.json");
const { saveToDatabase } = require("./utils");

const getAllWorkouts = () => {
  try {
    return DB.workouts;
  } catch (error) {
    throw { status: 500, message: error };
  }
};

const getOneWorkout = (workoutId) => {
  try {
    const workout = DB.workouts.find((workout) => workout.id === workoutId);
    if (!workout) {
      throw {
        status: 400,
        message: `Can't find workout with the id '${workoutId}'`,
      };
    }
    return workout;
  } catch (error) {
    throw { status: error?.status || 500, message: error?.message || error };
  }
};

const createNewWorkout = (newWorkout) => {
  try {
    const isAlreadyAdded =
      DB.workouts.findIndex((workout) => workout.name === newWorkout.name) > -1;
    if (isAlreadyAdded) {
      throw {
        status: 400,
        message: `Workout with the name '${newWorkout.name}' already exists`,
      };
    }
    DB.workouts.push(newWorkout);
    saveToDatabase(DB);
    return newWorkout;
  } catch (error) {
    throw { status: error?.status || 500, message: error?.message || error };
  }
};

const updateOneWorkout = (workoutId, changes) => {
  try {
    const isAlreadyAdded =
      DB.workouts.findIndex((workout) => workout.name === changes.name) > -1;
    if (isAlreadyAdded) {
      throw {
        status: 400,
        message: `Workout with the name '${changes.name}' already exists`,
      };
    }
    const indexForUpdate = DB.workouts.findIndex(
      (workout) => workout.id === workoutId
    );
    if (indexForUpdate === -1) {
      throw {
        status: 400,
        message: `Can't find workout with the id '${workoutId}'`,
      };
    }
    const updatedWorkout = {
      ...DB.workouts[indexForUpdate],
      ...changes,
      updatedAt: new Date().toLocaleString("en-US", { timeZone: "UTC" }),
    };
    DB.workouts[indexForUpdate] = updatedWorkout;
    saveToDatabase(DB);
    return updatedWorkout;
  } catch (error) {
    throw { status: error?.status || 500, message: error?.message || error };
  }
};

const deleteOneWorkout = (workoutId) => {
  try {
    const indexForDeletion = DB.workouts.findIndex(
      (workout) => workout.id === workoutId
    );
    if (indexForDeletion === -1) {
      throw {
        status: 400,
        message: `Can't find workout with the id '${workoutId}'`,
      };
    }
    DB.workouts.splice(indexForDeletion, 1);
    saveToDatabase(DB);
  } catch (error) {
    throw { status: error?.status || 500, message: error?.message || error };
  }
};

module.exports = {
  getAllWorkouts,
  createNewWorkout,
  getOneWorkout,
  updateOneWorkout,
  deleteOneWorkout,
};

Evitare verbi nei nomi degli endpoint

Non ha molto senso usare verbi all'interno degli endpoint, in effetti è piuttosto inutile. Generalmente ogni URL dovrebbe puntare verso una risorsa (ricorda l'esempio della scatola fatto in precedenza). Niente di più e niente di meno.

Usare un verbo all'interno di un URL mostra un certo comportamento che la risorsa stessa non può avere.

Abbiamo già implementato gli endpoint correttamente senza usare verbi all'interno degli URL, tuttavia diamo un'occhiata a come sarebbero i nostri URL se avessimo usato i verbi.

// Implementazione corrente (senza verbi)
GET "/api/v1/workouts" 
GET "/api/v1/workouts/:workoutId" 
POST "/api/v1/workouts" 
PATCH "/api/v1/workouts/:workoutId" 
DELETE "/api/v1/workouts/:workoutId"  

// Implementazione usando verbi 
GET "/api/v1/getAllWorkouts" 
GET "/api/v1/getWorkoutById/:workoutId" 
CREATE "/api/v1/createWorkout" 
PATCH "/api/v1/updateWorkout/:workoutId" 
DELETE "/api/v1/deleteWorkout/:workoutId"

Noti la differenza? Avere un URL completamente differente per ogni comportamento può generare confusione e inutile complessità piuttosto in fretta.

Immagina di avere 300 endpoint diversi. Usare un URL separato per ciascuno potrebbe essere un sovraccarico (compresa la documentazione) infernale.

Un'altra ragione che mi piacerebbe evidenziare per non usare verbi è che i verbi HTTP stessi indicano già l'azione (in lingua inglese - n.d.t.).

Cose come "GET /api/v1/getAllWorkouts" o "DELETE api/v1/deleteWorkout/workoutId" non sono necessarie.

Quando osservi la nostra implementazione corrente, diventa sempre più pulita in quanto stiamo usando solo due URL diversi e il comportamento effettivo è gestito tramite il verbo HTTP e il corrispondente payload della richiesta.

Ho sempre immaginato che il verbo HTTP descriva l'azione (quello che vorrei fare) e l'URL stesso (che punta verso una risorsa) l'obiettivo. "GET /api/v1/workouts" è anche più fluido come linguaggio umano (in inglese, naturalmente - n.d.t.).

Raggruppare assieme le risorse (annidamento logico)

Quando progetti la tua API, potrebbero esserci casi in cui disponi di risorse associate ad altre. È buona pratica raggrupparle in un unico endpoint e annidarle correttamente.

Considera che, nella nostra API, abbiamo anche un elenco di membri che si sono iscritti al nostro  CrossFit box ("box" è il nome per una palestra CrossFit). Per motivare i nostri iscritti tracciamo i risultati complessivi dei box per ogni allenamento.

Ad esempio, c'è un allenamento in cui devi eseguire un certo ordine di esercizi il più rapidamente possibile. Registriamo i tempi per tutti i membri per avere un elenco del tempo impiegato per ogni membro che ha completato questo allenamento.

Ora, al frontend serve un endpoint che risponda con tutti i risultati per uno specifico allenamento affinché possa essere visualizzato nell'interfaccia utente.

Gli allenamenti, i membri e i risultati sono conservati in posti diversi nel database. Quindi quello che ci serve è una scatola (i risultati - records) all'interno di un'altra scatola (gli allenamenti - workout), giusto?

L'URI per quell'endpoint sarà /api/v1/workouts/:workoutId/records. Questa è una buona pratica che consente un annidamento logico dell'URL. L'URL stesso non deve necessariamente rispecchiare la struttura del database.

Iniziamo l'implementazione dell'endpoint.

Prima aggiungiamo una nuova tabella nel file  db.json chiamata "members" (membri).  La piazziamo sotto "workouts" (allenamenti).

{
  "workouts": [ ...
  ],
  "members": [
    {
      "id": "12a410bc-849f-4e7e-bfc8-4ef283ee4b19",
      "name": "Jason Miller",
      "gender": "male",
      "dateOfBirth": "23/04/1990",
      "email": "jason@mail.com",
      "password": "666349420ec497c1dc890c45179d44fb13220239325172af02d1fb6635922956"
    },
    {
      "id": "2b9130d4-47a7-4085-800e-0144f6a46059",
      "name": "Tiffany Brookston",
      "gender": "female",
      "dateOfBirth": "09/06/1996",
      "email": "tiffy@mail.com",
      "password": "8a1ea5669b749354110dcba3fac5546c16e6d0f73a37f35a84f6b0d7b3c22fcc"
    },
    {
      "id": "11817fb1-03a1-4b4a-8d27-854ac893cf41",
      "name": "Catrin Stevenson",
      "gender": "female",
      "dateOfBirth": "17/08/2001",
      "email": "catrin@mail.com",
      "password": "18eb2d6c5373c94c6d5d707650d02c3c06f33fac557c9cfb8cb1ee625a649ff3"
    },
    {
      "id": "6a89217b-7c28-4219-bd7f-af119c314159",
      "name": "Greg Bronson",
      "gender": "male",
      "dateOfBirth": "08/04/1993",
      "email": "greg@mail.com",
      "password": "a6dcde7eceb689142f21a1e30b5fdb868ec4cd25d5537d67ac7e8c7816b0e862"
    }
  ]
}

Prima che tu me lo chieda, sì, alle password è stato applicato un hash. 😉

Successivamente aggiungiamo alcuni  risultati ("records") sotto "members".

{
  "workouts": [ ...
  ],
  "members": [ ...
  ],
  "records": [
    {
      "id": "ad75d475-ac57-44f4-a02a-8f6def58ff56",
      "workout": "4a3d9aaa-608c-49a7-a004-66305ad4ab50",
      "record": "160 reps"
    },
    {
      "id": "0bff586f-2017-4526-9e52-fe3ea46d55ab",
      "workout": "d8be2362-7b68-4ea4-a1f6-03f8bc4eede7",
      "record": "7:23 minutes"
    },
    {
      "id": "365cc0bb-ba8f-41d3-bf82-83d041d38b82",
      "workout": "a24d2618-01d1-4682-9288-8de1343e53c7",
      "record": "358 reps"
    },
    {
      "id": "62251cfe-fdb6-4fa6-9a2d-c21be93ac78d",
      "workout": "4a3d9aaa-608c-49a7-a004-66305ad4ab50",
      "record": "145 reps"
    }
  ],
}

Per essere sicuro che tu abbia gli stessi allenamenti con gli stessi miei identificativi, copia anche la sezione "workouts":

{
  "workouts": [
    {
      "id": "61dbae02-c147-4e28-863c-db7bd402b2d6",
      "name": "Tommy V",
      "mode": "For Time",
      "equipment": [
        "barbell",
        "rope"
      ],
      "exercises": [
        "21 thrusters",
        "12 rope climbs, 15 ft",
        "15 thrusters",
        "9 rope climbs, 15 ft",
        "9 thrusters",
        "6 rope climbs, 15 ft"
      ],
      "createdAt": "4/20/2022, 2:21:56 PM",
      "updatedAt": "4/20/2022, 2:21:56 PM",
      "trainerTips": [
        "Split the 21 thrusters as needed",
        "Try to do the 9 and 6 thrusters unbroken",
        "RX Weights: 115lb/75lb"
      ]
    },
    {
      "id": "4a3d9aaa-608c-49a7-a004-66305ad4ab50",
      "name": "Dead Push-Ups",
      "mode": "AMRAP 10",
      "equipment": [
        "barbell"
      ],
      "exercises": [
        "15 deadlifts",
        "15 hand-release push-ups"
      ],
      "createdAt": "1/25/2022, 1:15:44 PM",
      "updatedAt": "3/10/2022, 8:21:56 AM",
      "trainerTips": [
        "Deadlifts are meant to be light and fast",
        "Try to aim for unbroken sets",
        "RX Weights: 135lb/95lb"
      ]
    },
    {
      "id": "d8be2362-7b68-4ea4-a1f6-03f8bc4eede7",
      "name": "Heavy DT",
      "mode": "5 Rounds For Time",
      "equipment": [
        "barbell",
        "rope"
      ],
      "exercises": [
        "12 deadlifts",
        "9 hang power cleans",
        "6 push jerks"
      ],
      "createdAt": "11/20/2021, 5:39:07 PM",
      "updatedAt": "4/22/2022, 5:49:18 PM",
      "trainerTips": [
        "Aim for unbroken push jerks",
        "The first three rounds might feel terrible, but stick to it",
        "RX Weights: 205lb/145lb"
      ]
    },
    {
      "name": "Core Buster",
      "mode": "AMRAP 20",
      "equipment": [
        "rack",
        "barbell",
        "abmat"
      ],
      "exercises": [
        "15 toes to bars",
        "10 thrusters",
        "30 abmat sit-ups"
      ],
      "trainerTips": [
        "Split your toes to bars in two sets maximum",
        "Go unbroken on the thrusters",
        "Take the abmat sit-ups as a chance to normalize your breath"
      ],
      "id": "a24d2618-01d1-4682-9288-8de1343e53c7",
      "createdAt": "4/22/2022, 5:50:17 PM",
      "updatedAt": "4/22/2022, 5:50:17 PM"
    }
  ],
  "members": [ ...
  ],
  "records": [ ...
  ]
}

Va bene, prendiamoci qualche minuto per pensare all'implementazione.

Abbiamo una risorsa chiamata "workouts" (gli allenamenti) da una parte e un'altra chiamata "records" (i risultati) dall'altra.

Per continuare nella nostra architettura sarebbe consigliabile creare un altro controller, un altro servizio e un'altra collezione di metodi di database che sono responsabili per i risultati.

È molto probabile che dobbiamo implementare gli endpoint CRUD anche per i risultati, perché anch'essi dovrebbero essere aggiunti, aggiornati o eliminati in futuro. Ma questo non sarà il compito principale per ora.

Avremo anche bisogno di un router per  gestire le richieste specifiche per i risultati, ma non ne abbiamo bisogno al momento. Questa potrebbe essere una grande opportunità per te per implementare le operazioni CRUD per i record con le proprie rotte ed esercitarti un po'.

# Crea il controller per i risultati
touch src/controllers/recordController.js 

# Crea il servizio per i risultati 
touch src/services/recordService.js 

# Crea i metodi del database per i risultati
touch src/database/Record.js

Questo era facile. Passiamo oltre, partiamo dalla fine implementando i metodi del database.

// In src/database/Record.js
const DB = require("./db.json");

const getRecordForWorkout = (workoutId) => {
  try {
    const record = DB.records.filter((record) => record.workout === workoutId);
    if (!record) {
      throw {
        status: 400,
        message: `Can't find workout with the id '${workoutId}'`,
      };
    }
    return record;
  } catch (error) {
    throw { status: error?.status || 500, message: error?.message || error };
  }
};
module.exports = { getRecordForWorkout };

Piuttosto semplice, giusto? Filtriamo tutti i record che sono relativi all'allenamento il cui codice identificativo riceviamo come parametro di query.

Il prossimo è il servizio per i risultati:

// In src/services/recordService.js
const Record = require("../database/Record");

const getRecordForWorkout = (workoutId) => {
  try {
    const record = Record.getRecordForWorkout(workoutId);
    return record;
  } catch (error) {
    throw error;
  }
};
module.exports = { getRecordForWorkout };

Anche qui niente di nuovo.

Ora siamo in grado di creare una nuova rotta nel router e dirigere la richiesta verso il servizio per i risultati.

// In src/v1/routes/workoutRoutes.js
const express = require("express");
const workoutController = require("../../controllers/workoutController");
// *** AGGIUNGI ***
const recordController = require("../../controllers/recordController");

const router = express.Router();

router.get("/", workoutController.getAllWorkouts);

router.get("/:workoutId", workoutController.getOneWorkout);

// *** AGGIUNGI ***
router.get("/:workoutId/records", recordController.getRecordForWorkout);

router.post("/", workoutController.createNewWorkout);

router.patch("/:workoutId", workoutController.updateOneWorkout);

router.delete("/:workoutId", workoutController.deleteOneWorkout);

module.exports = router;

Grande! Facciamo un test con il browser.

Per prima cosa recuperiamo tutti gli allenamenti per ricavare l'id dell'allenamento.

Vediamo se possiamo recuperare tutti i record per quell'id:

Come puoi vedere, l'annidamento logico ha senso se hai risorse che possono essere in relazione tra loro. In teoria puoi annidare in profondità a piacimento, ma nella pratica è meglio non superare i tre livelli di annidamento al massimo.

Se vuoi annidare più in profondità, potresti fare una piccola modifica al database. Ti mostro un piccolo esempio.

Immagina che al frontend serva anche un endpoint per ottenere informazioni relative a quale membro esattamente detenga il record corrente e vuole ricevere metadati al proposito.

Naturalmente potremmo implementare l'URI seguente:

GET /api/v1/workouts/:workoutId/records/members/:memberId

L'endpoint ora diventa meno gestibile mano a mano che aggiungiamo livelli di annidamento. Pertanto è buona pratica inserire l'URI per ricevere informazioni su un dato membro direttamente nel record.

Considera quanto segue all'interno del database:

{
  "workouts": [ ...
  ],
  "members": [ ...
  ],
  "records": [ ... {
      "id": "ad75d475-ac57-44f4-a02a-8f6def58ff56",
      "workout": "4a3d9aaa-608c-49a7-a004-66305ad4ab50",
      "record": "160 reps",
      "memberId": "11817fb1-03a1-4b4a-8d27-854ac893cf41",
      "member": "/members/:memberId"
    },
  ]
}

Come puoi vedere abbiamo aggiunto due proprietà: "memberId" e "member" per i nostri record all'interno del database. Questo presenta il grosso vantaggio che non dobbiamo annidare più in profondità il nostro endpoint esistente.

Il frontend deve semplicemente chiamare GET /api/v1/workouts/:workoutId/records per ricevere automaticamente tutti i risultati che sono relativi a questo allenamento.

Inoltre ottiene l'id del membro e l'endpoint per recuperare le informazioni su quel membro. Quindi, abbiamo evitato l'annidamento più profondo del nostro endpoint.

Naturalmente, questo funziona solo se siamo in grado di gestire le richieste a "/members/:memberId" 😁 Sembra un'ottima opportunità di formazione per te per implementare questa situazione!

Integrare filtri, ordinamento e paginazione

In questo momento siamo in grado di eseguire alcune operazioni con la nostra API. Questo è un grande progresso, ma c'è di più.

Durante le ultime sezioni ci siamo concentrati sul miglioramento della nostra esperienza di sviluppatore e su come sia possibile interagire con la nostra API. Ma le prestazioni complessive della nostra API sono un altro fattore chiave su cui dovremmo lavorare.

Ecco perché anche l'integrazione di filtri, ordinamento e paginazione è un fattore essenziale nella mia lista.

Immagina di avere 2.000 allenamenti, 450 record e 500 membri memorizzati nel nostro database. Quando chiamiamo il nostro endpoint per ottenere tutti gli allenamenti, non vogliamo inviare tutti i 2.000  contemporaneamente. Questa sarà una risposta molto lenta ovviamente, o farà crollare i nostri sistemi (forse con 200.000 😁).

Questo è il motivo per cui il filtro e la paginazione sono importanti. Il filtro, come dice già il nome, è utile perché ci consente di ottenere dati specifici da tutta la nostra collezione. Ad esempio tutti gli allenamenti che hanno la modalità "For Time".

La paginazione è un altro meccanismo per suddividere la nostra intera raccolta di allenamenti in più "pagine" in cui ogni pagina è composta solo da venti allenamenti, ad esempio. Questa tecnica ci aiuta ad assicurarci di non inviare più di venti allenamenti contemporaneamente con la nostra risposta al client.

L'ordinamento può essere un compito complesso. Quindi è più efficace farlo nella nostra API e inviare i dati ordinati al client.

Cominciamo con l'integrazione di alcuni meccanismi di filtro nella nostra API. Miglioreremo il nostro endpoint che invia tutti gli allenamenti accettando parametri per il filtro. Normalmente in una richiesta GET aggiungiamo i criteri di filtro come parametro di query.

Il nostro nuovo URI sarà simile a questo, quando vorremmo ottenere solo gli allenamenti che sono nella modalità di "AMRAP" (As Many Rounds As Possible - tante ripetizioni quante possibile): /api/v1/workouts?mode=amrap.

Per renderlo più divertente dobbiamo aggiungere altri allenamenti. Incolla questi allenamenti nella tua raccolta "workouts" all'interno di db.json:

{
  "name": "Jumping (Not) Made Easy",
  "mode": "AMRAP 12",
  "equipment": [
    "jump rope"
  ],
  "exercises": [
    "10 burpees",
    "25 double-unders"
  ],
  "trainerTips": [
    "Scale to do 50 single-unders, if double-unders are too difficult"
  ],
  "id": "8f8318f8-b869-4e9d-bb78-88010193563a",
  "createdAt": "4/25/2022, 2:45:28 PM",
  "updatedAt": "4/25/2022, 2:45:28 PM"
},
{
  "name": "Burpee Meters",
  "mode": "3 Rounds For Time",
  "equipment": [
    "Row Erg"
  ],
  "exercises": [
    "Row 500 meters",
    "21 burpees",
    "Run 400 meters",
    "Rest 3 minutes"
  ],
  "trainerTips": [
    "Go hard",
    "Note your time after the first run",
    "Try to hold your pace"
  ],
  "id": "0a5948af-5185-4266-8c4b-818889657e9d",
  "createdAt": "4/25/2022, 2:48:53 PM",
  "updatedAt": "4/25/2022, 2:48:53 PM"
},
{
  "name": "Dumbbell Rower",
  "mode": "AMRAP 15",
  "equipment": [
    "Dumbbell"
  ],
  "exercises": [
    "15 dumbbell rows, left arm",
    "15 dumbbell rows, right arm",
    "50-ft handstand walk"
  ],
  "trainerTips": [
    "RX weights for women: 35-lb",
    "RX weights for men: 50-lb"
  ],
  "id": "3dc53bc8-27b8-4773-b85d-89f0a354d437",
  "createdAt": "4/25/2022, 2:56:03 PM",
  "updatedAt": "4/25/2022, 2:56:03 PM"
}

Tutto quello che dobbiamo fare è accettare e gestire i parametri di query. Il nostro controller che gestisce gli allenamenti sarà il posto giusto da cui partire:

// In src/controllers/workoutController.js
...

const getAllWorkouts = (req, res) => {
  // *** ADD ***
  const { mode } = req.query;
  try {
    // *** ADD ***
    const allWorkouts = workoutService.getAllWorkouts({ mode });
    res.send({ status: "OK", data: allWorkouts });
  } catch (error) {
    res
      .status(error?.status || 500)
      .send({ status: "FAILED", data: { error: error?.message || error } });
  }
};

...

Estraiamo  "mode" dall'oggetto  req.query e ne passiamo il valore a workoutService.getAllWorkouts. Questo valore sarà un oggetto che contiene tutti i parametri di filtro.

Uso la sintassi scorciatoia qui, per creare una chiave chiamata mode all'interno dell'oggetto, il cui valore è qualunque cosa sia associata a req.query.mode. Potrebbe essere sia un valore truthy oppure undefined se non esiste un parametro di query chiamato mode. Possiamo estendere questo oggetto con ulteriori parametri di filtro che vorremmo accettare.

Nel servizio workout, passalo al tuo metodo di database:

// In src/services/workoutService.js
...

const getAllWorkouts = (filterParams) => {
  try {
    // *** AGGIUNGI ***
    const allWorkouts = Workout.getAllWorkouts(filterParams);
    return allWorkouts;
  } catch (error) {
    throw error;
  }
};

...

Ora possiamo usare il nostro metodo di database e applicare il filtro:

// In src/database/Workout.js
...

const getAllWorkouts = (filterParams) => {
  try {
    let workouts = DB.workouts;
    if (filterParams.mode) {
      return DB.workouts.filter((workout) =>
        workout.mode.toLowerCase().includes(filterParams.mode)
      );
    }
    // Altre istruzioni if vanno qui per gestire parametri differenti
    return workouts;
  } catch (error) {
    throw { status: 500, message: error };
  }
};

...

Piuttosto semplice, giusto? Tutto quello che dobbiamo fare qui è verificare se abbiamo effettivamente un valore truthy per la chiave mode all'interno di filterParams. Se questo è vero, filtriamo tutti gli allenamenti che hanno lo stesso valore per mode, altrimenti non c'è un parametro di query con quel nome e ritorniamo tutti gli allenamenti in quanto non è necessario filtrarli.

Abbiamo dichiarato la variabile workouts con let poiché quando aggiungiamo ulteriori istruzioni if per diversi filtri possiamo sovrascrivere workouts e concatenare i filtri.

All'interno del tuo browser puoi visitare localhost:3000/api/v1/workouts?mode=amrap e riceverai tutti gli allenamenti nel database che hanno la proprietà "mode" uguale a  "AMRAP":

Se ometti il parametro di query, dovresti ottenere tutti gli allenamenti come prima. Puoi provare ancora aggiungendo "for%20time" come valore per il parametro mode (ricorda --> "%20" significa "spazio") e ora dovresti ricevere tutti gli allenamenti che hanno il valore di mode uguale a "For Time", se esistono nel database.

Se digiti un valore che non è nel database, dovresti ricevere un array vuoto.

I parametri per ordinare e la paginazione seguono la stessa filosofia. Diamo un'occhiata ad alcune funzionalità che potremmo implementare:

• Ricevere tutti gli allenamenti che richiedono un barbell (bilanciere): /api/v1/workouts?equipment=barbell
• Ottenere solo 5 allenamenti: /api/v1/workouts?length=5
• Quando usiamo la paginazione ricevere la seconda pagina: /api/v1/workouts?page=2
• Ordinare gli allenamenti nella risposta in ordine discendente, per data di creazione: /api/v1/workouts?sort=-createdAt
• Puoi anche combinare i parametri, per ottenere gli ultimi 10 allenamenti aggiornati, per esempio: /api/v1/workouts?sort=-updatedAt&length=10

Usare cache dei dati per migliorare le prestazioni

Anche utilizzare una cache per i dati è una ottima pratica per migliorare l'esperienza complessiva e le prestazioni della nostra API.

Ha molto senso usare una cache dalla quale servire i dati, quando i dati provengono da una risorsa richiesta di frequente e/o quando l'interrogazione di quei dati dal database è un'operazione molto pesante e potrebbe richiedere più secondi.

Puoi conservare questo tipo di dati all'interno della tua cache e servirli da lì invece di interrogare ogni volta il database per ottenere i dati.

Una cosa importante che devi tenere a mente è che quando si servono dati da una cache, potrebbero essere diventati obsoleti. Quindi devi assicurarti che i dati all'interno della cache siano sempre aggiornati.

Ci sono molte soluzioni diverse a disposizione. Un esempio appropriato è usare redis o il middleware di express apicache.

Preferirei usare apicache, ma se vuoi usare Redis, consiglio caldamente che tu dia un'occhiata alla loro ottima documentazione.

Pensiamo un secondo a uno scenario nella nostra API nel quale una cache avrebbe senso. Penso che le richieste per ottenere tutti gli allenamenti potrebbero essere esaudite con efficacia all'interno della nostra cache.

Per prima cosa installiamo il nostro middleware:

npm i apicache

Ora dobbiamo importarlo nel router che gestisce gli allenamenti e configurarlo.

// In src/v1/routes/workoutRoutes.js
const express = require("express");
// *** AGGIUNGI ***
const apicache = require("apicache");
const workoutController = require("../../controllers/workoutController");
const recordController = require("../../controllers/recordController");

const router = express.Router();
// *** AGGIUNGI ***
const cache = apicache.middleware;

// *** AGGIUNGI ***
router.get("/", cache("2 minutes"), workoutController.getAllWorkouts);

router.get("/:workoutId", workoutController.getOneWorkout);

router.get("/:workoutId/records", recordController.getRecordForWorkout);

router.post("/", workoutController.createNewWorkout);

router.patch("/:workoutId", workoutController.updateOneWorkout);

router.delete("/:workoutId", workoutController.deleteOneWorkout);

module.exports = router;

È piuttosto semplice impostarla, vero? Possiamo definire una nuova cache chiamando apicache.middleware e usarla come middleware all'interno della nostra rotta GET. Devi solo inserirla come parametro tra il percorso effettivo e il controller che gestisce gli allenamenti.

Lì dentro puoi definire per quanto tempo i tuoi dati dovrebbero rimanere nella cache. Per le esigenze di questo tutorial ho scelto due minuti. Il tempo dipende dalla velocità o dalla frequenza con cui cambiano i dati all'interno della cache.

Ora proviamo!

All'interno di Postman o di un altro client HTTP di tua scelta, definisci una nuova richiesta che ottiene tutti gli allenamenti. Fino ad ora l'ho fatto dal browser, ma vorrei meglio visualizzare il tempo di risposta per te. Ecco la ragione per la quale ora sto richiedendo la risorsa tramite Postman.

Eseguiamo la nostra richiesta per la prima volta:

Come puoi vedere la nostra API ha risposto in 22.93 ms. Una volta che la nostra cache viene nuovamente svuotata (dopo due minuti) deve essere riempita nuovamente. Questo succede con la nostra prima richiesta.

Quindi nel caso qui sopra, i dati NON sono stati serviti dalla nostra cache. Sono stati presi  "normalmente" dal database e sono stati inseriti nella cache.

Ora con la nostra seconda richiesta riceviamo i dati con un tempo di risposta minore, in quanto i dati sono serviti direttamente dalla cache:

Siamo stati in grado di servire i dati in un terzo del tempo impiegato nella nostra richiesta precedente! Tutto grazie alla nostra cache.

Nel nostro esempio abbiamo usato la cache con una sola rotta, ma puoi anche utilizzarla su tutte le rotte con un'implementazione come questa:

// In src/index.js
const express = require("express");
const bodyParser = require("body-parser");
// *** AGGIUNGI ***
const apicache = require("apicache");
const v1WorkoutRouter = require("./v1/routes/workoutRoutes");

const app = express();
// *** AGGIUNGI ***
const cache = apicache.middleware;
const PORT = process.env.PORT || 3000;

app.use(bodyParser.json());
// *** AGGIUNGI ***
app.use(cache("2 minutes"));
app.use("/api/v1/workouts", v1WorkoutRouter);

app.listen(PORT, () => {
  console.log(`API is listening on port ${PORT}`);
});

C'è una cosa importante che vorrei far notare qui per quanto riguarda la cache. Anche se sembra che ti risolva molti problemi, puoi anche portarne altri alla tua applicazione.

Alcune cose delle quali devi essere a conoscenza quando utilizzi una cache:

• devi sempre assicurarti che i dati all'interno della cache siano aggiornati in quanto tu non vuoi servire dati obsoleti
• quando la prima richiesta viene elaborata e la cache sta per essere riempita e ci sono ulteriori richieste in arrivo, devi decidere se ritardarle e servire i dati dalla cache oppure se esse riceveranno i dati direttamente dal database come nella prima richiesta
• è un altro componente da inserire all'interno della tua infrastruttura, se stai scegliendo una cache distribuita come Redis (quindi devi domandarti se ha veramente senso usarla)

Ecco cosa faccio io in genere:

Vorrei partire il più semplice e pulito possibile con qualsiasi cosa stia creando. Lo stesso vale per le API.

Quando inizio la creazione di un'API e non ci sono ragioni particolari per usare una cache immediatamente, la tengo da parte e vedo cosa succede nel tempo. Se si verificano ragioni per le quali usare una cache, la implemento.

Buone pratiche di sicurezza

Wow! Questo è stato un bel viaggio finora. Abbiamo toccato molti punti importanti e abbiamo esteso la nostra API di conseguenza.

Abbiamo parlato delle migliori pratiche per accrescere l'usabilità e le prestazioni della nostra API. Anche la sicurezza è un fattore chiave per l'API. Puoi creare l'API migliore, ma quando si tratta di una parte di software vulnerabile in esecuzione in un server diventa inutile e pericolosa.

La prima indispensabile misura di sicurezza da includere è l'uso di SSL/TLS in quanto al giorno d'oggi è lo standard per quanto riguarda la comunicazione su internet. È ancora più importante dove i dati privati vengono scambiati tra il client e l'API.

Se hai risorse che dovrebbero essere disponibili solo a utenti autenticati, dovresti proteggerle con una verifica di autenticazione.

In Express, per esempio, puoi implementarla come middleware come abbiamo fatto per la nostra cache per determinate rotte e verificare prima se la richiesta è autenticata per accedere a una risorsa.

Potrebbero esserci risorse o interazioni con la nostra API che non vogliamo vengano richieste da qualunque utente. In questo caso dovresti impostare un sistema di ruoli per i tuoi utenti. Pertanto devi aggiungere altra logica di verifica per quella rotta e validare se l'utente ha il privilegio di accedere alla risorsa.

I ruoli utenti avrebbero senso anche nel nostro caso d'uso quando vogliamo che solo utenti specifici (come gli allenatori) possano creare, aggiornare ed eliminare gli allenamenti e i risultati. La lettura può essere aperta a tutti (anche ai membri "normali").

Si può gestire la cosa tramite un altro middleware che usiamo per le rotte che vogliamo proteggere. Per esempio la nostra richiesta POST per /api/v1/workouts per creare un nuovo allenamento.

All'interno del primo middleware verificheremo se l'utente è autenticato. In caso positivo passeremo al middleware successivo, vale a dire la verifica del ruolo dell'utente. Se l'utente ha il ruolo appropriato per accedere alla risorsa la richiesta viene passata al controller corrispondente.

All'interno del gestore delle rotte il codice sarà come questo:

// In src/v1/routes/workoutRoutes.js
...

// Middleware personalizzato
const authenticate = require("../../middlewares/authenticate");
const authorize = require("../../middlewares/authorize");

router.post("/", authenticate, authorize, workoutController.createNewWorkout);

...

Per ulteriori informazioni e migliori pratiche su questo argomento, suggerisco di leggere questo articolo (in lingua inglese).

Documentare correttamente la tua API

So che la documentazione non è esattamente l'attività preferita dagli sviluppatori, ma è una cosa necessaria da fare. Specialmente quando si parla di API.

Qualcuno dice che:

"Un'API è tanto buona quanto la sua documentazione"

Credo che ci sia molto di vero in questa affermazione in quanto se un'API non è ben documentata non può essere usata adeguatamente, pertanto diventa inutile. La documentazione aiuta anche a rendere la vita degli sviluppatori molto più facile.

Ricorda sempre che la documentazione in genere è la prima interazione che gli utilizzatori hanno con la tua API. Più velocemente gli utenti saranno in grado di capire la documentazione, più velocemente potranno usare la tua API.

Pertanto è nostro compito implementare una documentazione esauriente e precisa. Ci sono degli ottimi strumenti a disposizione che ci faciliteranno la vita.

Come in altri campi dell'informatica, c'è una sorta di standard per documentare le API chiamata OpenAPI Specification (Specifiche OpenAPI).

Vediamo come possiamo creare una qualche documentazione che giustifichi quelle specifiche. Useremo i pacchetti swagger-ui-express e swagger-jsdoc per farlo. In un attimo resterai stupito di quanto sia fantastico!

Innanzitutto, impostiamo la struttura base per la nostra documentazione. Poiché abbiamo pianificato di avere diverse versioni della nostra API, anche i documenti saranno leggermente diversi. Questo è il motivo per cui vorrei definire il nostro file swagger per lanciare la nostra documentazione all'interno della cartella della versione corrispondente.

# Installa i pacchetti npm richiesti 
npm i swagger-jsdoc swagger-ui-express 

# Crea un nuovo file per impostare i documenti swagger 
touch src/v1/swagger.js

// In src/v1/swagger.js
const swaggerJSDoc = require("swagger-jsdoc");
const swaggerUi = require("swagger-ui-express");

// Meta Informazioni base sulla nostra API
const options = {
  definition: {
    openapi: "3.0.0",
    info: { title: "Crossfit WOD API", version: "1.0.0" },
  },
  apis: ["./src/v1/routes/workoutRoutes.js", "./src/database/Workout.js"],
};

// Documentazione in formato JSON
const swaggerSpec = swaggerJSDoc(options);

// Funzione per impostare la nostra documentazione
const swaggerDocs = (app, port) => {
  // Gestore della rotta per visitare la documentazione
  app.use("/api/v1/docs", swaggerUi.serve, swaggerUi.setup(swaggerSpec));
  // Rendiamo disponibile la nostra documentazione in formato JSON
  app.get("/api/v1/docs.json", (req, res) => {
    res.setHeader("Content-Type", "application/json");
    res.send(swaggerSpec);
  });
  console.log(
    `Version 1 Docs are available on http://localhost:${port}/api/v1/docs`
  );
};

module.exports = { swaggerDocs };

L'impostazione è piuttosto semplice. Abbiamo definito qualche metadato base per la nostra API, creata la documentazione in formato JSON e creata una funzione che rende disponibile la nostra documentazione.

Per controllare se tutto è a posto e in esecuzione, registriamo un semplice messaggio alla console che indica dove possiamo trovare la documentazione.

Questa sarà la funzione che useremo nel file radice (index.js) dove abbiamo creato il server Express per assicurarci che anche la documentazione sia caricata.

// In src/index.js
const express = require("express");
const bodyParser = require("body-parser");
const v1WorkoutRouter = require("./v1/routes/workoutRoutes");
// *** AGGIUNGI ***
const { swaggerDocs: V1SwaggerDocs } = require("./v1/swagger");

const app = express();
const PORT = process.env.PORT || 3000;

app.use(bodyParser.json());
app.use("/api/v1/workouts", v1WorkoutRouter);

app.listen(PORT, () => {
  console.log(`API is listening on port ${PORT}`);
  /// *** AGGIUNGI ***
  V1SwaggerDocs(app, PORT);
});

Ora dovresti vedere quanto segue all'interno del terminale dove è in esecuzione il tuo server di sviluppo:

Quando visiti  localhost:3000/api/v1/docs nel browser, dovresti già vedere la nostra pagina di documentazione:

Ogni volta mi stupisco di quanto funzioni bene. Ora, la struttura di base è configurata e possiamo iniziare a implementare la documentazione per i nostri endpoint. Andiamo!

Quando dai un'occhiata al contenuto della chiave options.apis nel file swagger.js, vedrai che abbiamo incluso il percorso alle nostre rotte per l'allenamento e per il file degli allenamenti all'interno della cartella database. Questa è la cosa più importante da impostare per fare in modo che la magia si verifichi.

Avendo definito questi file all'interno delle opzioni swagger ci consente di usare commenti che fanno riferimento a OpenAPI e ad avere la sintassi come nei file yaml, necessaria per l'impostazione della nostra documentazione.

Ora siamo pronti a creare la documentazione per il nostro primo endpoint! Facciamolo subito.

// In src/v1/routes/workoutRoutes.js
...

/**
 * @openapi
 * /api/v1/workouts:
 *   get:
 *     tags:
 *       - Workouts
 *     responses:
 *       200:
 *         description: OK
 *         content:
 *           application/json:
 *             schema:
 *               type: object
 *               properties:
 *                 status:
 *                   type: string
 *                   example: OK
 *                 data:
 *                   type: array 
 *                   items: 
 *                     type: object
 */
router.get("/", cache("2 minutes"), workoutController.getAllWorkouts);

...

Questo è praticamente quanto serve per aggiungere un endpoint alla nostra documentazione swagger. Puoi vedere tutte le specifiche per descrivere un endpoint nella loro ottima documentazione.

Quando ricarichi la tua pagina di documentazione dovresti vedere quanto segue:

Questo dovrebbe esserti piuttosto familiare se hai già lavorato con API che hanno una documentazione secondo le specifiche OpenAPI. Questa è la vista dove sono elencati tutti gli endpoint e puoi estendere ciascuno di essi per ottenere maggiori informazioni.

Se osservi attentamente la nostra risposta, vedrai che non abbiamo definito il corretto valore di ritorno perché stiamo semplicemente dicendo che la nostra proprietà "data" sarà un array di oggetti vuoti.

Ecco quando entrano in gioco gli schemi.

// In src/databse/Workout.js
...

/**
 * @openapi
 * components:
 *   schemas:
 *     Workout:
 *       type: object
 *       properties:
 *         id: 
 *           type: string
 *           example: 61dbae02-c147-4e28-863c-db7bd402b2d6
 *         name: 
 *           type: string
 *           example: Tommy V  
 *         mode:
 *           type: string
 *           example: For Time
 *         equipment:
 *           type: array
 *           items:
 *             type: string
 *           example: ["barbell", "rope"]
 *         exercises:
 *           type: array
 *           items:
 *             type: string
 *           example: ["21 thrusters", "12 rope climbs, 15 ft", "15 thrusters", "9 rope climbs, 15 ft", "9 thrusters", "6 rope climbs, 15 ft"]
 *         createdAt:
 *           type: string
 *           example: 4/20/2022, 2:21:56 PM
 *         updatedAt: 
 *           type: string
 *           example: 4/20/2022, 2:21:56 PM
 *         trainerTips:
 *           type: array
 *           items:
 *             type: string
 *           example: ["Split the 21 thrusters as needed", "Try to do the 9 and 6 thrusters unbroken", "RX Weights: 115lb/75lb"]
 */

...

Nell'esempio qui sopra abbiamo creato il nostro primo schema. Tipicamente questa definizione sarà all'interno del nostro file schema o modello dove hai definito i modelli del database.

Come puoi vedere è piuttosto semplice. Abbiamo definito tutte le proprietà che compongono un allenamento incluso il tipo e un esempio.

Puoi visitare la nostra pagina di documentazione nuovamente e riceverai un'altra sezione che contiene gli schemi.

Questo schema può ora essere referenziato nella risposta del nostro endpoint.

// In src/v1/routes/workoutRoutes.js
...

/**
 * @openapi
 * /api/v1/workouts:
 *   get:
 *     tags:
 *       - Workouts
 *     responses:
 *       200:
 *         description: OK
 *         content:
 *           application/json:
 *             schema:
 *               type: object
 *               properties:
 *                 status:
 *                   type: string
 *                   example: OK
 *                 data:
 *                   type: array 
 *                   items: 
 *                     $ref: "#/components/schemas/Workout"
 */
router.get("/", cache("2 minutes"), workoutController.getAllWorkouts);

...

Guarda attentamente al fondo della riga di commento sotto "items". Stiamo usando "$ref" per creare un riferimento e stiamo referenziando il percorso del nostro schema che abbiamo definito all'interno del file degli allenamenti.

Ora siamo in grado di mostrare un allenamento completo nella nostra risposta.

Abbastanza bello, vero? Potresti pensare che "digitare questi commenti a mano può essere un compito noioso".

Questo potrebbe essere vero, ma pensala in questo modo. Quei commenti che si trovano all'interno del tuo codice sono anche un'ottima documentazione per te stesso come sviluppatore dell'API. Non è necessario consultare sempre la documentazione quando si desidera conoscere le informazioni su un endpoint specifico. Puoi semplicemente cercarlo in un posto all'interno del tuo codice sorgente.

La documentazione degli endpoint ti aiuta anche a comprenderli meglio e ti "costringe" a pensare a qualsiasi cosa che potresti aver dimenticato di implementare.

Come vedi ho dimenticato davvero qualcosa. Mancano ancora le possibili risposte di errore e i parametri di query!

Risolviamolo:

// In src/v1/routes/workoutRoutes.js
...

/**
 * @openapi
 * /api/v1/workouts:
 *   get:
 *     tags:
 *       - Workouts
 *     parameters:
 *       - in: query
 *         name: mode
 *         schema:
 *           type: string
 *         description: The mode of a workout
 *     responses:
 *       200:
 *         description: OK
 *         content:
 *           application/json:
 *             schema:
 *               type: object
 *               properties:
 *                 status:
 *                   type: string
 *                   example: OK
 *                 data:
 *                   type: array 
 *                   items: 
 *                     $ref: "#/components/schemas/Workout"
 *       5XX:
 *         description: FAILED
 *         content:
 *           application/json:
 *             schema:
 *               type: object
 *               properties:
 *                 status: 
 *                   type: string
 *                   example: FAILED
 *                 data:
 *                   type: object
 *                   properties:
 *                     error:
 *                       type: string 
 *                       example: "Some error message"
 */
router.get("/", cache("2 minutes"),  workoutController.getAllWorkouts);

...

Quando guardi la parte superiore del nostro commento sotto "tags", puoi vedere che ho aggiunto un'altra chiave chiamata "parameters", dove ho definito il nostro parametro di ricerca per il filtro.

La nostra documentazione ora lo visualizza correttamente:

Per documentare un possibile caso di errore, a questo punto stiamo generando solo un errore 5XX. Quindi sotto "responses" puoi vedere che ho anche definito un'altra documentazione per questo..

La nostra pagina di documentazione ora è come questa:

Fantastico! Abbiamo appena creato la documentazione completa per un endpoint. Ti consiglio vivamente di implementare il resto degli endpoint da solo per acquisire pratica. Imparerai molto mentre lo fai!

Come potresti aver visto, documentare la tua API non deve essere sempre un mal di testa. Penso che gli strumenti che ti ho presentato riducano il tuo sforzo complessivo e impostare tutto sia piuttosto semplice.

Quindi possiamo concentrarci sulla cosa importante, la documentazione stessa. A mio parere, la documentazione di swagger/OpenAPI è molto buona e ci sono molti ottimi esempi su internet.

Non avere una documentazione a causa del troppo lavoro "extra" non dovrebbe più essere una scusa.

Conclusione

Finalmente, è stata una corsa piuttosto divertente. Mi è davvero piaciuto scrivere questo articolo per te e ho anche imparato molto.

Potrebbero esserci migliori pratiche che sono importanti mentre altre potrebbero non essere applicabili alla tua situazione attuale. Va bene, perché come ho detto prima, è responsabilità di ogni sviluppatore scegliere le migliori pratiche che possono essere applicate alla propria situazione attuale.

Ho fatto del mio meglio per mettere insieme tutte quelle che ho attuato fino ad ora creando la nostra API lungo il percorso. Mi sono davvero divertito!

Mi piacerebbe ricevere un feedback di qualsiasi tipo. Se c'è qualcosa che vorresti dirmi (buona o cattiva), non esitare a contattarmi:

Ecco il mio Instagram (puoi anche seguire il mio percorso di sviluppatore di software)

Ci vediamo alla prossima!

La programmazione orientata agli oggetti, in breve OOP (Object Orienting Programming), mira a implementare entità del mondo reale come ereditarietà, incapsulamento e polimorfismo nella programmazione.

Lo scopo principale della OOP è di tenere insieme dati e funzioni che operano su di essi in modo che nessuna altra parte di codice possa accedere a tali dati eccetto queste funzioni.

Impareremo le diverse caratteristiche della programmazione orientata agli oggetti in linguaggio C++.

Oggetto

Gli oggetti costituiscono le entità base nella fase di esecuzione in un sistema orientato agli oggetti. Gli oggetti sono istanze di una classe, che è un tipo di dato definito dall'utente.

class person
{
    char name[20];
    int id;
public:
    void getdetails(){}
};
 
int main()
{
   person p1; //p1 è un oggetto 
}

Gli oggetti occupano spazio in memoria e hanno un indirizzo associato come un record in pascal o una struttura o union in C.

Quando un programma viene eseguito, gli oggetti interagiscono scambiandosi messaggi.

Ciascun oggetto contiene dei dati e del codice per manipolarli. Gli oggetti possono interagire senza aver bisogno di conoscere i dettagli o il codice di ciascun altro. È sufficiente sapere quale tipo di messaggio viene accettato e il tipo di risposta ritornata dagli oggetti.

Classe

Una classe è un modello che rappresenta dati e funzioni o metodi. Una classe non occupa spazio.

class nome_classe
{
  private:
     //dichiarazione di dati e funzioni membro
  public:
     //dichiarazione di dati e funzioni membro
  protected:
     //dichiarazione di dati e funzioni membro	
};

Una classe è un tipo di dato definito dall'utente come le strutture e le union in C.

Nella modalità predefinita, le variabili nella classe sono private, ma in caso di struttura sono pubbliche, nell'esempio più sopra person è una classe.

Incapsulamento e Astrazione Dati

Tenere insieme (combinare) dati e funzioni in una singola unità è noto come incapsulamento. I dati non sono accessibili direttamente dal mondo esterno, ma solo tramite i metodi e le proprietà esposti dalla classe. Questo isolamento dei dati dall'accesso diretto da un programma viene detto occultamento di dati oppure occultamento di informazioni.

Per astrazione dati ci si riferisce al fatto che vengono fornite solo le informazioni necessarie al mondo esterno e vengono nascosti i dettagli dell'implementazione.

Per esempio considera una classe Complex che contenga le funzioni pubbliche getReal() e getImag(). Possiamo implementare la classe come un array di due elementi oppure come due variabili.

Il vantaggio dell'astrazione è che possiamo modificare l'implementazione in qualsiasi momento e gli utenti della classe Complex non saranno interessati visto che l'interfaccia dei nostri metodi rimane la stessa. Se l'implementazione fosse stata pubblica, non saremmo stati in grado di modificarla.

Ereditarietà

L'ereditarietà è il processo per il quale oggetti di una classe acquisiscono le proprietà di oggetti di un un'altra classe. Supporta il concetto di classificazione gerarchica.

L'ereditarietà fornisce riusabilità. Il che vuol dire che possiamo aggiungere caratteristiche a una classe esistente senza modificarla.

Polimorfismo

Il polimorfismo fa riferimento alla capacità di assumere più di una forma. Un'operazione potrebbe manifestare comportamenti diversi per istanze diverse. Il comportamento dipende dai tipi di dato usati nell'operazione.

C++ supporta il sovraccarico dell'operatore e della funzione. Il sovraccarico dell'operatore consiste nel fare in modo che un operatore assuma comportamenti diversi in istanze diverse. Il sovraccarico della funzione consiste nell'usare un singolo nome di funzione per eseguire tipi di compito differenti. Il polimorfismo è usato estensivamente nell'implementazione dell'ereditarietà.

Collegamento Dinamico

Nel collegamento dinamico, il codice che deve essere eseguito in risposta alla chiamata di una funzione viene deciso in fase di esecuzione.  C++ ha le funzioni virtuali che supportano questo.

Passaggio di messaggi

Gli oggetti comunicano tra loro inviando e ricevendo informazioni da ciascun altro. Un messaggio per un oggetto è la richiesta che una certa procedura venga eseguita, pertanto verrà invocata una funzione nell'oggetto ricevente che genera i risultati attesi.

Il passaggio di messaggi implica l0 specificare il nome dell'oggetto, il nome della funzione e l'informazione da inviare.

Altre risorse

Object Oriented Programming Concepts: How to go from Zero to One with Objects

Come spiegare concetti di programmazione orientata agli oggetti a un bambino di 6 anni

Tipi di Dato in C

Ci sono parecchi modi per conservare dati in C, e sono tutti diversi l'uno dall'altro. I tipi di dato in cui le informazioni possono essere archiviate sono chiamati "data types". C perdona molto meno rispetto ad altri linguaggi per quanto riguarda i tipi di dato. Ne consegue che è importante comprendere i tipi di dato esistenti, le loro capacità e i loro limiti.

Una stranezza dei tipi di dato in C è che dipendono interamente dall'hardware sul quale stai eseguendo il codice. Un int nel tuo laptop sarà più piccolo rispetto a un int in un supercomputer, quindi conoscere i limiti dell'hardware sul quale stai lavorando è importante. Questa è anche la ragione per la quale i tipi di dato sono definiti con valori limite minimi e massimi - un valore int, come imparerai, potrà contenere valori da  -32767 a 32767; su certe macchine sarà però in grado di conservare valori anche eccedenti.

Ci sono due categorie in cui possiamo suddividere valori numerici: interi (integers) e in virgola mobile (floating points numbers). Gli interi sono numeri interi. Possono essere positivi, negativi oppure zero. Numeri come -321, 497, 19345, e -976812 sono tutti perfettamente validi, mentre 4.5 non lo è perché non è un numero intero.

I numeri in virgola mobile sono numeri con decimali. Comprendono anche i numeri interi, -321, 497, 19345, e -976812 che sono tutti validi, ma anche 4,5, 0,0004, -324,984, e altri numeri non interi sono validi.

C ci consente di scegliere tra parecchie opzioni per i nostri tipi di dato in quanto sono tutti conservati nel computer in modi diversi. Ne consegue che è importante conoscere limiti e capacità di ciascun tipo di dato per potere scegliere quello più appropriato.

Tipi di dato Interi

Caratteri: char

char contiene caratteri - cose come lettere, punteggiatura e spazi. In un computer i caratteri sono conservati come numeri, pertanto char contiene valori interi che rappresentano caratteri. L'effettiva transcodifica viene descritta dallo standard ASCII. Ecco una comoda tabella per cercare corrispondenze.

La dimensione reale, come tutti gli altri tipi di dato in C, dipende dall'hardware sul quale stai lavorando. Come minimo è di 8 bit, quindi contiene valori da 0 a 127. In alternativa si può usare un char con segno (signed char) che può contenere valori da  -128 a 127.

Interi Standard: int

La quantità di memoria che può utilizzare un singolo int dipende dall'hardware. Tuttavia puoi aspettarti che un int sia almeno di 16 bit. Il che vuol dire che può conservare valori da -32,768 a 32,767, o più a seconda dell'hardware.

Come per tutti gli altri tipi di dato c'è una variante senza segno (unsigned) che può essere usata. Il dato contenuto in un tipo unsigned int può essere positivo e zero ma non negativo, quindi può contenere valori da 0 a 65,535, o più a seconda dell'hardware.

Interi Corti: short

Questo tipo di dato non viene usato spesso, ma è meglio sapere che esiste. Come l'int può conservare valori da -32768 a 32767. Diversamente da int, tuttavia, queste sono tutte le sue capacità. Ogniqualvolta puoi usare short, puoi anche usare int.

Interi Lunghi: long

Il tipo di dato long conserva interi come il tipo int, ma offre una gamma di valori maggiore al costo di più memoria. long usa almeno 32 bit, e può quindi contenere valori da -2,147,483,648 a 2,147,483,647. In alternativa puoi usare unsigned long per una gamma di valori da 0 a 4,294,967,295.

Interi Ancora Più Lunghi: long long

Il tipo di dato long long è esagerato per quasi tutte le applicazioni, ma C ti consente comunque di usarlo. È in grado di conservare valori da  −9,223,372,036,854,775,807 a 9,223,372,036,854,775,807. In alternativa, esagerando ulteriormente, c'è il tipo senza segno unsigned long long, che conserva valori da 0 a 18,446,744,073,709,551,615.

Tipi di Dato in Virgola Mobile

Numeri in Virgola Mobile Base: float

float richiede almeno 32 bit per conservare il dato, ma offre fino a 6 cifre decimali da 1.2E-38 a 3.4E+38.

Doppi: double

double richiede il doppio di memoria rispetto a float (quindi almeno 64 bit). In cambio può offrire fino a 15 cifre decimali da 2.3E-308 a 1.7E+308.

Ottenere una gamma più ampia di double: long double

long double richiede almeno 80 bit. Pertanto può contenere fino a 19 cifre decimali da 3.4E-4932 a 1.1E+4932.

Scegliere il tipo di dato giusto

C ti fa scegliere il tipo di dato e ti fa essere molto specifico e intenzionale sul modo in cui lo fai. Questo ti dà molto potere sul tuo codice, ma è importante scegliere quello giusto.

In generale, dovresti scegliere il tipo minimo per il tuo scopo. Se sai che conterai interi da 1 a 10, non ti serve un long e neppure un double. Se sai che non avrai mai valori negativi, appoggiati alle varianti unsigned dei rispettivi tipi di dato. Fornendo questa funzionalità invece che facendolo automaticamente, C è in grado di produrre codice molto leggero ed efficiente. Tuttavia dipende da te, come programmatore, capire capacità e limiti e scegliere in modo appropriato.

Possiamo usare la funzione sizeof() per verificare la dimensione di una variabile. Dai un'occhiata al seguente programma in  C che mostra l'utilizzo dei diversi tipi:

#include <stdio.h>

int main()
{
    int a = 1;
    
    char b ='G';
    
    double c = 3.14;
    
    printf("Hello World!\n");
 
    //stampa le variabili definite qui sopra assieme alle loro dimensioni
    printf("Ciao! Sono un carattere. Il mio valore è %c e "
           "la mia dimensione è %lu byte.\n", b,sizeof(char));
    //puoi anche usare sizeof(b) qui sopra
 
    printf("Ciao! Sono un intero. Il mio valore è %d e "
           "la mia dimensione è %lu  byte.\n", a,sizeof(int));
    //puoi anche usare sizeof(a) qui sopra
 
    printf("Ciao! Sono una variabile in virgola mobile."
           " Il mio valore è %lf e la mia dimensione è %lu byte.\n",c,sizeof(double));
    //puoi anche usare sizeof(c) qui sopra
 
    printf("Ciao! A presto. :)\n");
    return 0;
}

Risultato:

Hello World!
Ciao! Sono un carattere. Il mio valore è G e la mia dimensione è 1 byte.
Ciao! Sono un intero. Il mio valore è 1 e la mia dimensione è 4  byte.
Ciao! Sono una variabile in virgola mobile. Il mio valore è 3.140000 e la mia dimensione è 8 byte.
Ciao! A presto. :)

Il Tipo Void

void specifica che non c'è un valore disponibile. Viene usato in tre tipi di situazione:

1. Funzione che ritorna void

Ci sono varie funzioni in C che non restituiscono alcun valore oppure puoi dire che restituiscono void. Una funzione senza valore di ritorno ha il tipo di valore ritornato void. Per esempio, void exit (int status);

2. Argomenti di funzione come void

Diverse funzioni in C non accettano parametri. Una funzione senza parametri può accettare un void. Per esempio, int rand(void);

3. Puntatori a void

Un puntatore di tipo void * rappresenta l'indirizzo di un oggetto, ma non il suo tipo. Per esempio una funzione di allocazione di memoria void *malloc( size_t size); ritorna un puntatore a void, che può essere convertito in qualsiasi altro tipo di dato.

I puntatori sono probabilmente la funzionalità di C più difficile da capire. Tuttavia sono una delle funzionalità che rendono C un linguaggio eccellente.

In questo articolo, partiremo dagli aspetti base dei puntatori fino ad arrivare al loro utilizzo con array, funzioni e strutture.

Quindi rilassati, prendi un caffè, e preparati per imparare tutto sui puntatori.

Sommario

A. Fondamenti

1. Cosa sono esattamente i puntatori?
2. Definizione e Notazione
3. Alcuni Puntatori Speciali
4. Puntatori Aritmetici

B. Array e Stringhe

1. Perché puntatori e array?
2. Array 1-D
3. Array 2-D
4. Stringhe
5. Array di Puntatori
6. Puntatori ad Array

C. Funzioni

1. Chiamata per Valore vs. Chiamata per Riferimento
2. Puntatori come Argomenti di Funzione
3. Puntatori come Valori di Ritorno da Funzione
4. Puntatore a Funzione
5. Array di Puntatori a Funzioni
6. Puntatore a Funzione come Argomento

D. Strutture

1. Puntatore a Struttura
2. Array di Strutture
3. Puntatore a Struttura come Argomento

E. Puntatore a Puntatore

F. Conclusione

A. Fondamenti

1. Cosa sono esattamente i puntatori?

Prima di passare alla definizione di puntatori, cerchiamo di capire cosa avviene quando scriviamo il seguente codice:

int digit = 42;

Un blocco di memoria è riservato dal compilatore per conservare un valore int. Il nome del blocco è digit e il valore assegnato a questo blocco è 42.

Ora, per ricordare il blocco, a esso viene assegnato un indirizzo o un numero di posizione (diciamo 24650).

Il valore del numero di posizione non è importante per noi, visto che è un valore casuale. Tuttavia possiamo accedere a questo indirizzo usando il carattere & (e commerciale) o indirizzo dell'operatore.

printf("Indirizzo di digit = %d.",&digit);
 /* stampa "Indirizzo di digit = 24650. */

Possiamo ottenere il valore della variabile digit dal suo indirizzo usando un altro operatore, * (asterisco), chiamato operatore di riferimento indiretto o dereferenziazione o valore all'indirizzo.

printf("Valore di digit = %d.", *(&digit);
 /* stampa "Valore di digit = 42. */

2. Definizione e Notazione

L'indirizzo di una variabile può essere conservato in un'altra variabile nota come variabile puntatore. La sintassi per conservare l'indirizzo di una variabile in un puntatore è:

tipoDato *nomeVariabilePuntatore = &nomeVariabile;

Per la nostra variabile digit, ciò si può scrivere in questo modo:

int *addressOfDigit = &digit;

oppure:

int *addressOfDigit;
addressOfDigit= &digit;

Questo si può leggere come  - Un puntatore a int (intero) addressOfDigit conserva l' indirizzo (addressOf(&)) della variabile digit.

Alcuni punti da capire:

tipoDato – Dobbiamo dire al computer quale tipo di dato conterrà la variabile il cui indirizzo andremo a conservare. In questo caso int era il tipo di dato di  digit.

Questo non vuol dire che addressOfDigit conserverà un valore di tipo int. Un puntatore a intero (come addressOfDigit) può solo conservare l'indirizzo di variabili di tipo int.

int variable1;
int variable2;
char variable3;
int *addressOfVariables;

* – Una variabile puntatore è una variabile speciale nel senso che viene usata per conservare un indirizzo di un'altra variabile. Per differenziarla dalle altre variabili che non conservano un indirizzo, usiamo * come simbolo nella dichiarazione.

Qui possiamo assegnare l'indirizzo di  variable1 e variable2 al puntatore di interi addressOfVariables ma non variable3 visto che è di tipo char. Ci serverebbe una variabile puntatore a carattere per contenere il suo indirizzo.

Possiamo usare la nostra variabile puntatore addressOfDigit per stampare l'indirizzo e il valore di  digit in questo modo:

printf("Indirizzo di digit = %d.", addressOfDigit);
 /* stampa "Indirizzo di digit = 24650." */
printf("Valore di digit = %d.", *addressOfDigit);
 /* stampa "Valore di digit = 42. */

Qui, *addressOfDigit può essere letto come il valore all'indirizzo conservato in addressOfDigit.

Nota che abbiamo usato %d come identificatore di formato per addressOfDigit. In effetti questo non è completamente corretto. L'identificatore corretto sarebbe %p.

Usando %p, l'indirizzo viene visualizzato come valore esadecimale. Un indirizzo di memoria può tuttavia essere visualizzato anche come intero oppure come valore ottale. Per questo, visto che non è il modo interamente corretto, viene mostrato un avvertimento.

int num = 5;
int *p = #
printf("Indirizzo usando %%p = %p",p);
printf("Indirizzo usando %%d = %d",p);
printf("Indirizzo usando %%o = %o",p);

Questo il risultato in base al compilatore che sto usando:

Indirizzo usando %p = 000000000061FE00
Indirizzo usando %d = 6422016
Indirizzo usando %o = 30377000

Questo è l'avvertimento mostrato quando usi  %d - " warning: format '%d' expects argument of type 'int', but argument 2 has type 'int *' " ("avvertimento: format %d si aspetta argomenti di tipo 'int', ma l'argomento 2 è di tipo 'int *').

3. Alcuni Puntatori Speciali

Il Puntatore Selvaggio

char *alphabetAddress; /* non inizializzato o puntatore selvaggio */
char alphabet = "a";
alphabetAddress = &alphabet; /* ora non più puntatore selvaggio */

Quando abbiamo definito il nostro puntatore a carattere alphabetAddress, non lo abbiamo inizializzato.

Tali puntatori sono noti come puntatori selvaggi (wild pointers). Conservano un valore spazzatura (vale a dire l'indirizzo di memoria) di un byte che non sappiamo se sia riservato o meno (ricorda int digit = 42;, abbiamo riservato un indirizzo di memoria quando l'abbiamo dichiarata).

Supponiamo di dereferenziare un puntatore selvaggio e di assegnare un valore all'indirizzo di memoria al quale sta puntando. Questo provocherà un comportamento inatteso visto che andremo a scrivere dati in un blocco di memoria che potrebbe essere libero oppure riservato.

Puntatore Null

Per assicurarci di non avere un puntatore selvaggio, possiamo inizializzare un puntatore con un valore NULL , rendendolo un puntatore null (null pointer).

char *alphabetAddress = NULL /* Puntatore null */ 

Un puntatore null punta al nulla, oppure a un indirizzo di memoria al quale gli utenti non possono accedere.

Puntatore Void

Un puntatore void può essere usato per puntare a una variabile associata a qualsiasi tipo di dato. Può essere riutilizzato per puntare a qualsiasi tipo di dato vogliamo. Viene dichiarato in questo modo:

void *puntatoreANomeVariabile = NULL;

Vista la loro natura molto generica, sono anche noti come puntatori generici (generic pointers).

Con la loro flessibilità, i puntatori void sono anche dotati di qualche vincolo. I puntatori void non possono essere dereferenziati come qualsiasi altro puntatore. È necessaria un'appropriata conversione di tipo (typecasting).

void *pointer = NULL;
int number = 54;
char alphabet = "z";
pointer = &number;
printf("Il valore di number = ", *pointer); /* Errore di compilazione */
/* Metodo corretto */
printf("Il valore di number = ", *(int *)pointer); /* stampa "Il valore di number = 54" */
pointer = &alphabet;
printf("Il valore di alphabet = ", *pointer); /* Errore di compilazione */
printf("Il valore di alphabet = ", *(char *)pointer); /* stampa "Il valore di alphabet = z */

Allo stessa stregua, i puntatori void richiedono una conversione di tipo per eseguire operazioni aritmetiche.

I puntatori void sono di grande uso in C. Funzioni di libreria come malloc() e calloc() che allocano dinamicamente memoria, ritornano puntatori void. qsort(), una funzione integrata di ordinamento in C, riceve una funzione come suo argomento che a sua volta riceve puntatori void come suoi argomenti.

Puntatori Pendenti

Un puntatore pendente (dangling pointer) punta a un indirizzo di memoria in uso per conservare una variabile. Visto che l'indirizzo a cui punta non è più riservato, l'uso potrebbe portare a risultati inaspettati.

main(){
  int *ptr;
  ptr = (int *)malloc(sizeof(int));
  *ptr = 1;
  printf("%d",*ptr); /* stampa 1 */
  free(ptr); /* deallocazione */
  *ptr = 5;
  printf("%d",*ptr); /* potrebbe o non potrebbe stampare 5 */
}

Anche se la memoria è stata deallocata da free(ptr), il puntatore a intero ptr punta ancora a quell'indirizzo di memoria non più riservato.

4. Puntatori Aritmetici

Ora sappiamo che i puntatori non sono come le altre variabili. Non conservano alcun valore, ma l'indirizzo di blocchi di memoria.

Pertanto dovrebbe essere piuttosto chiaro che non tutte le operazioni aritmetiche sarebbero valide con essi. Avrebbe senso moltiplicare o dividere due puntatori (che contengono indirizzi)?

I puntatori hanno poche ma immensamente utili operazioni valide:

1. Si può assegnare il valore di un puntatore a un altro solo se sono dello stesso tipo (a meno che non siano oggetto di conversione di tipo oppure uno di essi sia void *).

int ManU = 1;
int *addressOfManU = &ManU;
int *anotherAddressOfManU = NULL;
anotherAddressOfManU = addressOfManU; /* Valido */
double *wrongAddressOfManU = addressOfManU; /* Non Valido */

2.   Puoi solo aggiungere o sottrarre interi ai puntatori.

int myArray = {3,6,9,12,15};
int *pointerToMyArray = &myArray[0];
pointerToMyArray += 3; /* Valido */
pointerToMyArray *= 3; /* Non Valido */

Quando aggiungi (o sottrai) un intero (diciamo n) a un puntatore, non stai effettivamente aggiungendo (o sottraendo) n byte al valore del puntatore. Stai in realtà aggiungendo (o sottraendo) n-volte in byte la dimensione del tipo di dato della variabile puntata.

int number = 5;
 /* Supponiamo che l'indirizzo di number sia 100 */
int *ptr = &number;
int newAddress = ptr + 3;
 /* Uguale a ptr + 3 * sizeof(int) */

Il valore conservato in newAddress non sarà 103, ma 112.

3. La sottrazione e il confronto di puntatori è valida solo se entrambi sono membri dello stesso array. La sottrazione tra puntatori fornisce il numero di elementi che li separano.

int myArray = {3,6,9,12,15};
int sixthMultiple = 18;
int *pointer1 = &myArray[0];
int *pointer2 = &myArray[1];
int *pointer6 = &sixthMuliple;
 /* Espressione valida */
if(pointer1 == pointer2)
pointer2 - pointer1;
 /* Espressione non valida */
if(pointer1 == pointer6)
pointer2 - pointer6

4.  Puoi assegnare o confrontare un puntatore con  NULL.

L'unica eccezione alle regole qui sopra è che l'indirizzo del primo blocco di memoria dopo l'ultimo elemento di un array segua un puntatore aritmetico.

Puntatori e array coesistono. Queste valide manipolazioni di puntatori sono immensamente utili con gli array, e le discuteremo nella prossima sezione.

B. Array e Stringhe

1. Perché puntatori e array?

In C, i puntatori e gli array hanno una relazione piuttosto forte.

La ragione per la quale dovrebbero essere discussi insieme è che quello che puoi ottenere con la notazione di array (nomeArray[indice]) può anche essere ottenuto con i puntatori, in genere più velocemente.

2. Array 1-D

Osserviamo cosa succede quando scriviamo int myArray[5];.

Cinque blocchi consecutivi di memoria a partire da myArray[0] fino a myArray[4] sono creati con valori spazzatura al loro interno. Ciascun blocco ha una dimensione di 4 byte.

Pertanto se l'indirizzo di myArray[0] è, diciamo, 100, l'indirizzo dei restanti blocchi sarebbe 104, 108, 112 e 116.

Dai un'occhiata al seguente codice:

int prime[5] = {2,3,5,7,11};
printf("Risultato usando &prime = %d\n",&prime);
printf("Risultato usando prime = %d\n",prime);
printf("Risultato usando &prime[0] = %d\n",&prime[0]);

/* Output */
Risultato usando &prime = 6422016
Risultato usando prime = 6422016
Risultato usando &prime[0] = 6422016

Quindi, &prime, prime, e &prime[0] danno tutti lo stesso indirizzo, giusto? Bene, aspetta e continua a leggere, perché avrai una sorpresa (e forse un po' di confusione).

Cerchiamo di incrementare  &prime, prime, e &prime[0] di 1.

printf("Risultato usando &prime = %d\n",&prime + 1);
printf("Risultato usando prime = %d\n",prime + 1);
printf("Risultato usando &prime[0] = %d\n",&prime[0] + 1);

/* Output */
Risultato usando &prime = 6422036
Risultato usando prime = 6422020
Risultato usando &prime[0] = 6422020

Aspetta! Come mai il risultato di &prime + 1 è diverso dagli altri due? Perché prime + 1 e &prime[0] + 1 sono ancora uguali? Rispondiamo a queste domande.

prime e &prime[0] puntano entrambi all'elemento 0 dell'array prime. Quindi il nome stesso di un array è a sua volta un puntatore all'elemento 0 dell' array.

Qui entrambi puntano al primo elemento di 4 byte di dimensione. Quando aggiungi 1 ad essi, ora puntano all'elemento con indice 1 dell'array. Ne consegue un aumento nell'indirizzo di 4.

&prime, d'altro canto, è un puntatore a un array int di dimensione 5. Conserva l'indirizzo base dell'array prime[5], che è uguale all'indirizzo del primo elemento. Pertanto un aumento di 1 risulta in un indirizzo con un aumento di 5 x 4 = 20 byte.

In breve, arrayName e &arrayName[0] puntano all'elemento 0 mentre  &arrayName punta all'intero array.

Possiamo accedere agli elementi dell'array usando variabili indicizzate come questa:

int prime[5] = {2,3,5,7,11};
for( int i = 0; i < 5; i++)
{
  printf("indice = %d, indirizzo = %d, valore = %d\n", i, &prime[i], prime[i]);
}

Possiamo fare la stessa cosa usando i puntatori che sono sempre più veloci rispetto all'uso dell'indicizzazione.

int prime[5] = {2,3,5,7,11};
for( int i = 0; i < 5; i++)
{
  printf("indice = %d, indirizzo = %d, valore = %d\n", i, prime + i, *(prime + i));
}

Entrambi i metodi danno questo risultato:

indice = 0, indirizzo = 6422016, valore = 2
indice = 1, indirizzo = 6422020, valore = 3
indice = 2, indirizzo = 6422024, valore = 5
indice = 3, indirizzo = 6422028, valore = 7
indice = 4, indirizzo = 6422032, valore = 11

Quindi &arrayName[i] e arrayName[i] sono lo stesso di  arrayName + i e  *(arrayName + i), rispettivamente.

3. Array 2-D

Gli array bidimensionali sono array di array.

int marks[5][3] = { { 98, 76, 89},
                    { 81, 96, 79},
                    { 88, 86, 89},
                    { 97, 94, 99},
                    { 92, 81, 59}
                  };

Si può pensare a marks come un array di 5 elementi, ognuno dei quali è un array monodimensionale che contiene 3 interi. Lavoreremo su una serie di programmi per comprendere le diverse espressioni di indicizzazione.

printf("L'indirizzo dell'intero array 2-D = %d\n", &marks);
printf("L'aggiunta di 1 risulta in %d\n", &marks +1);

/* Output */
L'indirizzo dell'intero array 2-D = 6421984
L'aggiunta di 1 risulta in 6422044

Come con gli array 1-D, &marks punta all'intero array 2-D, marks[5][3]. Pertanto incrementando di 1 ( = 5 array x 3 interi ciascuno x 4  byte = 60) risulta un aumento di 60 byte.

printf("Indirizzo dell'array 0 = %d\n", marks);
printf("L'aggiunta di 1 risulta in %d\n", marks +1);
printf("Indirizzo dell'array 0 =%d\n", &marks[0]);
printf("L'aggiunta di 1 risulta in %d\n", &marks[0] + 1);

/* Output */
Indirizzo dell'array 0 = 6421984
L'aggiunta di 1 risulta in 6421996
Indirizzo dell'array 0 = 6421984
L'aggiunta di 1 risulta in 6421996

Se marks fosse un array 1-D, marks e &marks[0] avrebbero puntato allo stesso elemento 0 . Per un array 2-D, gli elementi ora sono array 1-D. Di conseguenza, marks e &marks[0] puntano all'elemento dell'array con indice  0 , e l'aggiunta di 1 punta al primo array.

printf("Indirizzo dell'elemento 0 dell'array 0 = %d\n", marks[0]);
printf("L'aggiunta di 1 risulta in %d\n", marks[0] + 1);
printf("Indirizzo dell'elemento 0 del primo array = %d\n", marks[1]);
printf("L'aggiunta di 1 risulta in %d\n", marks[1] + 1);

 /* Output */
Indirizzo dell'elemento 0 dell'array 0 = 6421984
L'aggiunta di 1 risulta in 6421988
Indirizzo dell'elemento 0 del primo array = 6421996
L'aggiunta di 1 risulta in 6422000

Ora viene la differenza. Per un array 1-D, marks[0] darebbe il valore dell'elemento 0. Un incremento di 1 aumenterebbe il valore di 1.

Ma in un array 2-D , marks[0] punta all'elemento 0 dell'array 0. In modo simile,  marks[1] punta all'elemento 0 del primo array. Un incremento di 1 punterebbe al primo elemento del primo array.

printf("Valore dell'elemento 0 dell'array 0 = %d\n", marks[0][0]);
printf("L'aggiunta di 1 risulta in %d", marks[0][0] + 1);

/* Output */
Valore dell'elemento 0 dell'array 0 = 98
L'aggiunta di 1 risulta in 99

Questa è la parte nuova,  marks[i][j] fornisce il valore dell'elemento j dell'array i. Un incremento a esso cambia il valore conservato in marks[i][j]. Ora proviamo a scrivere marks[i][j] in termini di puntatori.

Sappiamo dalla nostra precedente discussione che marks[i] + j punterebbe all'elemento i dell'array j. Dereferenziandolo significherebbe ottenere il valore a quell'indirizzo. Pertanto marks[i][j] è uguale a *(marks[i] + j).

Dalla nostra discussione sugli array 1-D, marks[i] è uguale a *(marks + i). Quindi marks[i][j] può essere scritto come *(*(marks + i) + j) in termini di puntatori.

Ecco un riepilogo delle notazioni a confronto per gli array monodimensionali e bidimensionali.

4. Stringhe

Una stringa è un array monodimensionale di caratteri che finisce con un carattere null (\0). Quando scriviamo char name[] = "Srijan";, ciascun carattere occupa un byte di memoria con l'ultimo che è sempre \0.

In modo simile agli array visti in precedenza, name e &name[0] puntano al carattere a indice 0 nella stringa mentre &name punta all'intera stringa. Inoltre,  name[i] può essere scritto come *(name + i).

/* Array di Stringhe */
char top[6][15] = {
                    "Liverpool",
                    "Man City",
                    "Man United",
                    "Chelsea",
                    "Leicester",
                    "Tottenham"
                  };

printf("Puntatore a un array 2-D = %d\n", &top);
printf("L'aggiunta di 1 risulta in %d\n", &top + 1);

 /* Output */
// Puntatore a un array 2-D = 6421952
// L'aggiunta di 1 risulta in 6422042

printf("Puntatore all'indice 0 della stringa = %d\n", &top[0]);
printf("L'aggiunta di 1 risulta in %d\n", &top[0] + 1);

 /* Output */
// Puntatore all'indice 0 della stringa = 6421952
// L'aggiunta di 1 risulta in 6421967

printf("Puntatore all'indice 0 della stringa = %d\n", top);
printf("L'aggiunta di 1 risulta in %d\n", top + 1);

 /* Output */
// Puntatore all'indice 0 della stringa = 6421952
// L'aggiunta di 1 risulta in 6421967

printf("Puntatore all'elemento a indice 0 della quarta stringa = %d\n", top[4]);
printf("Puntatore al primo elemento della quarta stringa = %c\n", top[4] + 1);

 /* Output */
// Puntatore all'elemento a indice 0 della quarta stringa = 6422012
// Puntatore al primo elemento della quarta stringa = 6422013

printf("Valore del primo carattere della terza stringa = %c\n", top[3][1]);
printf("Lo stesso usando puntatori = %c\n", *(*(top + 3) + 1));

 /* Output */
// Valore del primo carattere della terza stringa = h
// Lo stesso usando puntatori = h

Si può accedere e manipolare anche un array di caratteri bidimensionale oppure un array di stringhe come discusso prima.

/* Array di Stringhe */
char top[6][15] = {
                    "Liverpool",
                    "Man City",
                    "Man United",
                    "Chelsea",
                    "Leicester",
                    "Tottenham"
                  };

printf("Puntatore a un array 2-D = %d\n", &top);
printf("L'aggiunta di 1 risulta in %d\n", &top + 1);

 /* Output */
// Puntatore a un array 2-D = 6421952
// L'aggiunta di 1 risulta in 6422042

printf("Puntatore all'indice 0 della stringa = %d\n", &top[0]);
printf("L'aggiunta di 1 risulta in %d\n", &top[0] + 1);

 /* Output */
// Puntatore all'indice 0 della stringa = 6421952
// L'aggiunta di 1 risulta in 6421967

printf("Puntatore all'indice 0 della stringa = %d\n", top);
printf("L'aggiunta di 1 risulta in %d\n", top + 1);

 /* Output */
// Puntatore all'indice 0 della stringa = 6421952
// L'aggiunta di 1 risulta in 6421967

printf("Puntatore all'elemento a indice 0 della quarta stringa = %d\n", top[4]);
printf("Puntatore al primo elemento della quarta stringa = %c\n", top[4] + 1);

 /* Output */
// Puntatore all'elemento a indice 0 della quarta stringa = 6422012
// Puntatore al primo elemento della quarta stringa = 6422013

printf("Valore del primo carattere della terza stringa = %c\n", top[3][1]);
printf("Lo stesso usando puntatori = %c\n", *(*(top + 3) + 1));

 /* Output */
// Valore del primo carattere della terza stringa = h
// Lo stesso usando puntatori = h

5. Array di Puntatori

Oltre agli array di tipo  int e  char, esiste anche un array di puntatori. Questo tipo di array sarebbe semplicemente una collezione di indirizzi. Questi indirizzi potrebbero puntare a variabili singole oppure a un altro array.

La sintassi per dichiarare un array di puntatori è la seguente:

tipoDato *nomeVariabile[dimensione];

/* Esempi */
int *example1[5];
char *example2[8];

Seguendo la precedenza degli operatori, il primo esempio potrebbe essere letto come -  example1 è un array([]) di 5 puntatori a int. In modo simile, example2 è un array di 8 puntatori a char.

Possiamo conservare un array di stringhe bidimensionale top usando un array di puntatori, risparmiando anche della memoria.

char *top[] = {
                    "Liverpool",
                    "Man City",
                    "Man United",
                    "Chelsea",
                    "Leicester",
                    "Tottenham"
                  };

top conterrà gli indirizzi base di tutti i rispettivi nomi. L'indirizzo base di  "Liverpool" sarà conservato in top[0], "Man City" in top[1], e così via.

Nella dichiarazione precedente, abbiamo richiesto 90 byte per conservare i nomi. Qui servono solo ( 58 (somma dei byte dei nomi) + 12 ( byte richiesti per conservare l'indirizzo nell'array) ) 70 byte.

La manipolazione di stringhe o interi diventa molto più facile quando si usa un array di puntatori.

Se proviamo a inserire "Leicester" davanti a "Chelsea", dobbiamo solo invertire i valori di  top[3] e top[4] in questo modo:

char *temporary;
temporary = top[3];
top[3] = top[4];
top[4] = temporary;

Senza puntatori, avremmo dovuto scambiare ogni carattere delle stringhe, il che avrebbe richiesto più tempo. Ecco perché le stringhe sono generalmente dichiarate usando i  puntatori.

6. Puntatori ad Array

Come i puntatori a int o i puntatori a char, abbiamo anche puntatori ad array. Questo puntatore punta all'intero array invece che ai suoi elementi.

Ricordi che abbiamo discusso di come &arrayName punti all'intero array? Ecco, si tratta di un puntatore ad array.

Un puntatore ad array può essere dichiarato in questo modo:

tipoDato (*nomeVariabile)[dimensione];

/* Esempi */
int (*ptr1)[5];
char (*ptr2)[15];

Nota le parentesi. Senza di esse, avremmo un array di puntatori. Il primo esempio può essere letto come  - ptr1 è un puntatore a un array di 5 int (interi).

int goals[] = { 85,102,66,69,67};
int (*pointerToGoals)[5] = &goals;
printf("Indirizzo conservato in pointerToGoals %d\n", pointerToGoals);
printf("Dereferenziandolo, otteniamo %d\n",*pointerToGoals);

/* Output */
Indirizzo conservato in pointerToGoals 6422016
Dereferenziandolo, otteniamo 6422016

Quando dereferenziamo un puntatore, otteniamo il valore a quell'indirizzo. Alla stessa stregua, dereferenziando un puntatore ad array, otteniamo l'array e il nome al quale punta l'array che punta all'indirizzo base. Possiamo confermare che *pointerToGoals fornisce l'array goals se troviamo la sua dimensione.

printf("Dimensione di goals[5] = %d, *pointerToGoals);

/* Output */
Dimensione di goals[5] = 20

Se lo dereferenziamo nuovamente, otterremo il valore conservato in quell'indirizzo. Possiamo stampare tutti gli elementi usando pointerToGoals.

for(int i = 0; i < 5; i++)
  printf("%d ", *(*pointerToGoals + i));

/* Output */
85 102 66 69 67

I puntatori e puntatori ad array sono piuttosto utili se accoppiati a funzioni. A seguire nella prossima sezione!

C. Funzioni

1. Chiamata per Valore vs. Chiamata per Riferimento

Dai un'occhiata al programma qui sotto:

#include <stdio.h>

int multiply(int x, int y){
  int z;
  z = x * y;
  return z;
}

main(){
  int x = 3, y = 5; 
  int product = multiply(x,y);
  printf("Prodotto = %d\n", product);
  /* stampa "Prodotto = 15" */
}

La funzione multiply() riceve due argomenti int e ritorna il loro prodotto come  int.

Nella chiamata a multiply(x,y), passiamo i valori di x e y (assegnati in main()), che sono gli effettivi argomenti, per multiply().

I valori degli effettivi argomenti sono passati o copiati negli argomenti formali x e y ( di multiply()).  x e y di multiply() sono diversi da quelli di main(). Questo si può verificare stampando i loro indirizzi.

#include <stdio.h>

int multiply(int x, int y){
  printf("Indirizzo di x in multiply() = %d\n", &x);
  printf("Indirizzo di y in multiply() = %d\n", &y);
  int z;
  z = x * y;
  return z;
}

main(){
  int x = 3, y = 5;
  printf("Indirizzo di x in main() = %d\n", &x);
  printf("Indirizzo di y in main() = %d\n", &y);
  int product = multiply(x,y);
  printf("Prodotto = %d\n", product);
}

/* Output */
Indirizzo di x in main() = 6422040
Indirizzo di y in main() = 6422036
Indirizzo di x in multiply() = 6422000
Indirizzo di y in multiply() = 6422008
Prodotto = 15

Visto che abbiamo creato valori conservati un una nuova posizione, ci costa memoria. Non sarebbe meglio se potessimo eseguire la stessa operazione senza sprecare spazio?

La chiamata per riferimento ci consente di farlo. Passiamo gli indirizzi o riferimenti delle variabili alla funzione, la quale non crea una copia. Usando l'operatore di dereferenziazione *, possiamo avere accesso al valore conservato in quegli indirizzi.

Possiamo anche riscrivere il programma qui sopra usando una chiamata per riferimento.

#include <stdio.h>

int multiply(int *x, int *y){
  int z;
  z = (*x) * (*y);
  return z;
}

main(){
  int x = 3, y = 5; 
  int product = multiply(&x,&y);
  printf("Prodotto = %d\n", product);
   /* Stampa "Prodotto = 15" */
}

2. Puntatori come Argomenti di Funzione

In questa sezione, esamineremo vari programmi nei quali passiamo valori di tipo int, char, array e stringhe come argomenti usando puntatori.

#include <stdio.h>

void add(float *a, float *b){
 float c = *a + *b;
 printf("L'addizione fornisce %.2f\n",c);
}

void subtract(float *a, float *b){
 float c = *a - *b;
 printf("La sottrazione fornisce %.2f\n",c);
}

void multiply(float *a, float *b){
 float c = *a * *b;
 printf("La moltiplicazione fornisce %.2f\n",c);
}

void divide(float *a, float *b){
 float c = *a / *b;
 printf("La divisione fornisce %.2f\n",c);
}

main(){
    printf("Digita due numeri :\n");
    float a,b;
    scanf("%f %f",&a,&b);
    printf("Cosa vuoi fare con questi numeri?\nAggiungi : a\nSottrai : s\nMoltiplica : m\nDividi : d\n");
    char operation = '0';
    scanf(" %c",&operation);
    printf("\nEseguo...\n\n");
    switch (operation) {
    case 'a':
        add(&a,&b);
        break;
    case 's':
        subtract(&a,&b);
        break;
    case 'm':
        multiply(&a,&b);
        break;
    case 'd':
        divide(&a,&b);
        break;
    default:
        printf("Input non valido!!!\n");

  }

}

Abbiamo creato quattro funzioni,  add(), subtract(), multiply() e divide() per eseguire operazioni aritmetiche su due numeri,  a e b.

Gli indirizzi di a e b sono passati alle funzioni. All'interno della funzione, usando  * abbiamo accesso ai valori e stampiamo il risultato.

In modo simile, possiamo passare array come argomenti usando un puntatore al loro primo elemento.

#include <stdio.h>

void greatestOfAll( int *p){
  int max = *p;
  for(int i=0; i < 5; i++){
    if(*(p+i) > max)
       max = *(p+i);
  }
  printf("L'elemento più grande è %d\n",max);
}
main(){
  int myNumbers[5] = { 34, 65, -456, 0, 3455};
  greatestOfAll(myNumbers);
   /* Stampa :L'elemento più grande è 3455" */
}

Visto che il nome dell'array è esso stesso un puntatore al primo elemento, lo passiamo come argomento alla funzione greatestOfAll(). Nella funzione qui sopra, iteriamo attraverso l'array tramite un ciclo e un puntatore.

#include <stdio.h>
#include <string.h>

void wish(char *p){
 printf("Buona giornata, %s",p);
}

main(){
 printf("Digita il tuo nome : \n");
 char name[20];
 gets(name);
 wish(name);
}

Qui sopra passiamo la stringa name a wish() tramite un puntatore e stampiamo il messaggio.

3. Puntatori come Valori di Ritorno da Funzione

#include <stdio.h>

int* multiply(int *a, int *b){
  int c = *a * *b;
  return &c;
}

main(){
  int a= 3, b = 5;
  int *c = multiply (&a,&b);
  printf("Prodotto = %d",*c);
}

La funzione multiply() riceve due parametri a  int. Anch'essa ritorna un puntatore a  int che conserva l'indirizzo nel quale il prodotto viene salvato.

È molto facile pensare che il risultato sia 15. Ma non lo è!

Quando viene chiamata multiply(), l'esecuzione di  main() viene messa in pausa e ora la memoria viene allocata per l'esecuzione di multiply(). Dopo che l'esecuzione è completata, la memoria allocata a  multiply() viene deallocata.

Pertanto, sebbene c ( locale a main()) conservi l'indirizzo del prodotto, non c'è garanzia che il dato sia ancora presente visto che la memoria è stata deallocata.

Quindi significa che i puntatori non possono essere ritornati da una funzione? No!

Possiamo fare due cose. Conservare l'indirizzo nello heap o sezione globale oppure dichiarare la variabile statica (static) in modo che il suo valore persista.

Le variabili statiche possono essere create semplicemente usando la parola chiave static prima del tipo di dato in fase di dichiarazione della variabile.

Per conservare indirizzi nello heap, possiamo usare le funzioni di libreria malloc() e calloc() che allocano memoria dinamicamente.

Il programma seguente spiega entrambi i metodi, che ritornano il risultato di 15.

#include <stdio.h>
#include <stdlib.h>

/* Usando malloc() */

int* multiply(int *a, int *b){
  int *c = malloc(sizeof(int));
  *c = *a * *b;
  return c;
}

main(){
  int a= 3, b = 5;
  int *c = multiply (&a,&b);
  printf("Prodotto = %d",*c);
}

/* Usando la parola chiave static */
#include <stdio.h>

int* multiply(int *a, int *b){
  static int c;
  c = *a * *b;
  return &c;
}

main(){
  int a= 3, b = 5;
  int *c = multiply (&a,&b);
  printf("Prodotto = %d",*c);
}

4. Puntatore a Funzione

Come un puntatore a diversi tipi di dati, abbiamo anche un puntatore a funzione.

Un puntatore a funzione (function pointer) conserva l'indirizzo di una funzione. Tuttavia non punta ad alcun dato. Punta alla prima istruzione nella funzione.

La sintassi per dichiarare un puntatore a funzione è la seguente:

 /* Dichiarazione di un funzione */
tipoRitornato nomeFunzione(tipoParametro1, tipoParametro2, ...);

 /* Dichiarazione di un puntatore a funzione */
tipoRitornato (*nomePuntatore)(tipoParametro1, tipoParametro2, ...);
nomePuntatore = &nomeFunzione; /* oppure nomePuntatore = nomefunzione; */

L'esempio che segue chiarisce:

int* multiply(int *a, int *b)
{
    int *c = malloc(sizeof(int));
    *c = *a * *b;
    return c;
}

main()
{ 
    int a=3,b=5;
    int* (*p)(int*, int*) = &multiply; /* oppure int* (*p)(int*, int*) = multiply; */
    int *c = (*p)(&a,&b); /* oppure int *c = p(&a,&b); */
    printf("Prodotto = %d",*c);
}

La dichiarazione per il puntatore  p alla funzione multiply() può essere letto come (seguendo la precedenza degli operatori) - p è un puntatore a funzione con due puntatori di tipo int( oppure due puntatori a int) come parametri che ritorna un puntatore a int.

Visto che il nome della funzione è anche un puntatore alla funzione, l'uso di & non è necessario. Inoltre l'eliminazione di * dalla chiamata alla funzione non influisce sul programma.

5. Array di Puntatori a Funzioni

Abbiamo visto come creare un array di puntatori a  int, char, e così via. Allo stesso modo, possiamo creare un array di puntatori a funzione.

In questo array, ogni elemento conserverà un indirizzo di una funzione, dove tutte le funzioni sono dello stesso tipo. Vale a dire che hanno lo stesso numero di parametri e tipo dato di ritorno.

Andremo a modificare un programma che abbiamo esaminato in precedenza in questa sezione. Conserveremo gli indirizzi di add(), subtract(), multiply() e divide() in un array facendo una chiamata a funzione tramite indicizzazione.

#include <stdio.h>

void add(float *a, float *b){
 float c = *a + *b;
 printf("L'addizione fornisce %.2f\n",c);
}

void subtract(float *a, float *b){
 float c = *a - *b;
 printf("La sottrazione fornisce %.2f\n",c);
}

void multiply(float *a, float *b){
 float c = *a * *b;
 printf("La moltiplicazione fornisce %.2f\n",c);
}

void divide(float *a, float *b){
 float c = *a / *b;
 printf("La divisione fornisce %.2f\n",c);
}

main(){
    printf("Digita due numeri :\n");
    float a,b;
    scanf("%f %f",&a,&b);
    printf("Cosa vuoi fare con questi numeri?\nAggiungi : a\nSottrai : s\nMoltiplica : m\nDividi : d\n");
    char operation = '0';
    scanf(" %c",&operation);
    void (*p[])(float* , float*) = {add,subtract,multiply,divide};
    printf("\nEseguo...\n\n");
    switch (operation) {
    case 'a':
        p[0](&a,&b);
        break;
    case 's':
        p[1](&a,&b);
        break;
    case 'm':
        p[2](&a,&b);
        break;
    case 'd':
        p[3](&a,&b);
        break;
    default:
        printf("Input non valido!!!\n");

  }

}

Qui la dichiarazione può essere letta come - p è un array di puntatori a funzione con due puntatori float come parametri e valore di ritorno void.

6. Puntatore a Funzione come Argomento

Come qualsiasi altro puntatore, i puntatori a funzione possono anche essere passati a un'altra funzione, nota come funzione callback. La funzione dalla quale viene passata è nota come funzione chiamante.

Un modo migliore per capire sarebbe dare uno sguardo a qsort(), che è una funzione integrata in C. Viene usata per ordinare un array di interi, stringhe, strutture e così via. La dichiarazione per qsort() è:

void qsort(void *base, size_t nitems, size_t size, int (*compar)(const void *, const void *));

qsort() riceve quattro argomenti:

1. un puntatore void verso l'inizio dell'array da ordinare
2. il numero di elementi
3. la dimensione di ciascun elemento
4. un puntatore a funzione che riceve due puntatori void come argomenti e ritorna un int

Il puntatore a funzione punta a una funzione di confronto che ritorna un intero maggiore di zero se il primo argomento è maggiore del secondo, un intero minore di zero se il secondo argomento è maggiore del primo e zero se sono uguali.

Il programma seguente mostra il suo utilizzo:

#include <stdio.h>
#include <stdlib.h>

int compareIntegers(const void *a, const void *b)
{
  const int *x = a;
  const int *y = b;
  return *x - *y;
}

main(){

  int myArray[] = {97,59,2,83,19,97};
  int numberOfElements = sizeof(myArray) / sizeof(int);

  printf("Prima dell'ordinamento - \n");
  for(int i = 0; i < numberOfElements; i++)
   printf("%d ", *(myArray + i));

  qsort(myArray, numberOfElements, sizeof(int), compareIntegers);

  printf("\n\nDopo l'ordinamento - \n");
  for(int i = 0; i < numberOfElements; i++)
    printf("%d ", *(myArray + i));
 }

/* Output */

Prima dell'ordinamento -
97 59 2 83 19 97

Dopo l'ordinamento -
2 19 59 83 97 97

Visto che il nome di una funzione è esso stesso un puntatore, possiamo passare compareIntegers come quarto argomento.

D. Strutture

1. Puntatore a Struttura

Come i puntatori a intero, ad array e a funzione, abbiamo anche puntatori a struttura.

struct records {
    char name[20];
    int roll;
    int marks[5];
    char gender;
};

struct records student = {"Alex", 43, {76, 98, 68, 87, 93}, 'M'};

struct records *ptrStudent = &student;

Qui abbiamo dichiarato un puntatore ptrStudent di tipo struct records e abbiamo assegnato l'indirizzo di student a ptrStudent.

ptrStudent conserva l'indirizzo base di  student, che è l'indirizzo base del primo membro della struttura. Incrementando di 1 si incrementerebbe l'indirizzo di sizeof(student) byte.

printf("Indirizzo della struttura = %d\n", ptrStudent);
printf("Indirizzo del membro `name` = %d\n", &student.name);
printf("L'incremento di 1 risulta in %d\n", ptrStudent + 1);

/* Output */
Indirizzo della struttura = 6421984
Indirizzo del membro `name` = 6421984
L'incremento di 1 risulta in 6422032

Possiamo accedere ai membri di student usando ptrStudent in due modi: con il nostro vecchio amico* oppure usando -> ( infix oppure operatore freccia).

Con *, continueremo a usare .(operatore punto) laddove con -> non avremo bisogno dell'operatore punto.

printf("Nome senza usare ptrStudent : %s\n", student.name);
printf("Nome usando ptrStudent e * : %s\n", ( *ptrStudent).name);
printf("Nome usando ptrStudent e -> : %s\n", ptrStudent->name);

/* Output */
Nome senza usare ptrStudent: Alex
Nome usando ptrStudent e *: Alex
Nome usando ptrStudent e ->: Alex

Allo stesso modo possiamo accedere e modificare anche altri membri. Nota che le parentesi sono necessarie quando si usa * visto che l'operatore punto (.) ha maggiore precedenza rispetto a *.

2. Array di Strutture

Possiamo creare un array di tipo struct records e usare un puntatore per accedere agli elementi e ai loro membri.

struct records students[10];

 /* Puntatore al primo elemento (struttura) dell'array */
struct records *ptrStudents1 = &students;

 /* Puntatore a un array di 10 struct records */
struct records (*ptrStudents2)[10] = &students;

Nota che ptrStudent1 è un puntatore a student[0] laddove ptrStudent2 è un puntatore all'intero array di 10 struct records. Aggiungendo 1 a ptrStudent1 punterebbe a student[1].

Possiamo usare ptrStudent1 con un ciclo per iterare sugli elementi e i loro membri.

for( int i = 0; i <  10; i++)
  printf("%s, %d\n", ( ptrStudents1 + i)->name, ( ptrStudents1 + i)->roll);

3. Puntatore a Struttura come Argomento

Possiamo anche passare l'indirizzo di una variabile di tipo struttura a una funzione.

#include <stdio.h>

struct records {
    char name[20];
    int roll;
    int marks[5];
    char gender;
};

main(){
 struct records students = {"Alex", 43, {76, 98, 68, 87, 93}, 
'M'};
 printRecords(&students);
}

void printRecords( struct records *ptr){
  printf("Name: %s\n", ptr->name);
  printf("Roll: %d\n", ptr->roll);
  printf("Gender: %c\n", ptr->gender);
  for( int i = 0; i < 5; i++)
   printf("Marks in %dth subject: %d\n", i, ptr->marks[i]);
}

 /* Output */
Name: Alex
Roll: 43
Gender: M
Marks in 0th subject: 76
Marks in 1th subject: 98
Marks in 2th subject: 68
Marks in 3th subject: 87
Marks in 4th subject: 93

Nota che la struttura struct records viene dichiarata all'esterno di main(). Questo per assicurarsi che sia disponibile globalmente e possa essere usata da printRecords().

Se la struttura venisse definita all'interno di main(), il suo ambito sarebbe limitato a main(). Inoltre una struttura deve essere dichiarata prima della dichiarazione della funzione.

Come per le strutture, possiamo avere puntatori a union e possiamo accedere ai membri tramite l'operatore freccia(->).

E. Puntatore a Puntatore

Finora abbiamo esaminato puntatori per diversi tipi di dato, array, stringhe, funzioni, strutture e unioni.

La domanda che sorge spontanea è - ma un puntatore a puntatore?

Ho buone notizie per te! Esistono anche quelli.

int var = 6;
int *ptr_var = &var;

printf("Indirizzo di var = %d\n", ptr_var);
printf("Indirizzo di ptr_var = %d\n", &ptr_var);

/* Output */
Indirizzo di var = 6422036
Indirizzo di ptr_var = 6422024

Per conservare l'indirizzo della variabile var di tipo int, abbiamo un puntatore a  int ptr_var. Avremmo bisogno di un altro puntatore per conservare l'indirizzo di ptr_var.

Visto che ptr_var è di tipo int *, per conservare il suo indirizzo avremmo dovuto creare un puntatore a int *. Il codice che segue mostra come deve essere fatto.

int * *ptr_ptrvar = &ptr_var; /* oppure int* *ppvar oppure int **ppvar */

Possiamo usare ptr_ptrvar per accedere all'indirizzo di ptr_var e usare la doppia dereferenziazione per accedere al valore di var.

printf("Indirizzo di ptr_var = %d\n", ptr_ptrvar);
printf("Indirizzo di var = %d\n", *ptr_ptrvar);
printf("Valore di var = %d\n", *(*ptr_ptrvar));

/* Output */
Indirizzo di ptr_var = 6422024
Indirizzo di var = 6422036
Valore di var = 6

Non sono richieste le parentesi quando si dereferenzia ptr_ptrvar, ma è buona pratica usarle. Possiamo creare un altro puntatore a ptr_ptrptrvar, che conserverà l'indirizzo di ptr_ptrvar.

Visto che ptr_ptrvar è di tipo int**, la dichiarazione di ptr_ptrptrvar sarà:

int** *ptr_ptrptrvar = &ptr_ptrvar;

Possiamo ancora accedere a  ptr_ptrvar, ptr_var e var usando ptr_ptrptrvar.

printf("Indirizzo di ptr_ptrvar = %d\n", ptr_ptrptrvar);
printf("Valore per ptr_ptrvar = %d\n",*ptr_ptrptrvar);
printf("Indirizzo di ptr_var = %d\n", *ptr_ptrptrvar);
printf("Valore per ptr_var = %d\n", *(*ptr_ptrptrvar));
printf("Indirizzo di var = %d\n", *(*ptr_ptrptrvar));
printf("Valore per var = %d\n", *(*(*ptr_ptrptrvar)));

/* Output */
Indirizzo di ptr_ptrvar = 6422016
Valore per ptr_ptrvar = 6422024
Indirizzo di ptr_var = 6422024
Valore per ptr_var = 6422036
Indirizzo di var = 6422036
Valore per var = 6

Se modifichiamo il valore di un qualsiasi puntatore usando ptr_ptrptrvar oppure ptr_ptrvar, il puntatore non punterebbe più alla variabile.

F. Conclusione

Bene! Sì, abbiamo finito. Siamo partiti dai puntatori e abbiamo finito con i puntatori (per così dire). Non dicono che la curva di apprendimento è un cerchio?

Cerca di ricapitolare tutti i sotto argomenti che hai letto. Se li ricordi, ben fatto! Rileggi quelli che non riesci a ricordare.

Questo articolo è terminato, ma non dovresti smettere con i puntatori, fai esperimenti. Successivamente, potresti dare un'occhiata alla Allocazione dinamica della memoria (Dynamic Memory Allocation) per conoscere meglio i puntatori.

Questa guida ti insegnerà come scrivere unit test per funzioni Python. Ma perché dovresti prendere in considerazione la scrittura di unit test?

Quando si lavora su un grande progetto, spesso dovrai aggiornare certi moduli e svolgere operazioni di refactoring sul codice secondo necessità. Tuttavia queste modifiche potrebbero avere conseguenze indesiderate su altri moduli che usano al loro interno il modulo aggiornato. Questo talvolta può rompere delle funzionalità esistenti.

Come sviluppatore, dovresti testare il tuo codice per assicurarti che tutti i moduli in un'applicazione funzionino a dovere. Gli unit test ti consentono di verificare se piccole, isolate, unità di codice funzionano correttamente e fanno sì che tu possa correggere incongruenze che potrebbero sorgere dopo aggiornamenti e operazioni di refactoring.

Questa guida ti aiuterà a iniziare con lo unit testing in Python. Imparerai come usare il modulo Python integrato unittest per impostare ed eseguire gli unit test e scrivere casi di test per funzioni Python. Imparerai anche come testare funzioni che danno eccezioni.

Iniziamo!

Test in Python – Primi Passi

Inizieremo definendo una funzione Python e scriveremo degli unit test per verificare se funziona come previsto. Per focalizzarci su come impostare gli unit test, utilizzeremo una semplice funzione, is_prime() , che riceve un numero e verifica se è un numero primo oppure no.

import math

def is_prime(num):
    '''Verifica se num è un numero primo o no.'''
    for i in range(2, int(math.sqrt(num))+1):
        if num % i == 0:
            return False
    return True

Facciamo partire il REPL di Python, chiamiamo la funzione is_prime() con alcuni argomenti e verifichiamo i risultati.

>>> from prime_number import is_prime
>>> is_prime(3)
True
>>> is_prime(5)
True
>>> is_prime(12)
False
>>> is_prime(8)
False
>>> assert is_prime(7) == True

Puoi anche usare l'istruzione assert per verificare che is_prime() restituisca il valore booleano previsto, come mostrato sopra. Se il valore di ritorno della funzione è diverso da quello previsto, viene sollevata un'eccezione AssertionError.

Questo tipo di test manuali non è efficiente qualora tu voglia verificare in modo esaustivo la tua funzione con un elenco di argomenti molto più grande. Potresti voler impostare test automatici che eseguono e validano il risultato della funzione contro casi di test definiti nella suite di test.

Come Usare il Modulo Python unittest

Python è dotato del modulo unittest che ti consente di configurare test automatizzati per le funzioni e le classi nella tua applicazione. La procedura generica per impostare unit test in Python è la seguente:

# <nome-modulo>.py

import unittest
from <modulo> import <funzione_da_testare>
# tutte le voci tra <> sono segnaposti

class TestClass(unittest.TestCase):
	def test_<nome_1>(self):
		# verifica funzione_da_testare

	def test_<nome_2>(self):
		# verifica funzione_da_testare
	:
	:
	:

	def test_<nome_n>(self):
		# verifica funzione_da_testare

Il codice qui sopra in <nome-modulo>.py fa quanto segue:

• Importa il modulo integrato di Python unittest.
• Importa la funzione Python da testare dal modulo nel quale è definita, <modulo>.
• Crea una classe di test (TestClass) che eredita dalla classe unittest.TestCase.
• Ciascun test che dovrebbe essere eseguito andrà definito come metodo all'interno della classe di test.
• 💡 Nota: Affinché il modulo unittest possa identificare questi metodi come test ed eseguirli, i nomi di questi metodi dovrebbero iniziare con  test_.
• La classe TestCase del modulo unittest fornisce utili metodi di asserzione per verificare se la funzione oggetto di test ritorni i valori previsti.

I più comuni metodi di asserzione sono elencati qui sotto, ne useremo alcuni in questo tutorial.

📑 Per un elenco completo dei metodi di asserzione, fai riferimento alla documentazione di unittest.

Per eseguire questi test, dovresti eseguire unittest come modulo principale, usando il seguente comando:

$ python -m unittest <nome-modulo>.py

Possiamo aggiungere il costrutto condizionale if __name__=='__main__' per eseguire  unittest come modulo 'main'.

if __name__=='__main__':
	unittest.main()

Aggiungere il codice condizionale qui sopra, ti consente di eseguire i test direttamente eseguendo il modulo che contiene i test.

$ python <nome-modulo>.py

Come Definire Casi di Test per Funzioni Python

In questa sezione, scriveremo unit test per la funzione is_prime() usando la sintassi che abbiamo appreso.

Per verificare che la funzione is_prime() restituisca un booleano possiamo usare i metodi assertTrue() e assertFalse(). Definiamo quattro metodi di test all'interno della classe TestPrime che eredita da unittest.TestCase.

import unittest

# importa la funzione is_prime
from prime_number import is_prime


class TestPrime(unittest.TestCase):

	def test_two(self):
        self.assertTrue(is_prime(2))
    
    def test_five(self):
    	self.assertTrue(is_prime(5))
    
    def test_nine(self):
    	self.assertFalse(is_prime(9))
    
    def test_eleven(self):
    	self.assertTrue(is_prime(11))
        
        
if __name__=='__main__':
	unittest.main()

$ python test_prime.py

Nel risultato seguente, '.' indica un test che ha avuto successo.

Output
....
----------------------------------------------------------------------
Ran 4 tests in 0.001s
OK

Nel codice qui sopra ci sono quattro metodi di test, ognuno dei quali verifica un determinato input. Puoi invece definire un singolo metodo di test che asserisce se il risultato sia corretto, per tutti e quattro gli input.

import unittest

from prime_number import is_prime


class TestPrime(unittest.TestCase):

	def test_prime_not_prime(self):
        self.assertTrue(is_prime(2))
        self.assertTrue(is_prime(5))
        self.assertFalse(is_prime(9))
        self.assertTrue(is_prime(11))

Dopo l'esecuzione del modulo test_prime, vediamo che è stato eseguito con successo un test. Se uno qualunque dei metodi di asserzione avesse sollevato un'eccezione, allora il test sarebbe fallito.

$ python test_prime.py

Output
.
----------------------------------------------------------------------
Ran 1 test in 0.001s
OK

Come Scrivere Unit Test per Verificare Eccezioni

Nella sezione precedente, abbiamo testato la funzione is_prime() con numeri primi e non primi come input. Nello specifico erano tutti numeri positivi interi.

Non abbiamo ancora imposto che gli argomenti per la chiamata della funzione is_prime() siano interi positivi. Puoi usare il type hinting per imporre tipi o sollevare eccezioni per input non validi.

Nel test della funzione is_prime(), non abbiamo tenuto conto di quanto segue:

• Se l'argomento è un valore a virgola mobile, is_prime() sarebbe comunque eseguita e restituirebbe True o False, il che non è corretto.
• Per argomenti di altro tipo, ad esempio la stringa 'cinque' invece che il numero 5, la funzione dà un errore TypeError.
• Se l'argomento è un intero negativo, allora la funzione math.sqrt() dà un ValueError. Le radici di tutti i numeri reali (positivi, negativi o zero) sono sempre non negative. Quindi la radice quadrata è definita solo per numeri non negativi.

Verifichiamo quanto sopra affermato eseguendo qualche esempio nel REPL di Python.

>>> from prime_number import is_prime

>>> is_prime('five')
Traceback (most recent call last):
File "<stdin>", line 1, in <module>
File "/home/bala/unit-test-1/prime_number.py", line 5, in is_prime
for i in range(2,int(math.sqrt(num))+1):
TypeError: must be real number, not str

>>> is_prime(-10)
Traceback (most recent call last):
File "<stdin>", line 1, in <module>
File "/home/bala/unit-test-1/prime_number.py", line 5, in is_prime
for i in range(2,int(math.sqrt(num))+1):
ValueError: math domain error

>>> is_prime(2.5)
True

Come Sollevare Eccezioni per Input Non Validi

Per risolvere quanto sopra, validiamo il valore usato nella chiamata della funzione per num e solleviamo un'eccezione quando necessario.

• Verifichiamo se num sia un intero. In caso positivo, si procede alla prossima verifica, altrimenti viene sollevata un'eccezione TypeError.
• Verifichiamo se num sia un numero negativo. Se lo è viene sollevata un'eccezione ValueError.

Dopo la modifica della definizione della funzione per validare l'input e sollevare eccezioni il codice sarà:

import math

def is_prime(num):
    '''Verifica se num sia un numero primo oppure no.'''
    # solleva TypeError per un tipo in input non valido
    if type(num) != int:
        raise TypeError('il tipo di num non è non valido')
    # solleva ValueError per un valore negativo
    if num < 0:
        raise ValueError('Verifica il valore di num; num è un valore non negativo?')
    # se l'input è valido si procede per verificare se num sia un numero primo
    for i in range(2, int(math.sqrt(num))+1):
        if num % i == 0:
        	return False
    return True

Ora che abbiamo modificato la funzione affinché sollevi eccezioni ValueError e TypeError per input non validi, il prossimo passo è di verificare se queste eccezioni vengono sollevate.

Come Usare il Metodo assertRaises() per Testare Eccezioni

Nella definizione della classe TestPrime, aggiungiamo metodi per verificare se le eccezioni vengono sollevate.

Definiamo i metodi test_typeerror_1() e test_typeerror_2() per verificare se l'eccezione TypeError viene sollevata, e il metodo test_valueerror() per verificare se viene sollevata l'eccezione ValueError.

📌 Per chiamare il metodo assertRaises() , possiamo usare la seguente sintassi generale:

def test_exception(self):
    self.assertRaises(nome-eccezione,nome-funzione,args)

Possiamo anche usare il gestore di contesto con la seguente sintassi (che adotteremo nell'esempio successivo):

def test_exception(self):
    with self.assertRaises(nome-eccezione):
        nome-funzione(args)

Aggiungendo i metodi di test per la verifica delle eccezioni, il codice sarà:

import unittest

from prime_number import is_prime


class TestPrime(unittest.TestCase):

	def test_prime_not_prime(self):
        self.assertTrue(is_prime(2))
        self.assertTrue(is_prime(5))
        self.assertFalse(is_prime(9))
        self.assertTrue(is_prime(11))
    
    def test_typeerror_1(self):
        with self.assertRaises(TypeError):
        	is_prime(6.5)
    
    def test_typeerror_2(self):
        with self.assertRaises(TypeError):
        	is_prime('five')
    
    def test_valueerror(self):
        with self.assertRaises(ValueError):
        	is_prime(-4)
            
if __name__=='__main__':
	unittest.main()

Eseguiamo il modulo test_prime e osserviamo il risultato:

$ python test_prime.py

Output
....
----------------------------------------------------------------------
Ran 4 tests in 0.002s
OK

Nel codice degli esempi che abbiamo scritto fino a ora tutti i test hanno avuto successo. Modifichiamo uno dei metodi, diciamo test_typeerror_2(), in questo modo:

def test_typeerror_2(self):
    with self.assertRaises(TypeError):
    	is_prime(5)

Chiamiamo la funzione is_prime() con il numero 5 come argomento. In questo caso, 5 è un input valido per il quale la funzione ritorna True. Pertanto la funzione non dà TypeError. Quando eseguiamo il test nuovamente, vedremo che ci sarà un test che fallisce.

$ python test_prime.py

Output

..F.
======================================================================
FAIL: test_typeerror_2 (__main__.TestPrime)
----------------------------------------------------------------------
Traceback (most recent call last):
File "test_prime.py", line 17, in test_typeerror_2
is_prime(5)
AssertionError: TypeError not raised
----------------------------------------------------------------------
Ran 4 tests in 0.003s
FAILED (failures=1)

Conclusione

Grazie per avere letto fino a qui! 😄 Spero che questo tutorial ti abbia aiutato a comprendere le basi per eseguire unit test in Python.

Hai imparato a impostare i test e verificare se una funzione si comporta come previsto oppure solleva un'eccezione — tutto questo usando il modulo integrato di Python unittest.

Continua a programmare, e ci vediamo al prossimo tutorial!👩🏽‍💻

Nella programmazione, dovrai spesso avere a che fare con l'ambito di una variabile. L'ambito di una variabile determina se è possibile o meno accedervi e modificarla all'interno di un blocco specifico di codice.

In questo tutorial, imparerai l'ambito di una variabile nel linguaggio di programmazione C. Vedrai alcuni esempi di codice per aiutarti a comprendere le differenze tra variabili locali e globali.

Cos'è l'ambito di una variabile?

Prima di proseguire per conoscere l'ambito locale e globale di una variabile, capiamo cosa significa ambito.

In termini semplici, l'ambito di una variabile è il suo tempo di vita nel programma.

Questo vuol dire che l'ambito di una variabile è il blocco di codice all'interno dell'intero programma dove la variabile è stata dichiarata, usata e può essere modificata.

Nella sezione successiva, imparerai cos'è l'ambito locale delle variabili.

Ambito Locale delle Variabili in C – Blocchi Annidati

In questa sezione, imparerai come funzionano le variabili locali in C. Prima scriveremo del codice per un paio di esempi, quindi generalizzeremo il principio di ambito.

▶ Ecco il primo esempio:

#include <stdio.h>

int main() 
{
    int my_num = 7;
    {
        //aggiunge 10 a my_num
        my_num = my_num +10;
        //oppure più brevemente my_num +=10
        printf("my_num è %d",my_num);
    }
    
    return 0;
}

Cerchiamo di capire cosa fa il programma qui sopra:

In C, un blocco di codice è delimitato da parentesi graffe: {}. Le parentesi graffe di apertura e chiusura indicano rispettivamente l'inizio e la fine di un blocco.

• La funzione main() ha una variabile di tipo intero my_num che viene inizializzata con il valore 7 nel blocco più esterno.
• C'è un blocco più interno che cerca di aggiungere 10 alla variabile my_num.

Ora, compilando ed eseguendo il programma qui sopra, si ottiene il risultato:

//Output

my_num è 17

Puoi notare quanto segue:

• Il blocco più interno è in grado di accedere al valore di my_num che è stato dichiarato nel blocco più esterno e modificarlo aggiungendo 7 al valore contenuto.
• Il valore di my_num ora è 17, come indicato nel risultato.

Ambito Locale delle Variabili in C – Blocchi Annidati Esempio 2

▶ Ecco un altro esempio sull'argomento:

#include <stdio.h>

int main() 
{
    int my_num = 7;
    {
        int new_num = 10;
    } 
    printf("new_num è %d",new_num); //questa è la riga 9
    return 0;
}

• In questo programma, la funzione main() ha una variabile di tipo intero my_num nel blocco più esterno.
• Un'altra variabile, new_num viene inizializzata nel blocco più interno, che è annidato nel blocco più esterno.
• Stiamo cercando di accedere e stampare il valore della variabile del blocco più interno new_num dal blocco più esterno.

Se cerchi di compilare il codice qui sopra, noterai che la compilazione non va a buon fine, e otterrai il seguente errore, il cui messaggio tradotto è "errore: 'new_num' non dichiarata, (usata per la prima volta in questa funzione)":

Line   Message
9      error: 'new_num' undeclared (first use in this function)

Questo perché la variabile new_num è stata dichiarata nel blocco più interno e il suo ambito è limitato al suddetto blocco. In altre parole, è locale rispetto al blocco più interno e non può essere utilizzata nel blocco più esterno.

In base alle osservazioni qui sopra, scriviamo il seguente principio generico per l'ambito locale delle variabili:

{
    /BLOCCO PIU' ESTERNO/
    
      {
        
        
        //Il contenuto del blocco più esterno che si trova immediatamente prima dell'inizio di questo blocco
        //è ACCESSIBILE qui
        
        /BLOCCO PIU' INTERNO/
        
        
      }
     
       //Il contenuto del blocco più interno NON è accessibile qui
 }

Ambito Locale delle Variabili in C – Blocchi Diversi

Nell'esempio precedente, hai imparato che l'accesso da un blocco più esterno alle variabili annidate in un blocco più interno non è consentito.

In questa sezione, imparerai circa l'ambito locale di variabili dichiarate in blocchi diversi.

#include <stdio.h>

int main()
{
    int my_num = 7;
    printf("%d",my_num);
    my_func();
    return 0;
}

void my_func()
{
    printf("%d",my_num);
}

Nell'esempio qui sopra:

• La variabile di tipo intero my_num è dichiarata all'interno della funzione main().
• All'interno della funzione main(), il valore di my_num viene stampato.
• C'è un'altra funzione, my_func(), che cerca di accedere e stampare il valore di my_num.
• Quando inizia l'esecuzione del programma con la funzione main(), c'è una chiamata a my_func() all'interno della funzione main().

▶ Ora compila ed esegui il programma qui sopra. Otterrai il messaggio di errore qui sotto (traduzione: "errore 'my_num' non dichiarata (primo uso in questa funzione)):

Line   Message
13     error: 'my_num' undeclared (first use in this function)

Se noti, nella riga 13, la funzione my_func() tenta di accedere alla variabile my_num che è stata dichiarata e inizializzata all'interno della funzione main().

Pertanto l'ambito della variabile my_num è confinato alla funzione main(), e si dice che è locale alla funzione main().

Possiamo rappresentare genericamente questa nozione di ambito locale come segue:

{

    /BLOCCO 1/
    // da qui non si può accedere al contenuto del BLOCCO 2
    
}


{

    /BLOCCO 2/
    // da qui non si può accedere al contenuto del BLOCCO 1
    
} 

Ambito Globale delle Variabili in C

Finora, hai imparato a conoscere l'ambito locale delle variabili C. In questa sezione imparerai come dichiarare variabili globali in C.

▶ Iniziamo con un esempio.

#include <stdio.h>
int my_num = 7;

int main()
{
    printf("si può accedere a my_num da main() e il suo valore è %d\n",my_num);
    //chiama my_func
    my_func();
    return 0;
}

void my_func()
{
  printf("si può accedere a my_num anche da my_func() e il suo valore è %d\n",my_num);
} 

Nell'esempio qui sopra:

• La variabile my_num è dichiarata al di fuori delle funzioni main() e my_func().
• Cerchiamo di accedere a my_num all'interno della funzione main() e ne stampiamo il valore.
• Chiamiamo la funzione my_func() all'interno della funzione main().
• La funzione my_func() cerca anche di accedere al valore di my_num per stamparlo.

Questo programma si compila senza errori e il risultato è mostrato qui sotto:

//Output
si può accedere a my_num da main() e il suo valore è 7
si può accedere a my_num anche da my_func() e il suo valore è 7

In questo esempio, ci sono due funzioni  –  main() e my_func().

Tuttavia la variabile my_num non è locale ad alcuna funzione nel programma. Una variabile di questo tipo, non locale ad alcuna funzione, ma si dice che ha un ambito globale e viene chiamata variabile globale.

Questo principio di ambito globale delle variabili può essere riepilogato come segue:

//tutte le variabili globali sono dichiarate qui
function1()
    {
    
    // è possibile accedere a tutte le variabili globali dall'interno di function1
    
    }
function2()
    {
    
    // è possibile accedere a tutte le variabili globali dall'interno di function2
     
    } 

Riepilogo

In questo tutorial, hai imparato la differenza tra ambito locale e globale. Questo è un tutorial di livello introduttivo sull'ambito delle variabili in C.

In C, esistono modificatori di accesso per controllare il livello di accessibilità di cui una variabile dispone. Puoi modificare la modalità di accesso usando le parole chiave corrispondenti quando dichiari le variabili.

Ci vediamo al prossimo tutorial. Fino ad allora, buona programmazione!

I form (moduli) sono una delle parti più importanti del web. Senza di essi, non ci sarebbe un modo facile per raccogliere dati, cercare risorse o effettuare un'iscrizione per ricevere informazioni preziose.

Puoi inserire i form nelle pagine web con l'elemento HTML form. All'interno di questo elemento possono essere inseriti parecchi elementi input, noti anche come controlli del form.

In questo tutorial, esploreremo l'elemento HTML form, i vari tipi di elementi input che può contenere e come creare un pulsante di invio con il quale inviare i dati.

Alla fine, conoscerai il funzionamento dei form e sarai in grado di realizzarli con sicurezza.

Sintassi Base per un Form HTML

<form action="mywebsite.com" method="POST">
    <!--Input di qualsiasi tipo ed elementi textarea vanno qui-->
</form>

Tipi di Input per i Form HTML

Si utilizza il tag <input> per creare diversi controlli in un form HTML. È un elemento in linea e riceve attributi come type, name, minlength, maxlength, placeholder e così via. Ciascuno di essi hanno specifici valori che possono ricevere.

L'attributo placeholder è importante in quanto aiuta l'utente a capire a cosa serve il campo di input prima che possa digitare qualcosa.

Ci sono 20 tipi di input diversi, e li esamineremo uno ad uno.

Tipo Text

Questo tipo di input ottiene il valore di  “text” e crea una riga singola di testo da inserire.

<input type="text" placeholder="Enter name" />

Un input di tipo text viene presentato come nella videata seguente:

Tipo Password

Come suggerisce il nome, questo tipo di input si utilizza per richiedere password. Rende automaticamente invisibile all'utente quanto sta digitando, a meno che l'elemento non venga manipolato tramite JavaScript.

<input type="password" placeholder="Enter your password" />

Tipo Email

Un input di tipo email definisce un campo per digitare un indirizzo email. L'input viene automaticamente validato per verificare la conformità con la sintassi di un indirizzo email.

<input type="email" placeholder="Enter your email" />

Tipo Number

Questo tipo consente all'utente di inserire solamente numeri.

<input type="number" placeholder="Enter a number" />

Tipo Radio

Talvolta gli utenti devono effettuare una scelta tra diverse opzioni. Questo tipo di input consente all'utente di scegliere un elemento tra quelli proposti.

 <input type="radio" />

Tipo Checkbox

Con l'input di tipo radio gli utenti possono effettuare una scelta tra le opzioni proposte, ma se volessi rendere possibili tante scelte contemporaneamente? Ecco a cosa serve un input di tipo checkbox.

<input type="checkbox" />

Tipo Submit

Questo tipo si usa per aggiungere un pulsante di invio a un form. Quando l'utente fa click sul pulsante, il form viene inviato. Riceve un attributo value che definisce il testo che appare all'interno del pulsante.

<input type="submit" value="Enter to Win" />

Tipo Button

Questo tipo di input crea un pulsante, che può essere manipolato con JavaScript con un event listener per l'evento onClick. Crea un pulsante come il tipo submit, ma il valore del testo del pulsante deve essere specificato.

<input type="button" value="Submit" />

Tipo File

Definisce un campo per l'invio di uno o più file. Quando un utente fa click su questo controllo, gli viene richiesto di scegliere il file da inserire, che potrebbe essere un'immagine, un PDF e così via.

<input type="file" />

Ecco come viene presentato un input di tipo file:

Tipo Color

Questo tipo di input è stato introdotto con HTML5. Con questo l'utente può scegliere un colore. Il nero (codice esadecimale #000000) è il valore predefinito, ma può essere modificato inserendo nel parametro value il colore desiderato in formato esadecimale.

Molti sviluppatori hanno usato questo elemento per poter scegliere le varie tonalità di colore nei formati RGB, HSL e alfanumerico

<input type="color" />

Ecco come viene presentato questo tipo di input, una volta che l'utente ha fatto click sull'elemento:

Tipo Search

Questo tipo di input definisce un campo di testo, proprio come il tipo text. Ma ha il solo scopo di consentire all'utente di effettuare una ricerca. Un pulsante di cancellazione (una x) all'interno dell'elemento appare una volta che si è iniziato a digitare.

<input type="search" />

Tipo URL

Quando viene impostato un elemento input con questo attributo, viene mostrato un campo che può essere usato per digitare un URL.

<input type="url" />

Tipo Tel

Questo tipo consente di ottenere numeri di telefono dagli utenti.

<input type="tel" />

Tipo Date

Potresti esserti registrato in un sito web che richiede l'inserimento di una data per un certo evento. Questo sito probabilmente usa un input di questo tipo.

<input type="date" />

Ecco come viene presentato questo tipo di input:

Tipo Datetime-local

Funziona come il tipo date, ma consente all'utente anche di scegliere un orario oltre a una data.

<input type="datetime-local" />

Tipo Week

Questo tipo consente all'utente di selezionare una particolare settimana in un anno.

<input type="week" />

Tipo Month

Con questo tipo di input vengono presentati i mesi, affinché l'utente possa effettuare una scelta facendo click su uno di essi.

<input type="month" />

Textarea

Ci sono situazioni nelle quali un utente deve riempire più righe di testo, pertanto il tipo di input text non sarebbe adatto, in quanto consente di riempire solo una riga di testo.

textarea consente all'utente di inserire testo su più righe. Tramite gli attributi cols e rows consente di impostare rispettivamente il numero di colonne e di righe per l'elemento.

<textarea cols="50" rows="20"></textarea>

Select

È come avere le funzionalità di un elemento di tipo radio e di tipo checkbox assieme. Viene inserito nel form tramite due elementi, l'elemento select propriamente detto e, al suo interno, tanti elementi option quante sono le opzioni da offrire.

Nella modalità predefinita, l'utente può scegliere solo una opzione ma con l'attributo multiple è possibile selezionare più opzioni.

<select>
      <option value="HTML">Select a Language</option>
      <option value="HTML">HTML</option>
      <option value="CSS">CSS</option>
      <option value="JavaScript">JavaScript</option>
      <option value="React">React</option>
</select>

Come Abbinare un Etichetta agli Elementi Input

Assegnare etichette ai controlli di un form con l'elemento label è importante. Quando sono correttamente abbinate al relativo campo di input tramite il loro attributo for, che deve essere valorizzato con il contenuto dell'attributo id dell'elemento input relativo, facilitano anche l'utente in quando può cliccare sull'etichetta stessa per accedere al controllo input relativo.

<label for="name">Name</label>
<input type="text" id="name" /> <br />
<label for="check">Agree with terms</label>
<input type="checkbox" id="check" />

Come Funzionano i Form HTML

Quando un utente riempie i campi di un form, poi fa click sul pulsante di invio, manda i dati contenuti nei controlli del form al server tramite una richiesta con un metodo HTTP GET o POST .

Quindi come viene specificato il server? L'elemento form riceve un attributo action, che deve avere come valore l'URL del server al quale inviare i dati. Riceve anche un attributo method, che indica il metodo HTTP usato per veicolare i valori al server specificato.

Questo metodo potrebbe essere  GET o POST. Con il metodo GET i valori digitati dall'utente sono visibili nella stringa dell'URL quando viene inviato. Con il metodo POST i valori vengono inviati nel corpo della richiesta, di conseguenza non sono visibili nell'URL.

Se non viene usato l'attributo method, viene utilizzato il metodo GET come valore predefinito.

Quindi quando dovresti usare il metodo GET o POST? Usa GET per inviare dati non sensibili o per ottenere dati da un server (ad esempio durante una ricerca). Usa POST quando invii file o dati sensibili.

Mini Progetto: Creare un Form di Contatto di Base

Utilizziamo quanto appreso sugli elementi di un form per creare un semplice form di contatto. Introdurrò anche alcuni concetti ulteriori mentre lo sviluppiamo.

Ecco il Codice HTML:

<form action="example-server.com">
      <fieldset>
        <legend>Contact me</legend>
        <div class="form-control">
          <label for="name">Name</label>
          <input type="name" id="name" placeholder="Enter your name" required />
        </div>

        <div class="form-control">
          <label for="email">Email</label>
          <input
            type="email"
            id="email"
            placeholder="Enter your email"
            required
          />
        </div>

        <div class="form-control">
          <label for="message">Message</label>
          <textarea
            id="message"
            cols="30"
            rows="10"
            placeholder="Enter your message"
            required
          ></textarea>
        </div>
        <input type="submit" value="Send" class="submit-btn" />
      </fieldset>
</form>

Cosa succede in questo codice HTML?

Innanzitutto un elemento form racchiude tutti gli altri elementi. L'attributo action è impostato su “example-server.com”, un server fittizio dove saranno ricevuti i dati.

Dopo l'elemento form, ogni altro elemento è racchiuso tra un elemento fieldset al cui interno si trova un tag legend.

Usiamo l'elemento fieldset per raggruppare input correlati, il tag legend contiene un'intestazione che descrive quali dati verranno raccolti dalla sezione.

Gli elementi di input name, email e textarea sono tutti all'interno di un elemento div con la classe form-control, in modo che si comportino come un elemento di tipo blocco, per facilitare l'applicazione di uno stile CSS.

Sono anche validati con l'attributo required, pertanto il form non viene inviato se i campi caratterizzati con quell'attributo sono vuoti.

Dopo tutto questo, il form apparirà come nella videata seguente:

Molto brutto, non è vero? Dobbiamo applicare qualche stile al form!

Ecco il codice CSS:

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: cursive;
  }

 input,
    textarea {
    width: 100%;
    padding: 5px;
    outline: none;
  }

  label {
    line-height: 1.9rem;
  }

  input[type="submit"] {
   transform: translate(2.2%);
   padding: 3px;
   margin-top: 0.6rem;
   font-family: cursive;
   font-weight: bold;
  }

 fieldset {
   padding: 20px 40px;
 }

Cosa fa questo codice CSS?

Centriamo tutto orizzontalmente all'interno del tag body con Flexbox, e verticalmente dando un'altezza di viewport pari al 100%. Usiamo una famiglia di caratteri corsivi.

Diamo agli elementi di input e al textarea una larghezza del 100% in modo che si espandano orizzontalmente. Le etichette hanno un'altezza di riga minima di 1.9rem (30.4px), in modo che non siano troppo vicine ai loro rispettivi elementi input.

Abbiamo disegnato in modo specifico il pulsante (pulsante di tipo input) con la proprietà transform per spingerlo al centro, perché era un po' fuori centro. Gli abbiamo dato una spaziatura all'interno di 3px per avere più spazio attorno ad esso. Abbiamo quindi selezionato una famiglia di caratteri corsivi in grassetto.

Visto che il pulsante era troppo vicino all'elemento textarea, abbiamo impostato un margine superiore di 0.6rem per portarlo un poco più in basso.

All'elemento fieldset abbiamo applicato una spaziatura interna di 20px in alto e in basso e 40px a destra e sinistra per distanziarlo dal bordo che crea attorno all'elemento form nel quale è contenuto.

Alla fine di tutto questo, abbiamo questo bel form:

Conclusione

Spero che questo tutorial ti abbia aiutato a capire come funzionano i form. Ora dovresti avere le conoscenze necessarie per integrare i form nei tuoi siti web, in modo da poter iniziare a raccogliere dati.

Grazie per la lettura e buona programmazione.

In questo corso completo, imparerai molti degli strumenti utilizzati ogni giorno sia dagli Amministratori di Sistema di Linux che dai milioni di persone che eseguono distribuzioni Linux come Ubuntu sui loro PC. Questo corso ti insegnerà come spostarti nelle interfacce utente grafiche di Linux e nel potente ecosistema dello strumento di riga di comando.

Questa è la seconda parte. Prima leggi la prima parte:

https://www.freecodecamp.org/italian/news/introduzione-a-linux/

Capitolo 18: Principi di Sicurezza Locale

Obiettivi Formativi

Entro la fine di questo capitolo, dovresti essere in grado di:

• Avere una buona comprensione delle migliori pratiche e strumenti per rendere i sistemi Linux il più sicuri possibile.
• Comprendere i poteri e i pericoli dell'utilizzo dell'account root (superuser).
• Utilizzare il comando sudo per eseguire operazioni privilegiate limitando al massimo i poteri avanzati.
• Spiegare l'importanza dell'isolamento del processo e dell'accesso all'hardware.
• Lavorare con le password, incluso come impostarle e modificarle.
• Descrivere come proteggere il processo di avvio e le risorse hardware.

Account Utente

Il kernel Linux consente agli utenti correttamente autenticati di accedere a file e applicazioni. Mentre ogni utente è identificato da un numero intero univoco (ID utente o UID), un database separato associa un nome utente con ogni UID. Al momento della creazione dell'account, le nuove informazioni dell'utente vengono aggiunte al database utenti e la directory home dell'utente deve essere creata e popolata con alcuni file essenziali. Programmi di riga di comando come useradd e userdel e gli strumenti GUI vengono utilizzati per la creazione e la rimozione degli account.

Per ogni utente, i seguenti sette campi vengono conservati nel file /etc/passwd:

Tipi di Account

Per impostazione predefinita, Linux distingue tra diversi tipi di account al fine di isolare i processi e i carichi di lavoro. Linux ha quattro tipi di account:

• root
• Sistema
• Normale
• Rete

Per un ambiente di lavoro sicuro, si consiglia di concedere i privilegi minimi possibili e necessari per gli account e rimuovere gli account inattivi. L'utilità last, che mostra l'ultima volta che ogni utente ha effettuato l'accesso al sistema, può essere utilizzata per aiutare a identificare account potenzialmente inattivi che sono candidati per la rimozione dal sistema.

Tieni presente che le pratiche che usi sui sistemi aziendali multiutente sono più severe delle pratiche che puoi utilizzare sui sistemi desktop personali che influiscono solo sull'utente casuale. Ciò è particolarmente vero per quanto riguarda la sicurezza. Speriamo di mostrarti pratiche applicabili ai server aziendali che puoi utilizzare su tutti i sistemi, ma comprendiamo che puoi scegliere di rendere meno rigide queste regole sul tuo sistema personale..

Comprendere l'Account root

root è l'account più privilegiato su un sistema Linux/Unix. Questo account ha la possibilità di gestire tutti gli aspetti dell'amministrazione del sistema, incluso l'aggiunta di account, la modifica delle password degli utenti, l'esame di file di log, l'installazione di software e così via. È necessario procedere con la massima cura quando si utilizza questo account. Non ha restrizioni di sicurezza imposte.

Quando si accede come root o si agisce come root, il prompt della shell mostra '#' (se stai usando bash e non hai personalizzato il prompt, come abbiamo discusso in precedenza). Questa convenzione ha lo scopo di fungere da monito per te del potere assoluto di questo account.

Operazioni che Richiedono Privilegi di root

I privilegi di root sono richiesti per eseguire operazioni come:

• Creazione, rimozione e gestione degli account utente
• Gestione dei pacchetti software
• Rimozione o modifica dei file di sistema
• Riavvio dei servizi di sistema.

Gli utenti di account normali delle distribuzioni Linux potrebbero essere autorizzati a installare pacchetti software, aggiornare alcune impostazioni, utilizzare alcuni dispositivi periferici e applicare vari tipi di modifiche al sistema. Tuttavia, è richiesto il privilegio di root per eseguire attività di amministrazione come il riavvio della maggior parte dei servizi, l'installazione manuale di pacchetti e la gestione di parti del filesystem che si trovano al di fuori delle directory dell'utente normale.

Operazioni Che Non Richiedono Privilegi di root

Un utente con account normale può eseguire alcune operazioni che richiedono autorizzazioni speciali; tuttavia, la configurazione del sistema deve consentire l'esercizio di tali funzionalità.

SUID (Set owner User ID upon execution - simile alla funzionalità Windows "esegui come") è un tipo speciale di permesso fornito a un file. L'uso di SUID fornisce autorizzazioni temporanee a un utente per eseguire un programma con le autorizzazioni del proprietario del file (che potrebbe essere root) invece delle autorizzazioni detenute dall'utente.

La tabella fornisce esempi di operazioni che non richiedono privilegi di root:

sudo e su a Confronto

In Linux puoi usare sia su che sudo per concedere temporaneamente l'accesso come root a un utente normale. Tuttavia, questi metodi sono in realtà abbastanza diversi. Di seguito sono elencate le differenze tra i due comandi:

Funzionalità di sudo

sudo ha la capacità di tenere traccia dei tentativi falliti di ottenere l'accesso a root. L'autorizzazione per gli utenti all'utilizzo di sudo si basa sulle informazioni di configurazione conservate nel file /etc/sudoers e nella directory  /etc/sudoers.d.

Un messaggio come il seguente apparirebbe in un file di log del sistema (in genere /var/log/secure) Quando si cerca di eseguire sudo per badperson senza ottenere una corretta autenticazione per l'utente:

badperson : user NOT in sudoers ; TTY=pts/4 ; PWD=/var/log ; USER=root ; COMMAND=/usr/bin/tail secure

Il File sudoers

Ogniqualvolta sudo viene invocato, si attiva una ricerca nel file /etc/sudoers e nei file contenuti in /etc/sudoers.d per determinare se l'utente ha il diritto di utilizzare sudo e qual è la portata dei suoi privilegi. Richieste da utenti sconosciuti e richieste per eseguire operazioni non consentite all'utente anche con sudo vengono segnalate. La struttura di base delle voci in questi file è:

chi dove = (per conto di) cosa

/etc/sudoers contiene molta documentazione sulla personalizzazione. La maggior parte delle distribuzioni Linux ora preferisce aggiungere un file nella directory /etc/sudoers.d con un nome che corrisponde allo username. Questo file contiene la configurazione sudo del singolo utente, mentre si dovrebbe lasciare inalterato il file di configurazione principale, eccetto per quanto riguarda le modifiche che riguardano tutti gli utenti.

Dovresti modificare uno di questi file di configurazione utilizzando visudo, che garantisce che solo una persona alla volta stia modificando il file, che abbia le autorizzazioni adeguate, e rifiuta di scrivere il file ed uscire se ci sono errori di sintassi nelle modifiche apportate. Le modifiche possono essere eseguite con un comando come quelli seguenti:

# visudo /etc/sudoers
# visudo -f /etc/sudoers.d/student

L'editor specifico effettivo che verrà aperto dipenderà dall'impostazione della variabile di ambiente EDITOR.

Registrare i Comandi

Per impostazione predefinita, i comandi sudo effettuati ed eventuali errori sono registrati nel file /var/log/auth.log per quanto riguarda la famiglia di distribuzioni Debian, e in /var/log/messages e/o /var/log/secure negli altri sistemi. Questa è una misura di sicurezza importante per consentire il monitoraggio e la responsabilità dell'uso di sudo. Una voce tipica del messaggio di registrazione contiene:

• Nome utente del chiamante
• Informazioni sul terminale
• Directory di lavoro
• Account utente chiamato
• Comando con argomenti

L'esecuzione di un comando come sudo whoami viene registrato come voce nel file di log in questo modo:

Dec 8 14:20:47 server1 sudo: op : TTY=pts/6 PWD=/var/log USER=root COMMAND=/usr/bin/whoami

Isolamento del Processo

Linux è considerato più sicuro di molti altri sistemi operativi in quanto i processi sono isolati in modo naturale l'uno dall'altro. Un processo normalmente non può accedere alle risorse di un altro processo, anche se questo processo è in esecuzione con gli stessi privilegi utente. Linux quindi rende difficile (anche se certamente non impossibile) ai virus e ai tentativi di penetrare la sicurezza, l'accesso e l'attacco casuale a risorse in un sistema.

Sono stati aggiunti recentemente altri meccanismi di sicurezza che limitano il rischio ulteriormente, tra i quali:

• Gruppi di Controllo (cgroup)
  Consentono agli amministratori di sistema di raggruppare processi e associare risorse finite a ciascun cgroup.
• Contenitori
  Rendono possibile l'esecuzione di più sistemi Linux isolati (contenitori) su un singolo sistema facendo affidamento ai cgroup.
• Virtualizzazione
  L'hardware viene emulato in modo tale che non solo i processi possano essere isolati, ma interi sistemi possano essere eseguiti contemporaneamente come ospiti isolati (macchine virtuali) su un host fisico.

Accesso ai Dispositivi Hardware

Linux limita all'utente l'accesso a dispositivi hardware non di rete in modo estremamente simile all'accesso ai normali file. Le applicazioni interagiscono coinvolgendo il livello del filesystem (che è indipendente dall'effettivo dispositivo o hardware nel quale risiede). Questo livello aprirà quindi uno speciale file di dispositivo (spesso chiamato nodo di dispositivo) nella directory /dev che corrisponde al dispositivo al quale si accede. Ciascun file speciale di dispositivo ha normali permessi per proprietario, gruppo e altri. La sicurezza è applicata in modo naturale, allo stesso modo dell'accesso a file standard.

Gli hard disk, per esempio, sono rappresentati come  /dev/sd*. Un utente root può leggere e scrivere sul disco in modo grezzo, ad esempio eseguendo qualcosa come:

# echo hello world > /dev/sda1

I permessi standard così come sono mostrati nella videata qui sotto, rendono impossibile agli utenti normali fare questo. La scrittura verso un dispositivo fatta in quel modo può facilmente obliterare il filesystem che vi risiede in un modo che non consente una riparazione senza grossi sforzi, posto che ci si riesca. La normale lettura e scrittura di file su hard disk dalle applicazioni è fatta a un livello più alto tramite il filesystem e mai con accesso diretto al nodo di dispositivo.

Mantenere il Sistema Aggiornato

Quando sono individuati i problemi di sicurezza sia sul kernel Linux  che su applicazioni e librerie, le distribuzioni Linux hanno una buona reputazione di agire velocemente, applicando le risoluzioni per tutti i sistemi, aggiornando i loro repository software e inviando notifiche che consigliano l'aggiornamento immediato. La stessa cosa vale anche per la risoluzione di bug e miglioramenti di prestazioni che non sono legati alla sicurezza.

Tuttavia, è ben noto che molti sistemi non vengono aggiornati con sufficiente frequenza e problemi per i quali esiste già la soluzione rimangono nei computer per molto tempo; questo è particolarmente vero con sistemi operativi proprietari dove gli utenti non sono informati o non si fidano della politica di applicazione delle risoluzioni dei problemi da parte dei gestori delle distribuzioni, in quanto talvolta gli aggiornamenti possono causare nuovi problemi e rompere cose che prima funzionavano. La maggior parte dei vettori di attacco più efficaci sfruttano buchi di sicurezza per i quali è già pronta la risoluzione ma non è stata universalmente distribuita.

Quindi la migliore pratica per trarre vantaggio del meccanismo di aggiornamenti automatici della tua distribuzione Linux è di applicarli tempestivamente, mai rimandarli. È estremamente raro che tali aggiornamenti possano causare nuovi problemi.

Come Sono Conservate le Password

Il sistema verifica l'autenticità e l'identità usando le credenziali utente.

In origine, le password criptate erano conservate nel file /etc/passwd, che era leggibile da tutti. Pertanto era piuttosto facile scoprire le password.

Nei moderni sistemi, le password sono in realtà conservate in forma criptata in un file secondario chiamato /etc/shadow. Solo chi ha accesso come root può leggere o modificare questo file.

Algoritmo della Password

La protezione delle password è diventato un elemento cruciale di sicurezza. La maggior parte delle distribuzioni Linux fa affidamento su un moderno algoritmo di codifica delle password chiamato SHA-512 (Secure Hashing Algorithm 512 bits), sviluppato dall'Agenzia per la Sicurezza Nazionale degli Stati Uniti per la codifica delle password.

L'algoritmo SHA-512 è largamente usato per applicazione di sicurezza e protocolli. Questi includono TLS, SSL, PHP, SSH, S/MIME e IPSec. SHA-512 è uno degli algoritmi più testati.

Per esempio, se desideri fare esperimenti con la codifica SHA-512, la parola "test" può essere codificata usando il programma sha512sum per produrre il formato SHA-512 (vedi sotto):

Buone Pratiche per le Password

I professionisti IT seguono parecchie buone pratiche per mettere in sicurezza i dati e la password di ciascun utente.

• La durata della password è un metodo per assicurarsi che l'utente venga avvisato quando è ora di creare una nuova password, trascorso uno specifico periodo di tempo. Questo assicura che le password, se scoperte, saranno utilizzabili solo per un periodo limitato di tempo. Questa funzionalità è implementata usando chage, che configura l'informazione di password in scadenza per un utente.
• Un altro metodo è di forzare gli utenti a creare password complesse usando i moduli PAM (Pluggable Authentication Modules). PAM può essere configurato automaticamente per verificare che una password creata o modificata usando l'utility passwd sia sufficientemente complessa. La configurazione di PAM è implementata usando una libreria chiamata  pam_cracklib.so, che può essere rimpiazzata da pam_passwdqc.so per potere usufruire di più opzioni.
• È anche possibile installare un programma di cracking di password come  John The Ripper, per mettere in sicurezza il file delle password e per rilevare voci di password deboli. Si raccomanda di ottenere un'autorizzazione scritta prima di installare detto strumento su qualsiasi sistema se non di proprietà.

Richiedere Password per il Boot Loader

Puoi mettere in sicurezza il processo di avvio con una password per evitare che qualcuno possa saltare il passaggio di autenticazione utente. Questo può funzionare assieme alla protezione con password del BIOS. Nota che anche se il solo uso di una password per il bootloader impedirà a un utente di modificare la configurazione del bootloader durante il processo di avvio, non impedirà a un utente l'avvio tramite un media alternativo, come dischi ottici e chiavi USB. Pertanto dovrebbe essere usata assieme a una password del BIOS per una protezione completa.

Per il metodo di avvio meno recente GRUB 1, era relativamente facile impostare una password per grub. Tuttavia, per la versione GRUB 2 le cose sono diventate più complicate, anche se si ha maggiore flessibilità e si può trarre vantaggio da funzionalità più avanzate come password specifiche per utente (che possono anche essere quelle del loro normale login).

Inoltre non modificherai mai grub.cfg direttamente; invece puoi modificare i file di configurazione in /etc/grub.d e /etc/defaults/grub, poi eseguire update-grub, oppure grub2-mkconfig e salvare il nuovo file di configurazione.

Per saperne di più, leggi il post seguente (in inglese): "GRUB 2 Password Protection".

Vulnerabilità dell'Hardware

Quando l'hardware è accessibile fisicamente, la sicurezza può essere compromessa da:

• Key logging
  La registrazione in tempo reale dell'attività di un computer, compreso i tasti premuti. I dati catturati possono essere salvati localmente oppure trasmessi a macchine remote.
• Network sniffing
  La cattura e la visualizzazione del livello dati dei pacchetti sulla tua rete.
• Avvio da un disco di ripristino o una distribuzione live
• Rimontaggio e modifica del contenuto del disco.

La politica di sicurezza della tua struttura IT dovrebbe partire dai requisiti su come accedere fisicamente in modo corretto a server e workstation. L'accesso fisico a un sistema rende possibile per gli aggressori di sfruttare diversi vettori di attacco, in modo tale che tutte le precauzioni a livello di sistema operativo diventino irrilevanti.

Le linee guida della sicurezza sono:

• Bloccare workstation e server.
• Proteggere i punti di collegamento alla rete in modo tale che possano accedere solo persone di tua fiducia.
• Proteggere le tue tastiere dove vengono digitate le password per assicurarsi che le tastiere non possano essere manomesse.
• Assicurarsi che una password protegga il BIOS in modo tale che il sistema non possa essere avviato con una chiave USB o una distribuzione live su DVD.

Per computer usati da un solo utente e quelli in un ambiente domestico alcune delle protezioni sopra citate (come prevenire l'avvio da media rimovibili) possono essere eccessive e puoi evitare di implementarle. Tuttavia se nel tuo sistema ci sono informazioni sensibili che richiedono una accurata protezione dovresti adottare le linee guida sopra citate oppure toglierle dal computer.

Vulnerabilità Software

Come tutti i software, gli hacker trovano occasionalmente punti deboli nell'ecosistema Linux. La forza di Linux (e della comunità open source in generale) è la velocità con cui tali vulnerabilità sono esposte e riparate. La copertura specifica delle vulnerabilità va oltre lo scopo di questo corso, ma la commissione di discussione può essere utilizzata per svolgere ulteriori discussioni.

Riepilogo del Capitolo

Hai completato il Capitolo 18. Riassumiamo i concetti chiave trattati:

• L'account di root ha autorità sull'intero sistema.
• I privilegi di root possono essere richiesti per compiti come il riavvio di servizi, l'installazione manuale di pacchetti e la gestione di parti del filesystem che sono al di fuori della directory home.
• Per poter esegure qualsiasi operazione con alti privilegi come modifiche a livello di sistema, devi usare  su oppure sudo.
• La chiamata a sudo attiva una ricerca nel file  /etc/sudoers, oppure nella directory /etc/sudoers.d, che prima controlla che l'utente chiamante possa usare sudo e che venga usato all'interno dell'ambito consentito.
• Una delle più potenti funzionalità di sudo è la capacità di registrare tentativi falliti per l'acquisizione di accesso a root. Per impostazione predefinita, i comandi sudo e i fallimenti sono registrati in /var/log/auth.log per quanto riguarda la famiglia Debian e in /var/log/messages nelle altre famiglie di distribuzioni.
• Un processo non può accedere alle risorse di un altro processo, anche se quel processo è in esecuzione con gli stessi privilegi utente.
• Tramite l'uso delle credenziali utente, il sistema verifica autenticità e identità.
• L'algoritmo SHA-512 viene usato tipicamente per codificare le password. Possono essere codificate ma non decodificate.
• Si possono configurare i Pluggable Authentication Modules (PAM) per verificare automaticamente che le password create o modificate con l'utility passwd siano sufficientemente complesse (può anche essere configurato quanto abbastanza complesse debbano essere).
• La politica di sicurezza della tua struttura IT dovrebbe partire dai requisiti su come mettere propriamente in sicurezza l'accesso fisico a server e workstations.
• Mantenere i tuoi sistemi aggiornati è un importante passo per evitare attacchi di sicurezza