Articolo originale: Learn JavaScript for Beginners – JS Basics Handbook

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

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:

NOME ESEMPIO OPERAZIONE SIGNIFICATO
Addizione x + y Ritorna la somma dei due operandi
Sottrazione x - y Ritorna la differenza tra i due operandi
Moltiplicazione x * y Ritorna il prodotto dei due operandi
Elevamento a potenza x ** y Ritorna il valore dell'operando di sinistra elevato alla potenza dell'operando di destra
Divisione x / y Ritorna il valore dell'operando di sinistra diviso per l'operando di destra
Resto x % y Ritorna il resto del valore della divisione tra l'operando di sinistra e l'operando di destra
Incremento x++ Ritorna l'operando più uno
Decremento x-- Ritorna l'operando meno uno

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:

NOME ESEMPIO OPERAZIONE SIGNIFICATO
Assegnazione x = y x = y
Addizione e Assegnazione x += y x = x + y
Sottrazione e assegnazione x -= y x = x - y
Moltiplicazione e Assegnazione x *= y x = x * y
Divisione e Assegnazione x /= y x = x / y
Resto e Assegnazione x %= y x = x % y

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:

NOME ESEMPIO OPERAZIONE SIGNIFICATO
Uguale x == y Ritorna true se gli operandi sono uguali
Non uguale x != y Ritorna true se gli operandi non sono uguali
Strettamente uguale x === y Ritorna true se gli operandi sono uguali e sono dello stesso tipo
Strettamente non uguale x !== y Ritorna true se gli operandi non sono uguali e sono di tipi diversi
Maggiore di x > y Ritorna true se l'operando di sinistra è maggiore di quello di destra
Maggiore o uguale x >= y Ritorna true se l'operando di sinistra è maggiore o uguale a quello di destra
Minore di x < y Ritorna true se l'operando di sinistra è minore di quello di destra
Minore o uguale x >= y Ritorna true se l'operando di sinistra è minore o uguale a quello di destra

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:

NOME ESEMPIO OPERAZIONE SIGNIFICATO
Logico E x && y Ritorna true se tutti gli operandi sono true, false altrimenti
Logico O x || y Ritorna true se uno degli operandi è true, false altrimenti
Logico NON ! Ribalta il risultato, ritorna true se false e viceversa

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:

Array as a locker illustration

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:

Array index numbers as locker numbers

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.

The JavaScript Tutorial by Nathan Sebhastian

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!