Ti è mai capitato di lavorare con numeri come 1/3, il cui risultato è 0.33333... continuando all'infinito? Noi umani di norma arrotondiamo numeri del genere, ma ti sei mai chiesto come vengono gestiti dai computer?

In questo articolo esploreremo il modo in cui i computer gestiscono i numeri decimali illimitati, includendo il concetto degli errori di precisione. Esamineremo il problema aritmetico della virgola mobile, una problematica universale che riguarda vari linguaggi di programmazione. Ci focalizzeremo in particolare su come JavaScript affronta questo problema.

Inoltre, impareremo come funzionano le operazioni binarie dietro le quinte, il limite oltre il quale JavaScript tronca i numeri, basandosi sullo standard IEEE 754, e introdurremo BigInt come soluzione per gestire in maniera accurata grandi numeri senza perdere precisione.

Innanzitutto prendiamo in considerazione un esempio. Riesci ad indovinare il risultato di questa operazione?

console.log(0.1 + 0.2);

Potresti aver pensato che la risposta fosse 0.3, vero? Ma in realtà il risultato è:

Output: 0.30000000000000004

Ti starai chiedendo perché ciò accada. Perché ci sono così tanti zero in più, e perché l'ultima cifra è 4?

La risposta è semplice: i numeri 0.1 e 0.2 non possono essere rappresentati in maniera precisa in JavaScript (ovvero "esattamente" o "accuratamente")

Sembrerebbe facile, no? Ma la spiegazione è un po' più complicata.

Quindi cosa ne pensi? È un bug o una funzionalità?

Be', non è un bug. È un problema di base, che ha a che fare con il metodo in cui i computer gestiscono i numeri, in particolare i numeri a virgola mobile.  

Perché succede questa cosa?

Capiamolo attraverso la matematica di base.

La frazione 1/3, è rappresentata in decimali da 0.33333... dove il 3 si ripete all'infinito. Non possiamo scriverlo in maniera esatta, quindi lo approssimiamo come 0.333 o 0.333333 per risparmiare tempo e spazio.

In maniera simile, con un computer, dobbiamo comunque approssimare, perché 1/3 o 0.3333... sarebbe un numero troppo grande e occuperebbe un spazio infinito (che non abbiamo).

Ciò porta a quello che noi chiamiamo il problema aritmetico della virgola mobile.

Il problema aritmetico della virgola mobile

In parole povere, i numeri a virgola mobile sono numeri che non possono essere scritti in maniera esatta, e che quindi vengono approssimati. In un computer questo tipo di approssimazione può portare a piccoli errori di precisione, che chiamiamo il problema aritmetico della virgola mobile.

Spiegazione binaria

Adesso che ci siamo occupati di questa semplice spiegazione, comprendiamo questo concetto anche dal punto di vista binario. JavaScript gestisce tutto in codice binario dietro le quinte.

Binario è un sistema di numeri che utilizza solo due cifre: 0 e 1.

Perché 0.1 e 0.2 non possono essere rappresentati accuratamente nel sistema binario?

Il problema principale è che non tutti i numeri decimali possono essere perfettamente rappresentati come frazioni binarie.

Prendiamo 0.1 come esempio: quando si prova a rappresentare 0.1 in binario, si scopre che non può essere espresso come una frazione binaria finita, invece diventa una frazione continua, proprio come 1/3 in numeri decimali diventa 0.333..., ripetuto all'infinito.

In binario, 0.1 diventa:

0.0001100110011001100110011001100110011... (si ripete all'infinito)

Dato che i computer hanno una memoria limitata, non possono memorizzare questa sequenza infinita in maniera esatta, ma la devono troncare ad un certo punto, e ciò crea un piccolo errore di arrotondamento. Questo è il motivo per cui 0.1 in binario è solo una approssimazione dell'effettivo numero.

Come 0.1, 0.2 non può essere rappresentato accuratamente nel sistema binario. Diventa invece:

0.00110011001100110011001100110011... (si ripete all'infinito)

Di nuovo il computer tronca questa sequenza binaria infinita, causando un piccolo errore di rappresentazione.

Quindi cosa succede quando addizioniamo 0.1 + 0.2? Quando si addizionano 0.1 + 0.2 in JavaScript, le approssimazioni binarie per 0.1 e 0.2 sono sommate. Ma, dato che entrambi i valori sono solo approssimazioni, anche il risultato è una approssimazione.

Invece di ottenere esattamente 0.3, otterremo:

console.log(0.1 + 0.2); // Output: 0.30000000000000004

Questo minimo errore si verifica perché né 0.1 né 0.2 possono essere rappresentati accuratamente nel sistema binario, quindi il risultato finale ha un piccolo errore di arrotondamento.

Come tronca i numeri JavaScript?

Adesso sorge una domanda: come fa JavaScript a sapere quando deve troncare il valore (troncamento significa abbreviare un numero rimuovendo le cifre in più dopo un certo punto)?

C'è un limite massimo ed un limite minimo per farlo.

Per gestire questa operazione nel mondo dei computer, abbiamo uno standard che definisce come i numeri a virgola mobile vengono memorizzati e calcolati.

Standard IEEE 754

JavaScript utilizza lo standard IEEE 754 per gestire le operazioni aritmetiche con i numeri a virgola mobile.

Lo standard stabilisce dei limiti di numeri interi sicuri per il tipo Number in JavaScript, che evitano la perdita di precisione:

• Massimo Numero Intero Sicuro: 2^53 - 1 o 9007199254740991
• Minimo Numero Intero Sicuro: -(2^53 - 1) o -9007199254740991

Oltre questi limiti JavaScript non può rappresentare accuratamente i numeri interi, dato il modo in cui funziona l'aritmetica dei numeri a virgola mobile.

Per questa ragione, JavaScript ci fornisce due costanti per rappresentare questi limiti:  

• Number.MAX_SAFE_INTEGER
• Number.MIN_SAFE_INTEGER

Nel caso avessi bisogno di un numero più grande?

Se hai bisogno di lavorare con numeri più grandi del massimo numero intero sicuro (come quelli utilizzati nella crittografia o nelle finanze), JavaScript ha una soluzione: BigInt.

BigInt

BigInt è un oggetto integrato che ti permette di lavorare con numeri interi che vanno oltre il limite degli interi sicuri. Ti permette di rappresentare numeri più grandi di 9007199254740991 senza preoccuparti degli errori di precisione!

Per utilizzare BigInt bisogna semplicemente aggiungere una n alla fine di un numero intero:

const bigNumber = 1234567890123456789012345678901234567890n;

In alternativa, puoi utilizzare il costruttore BigInt:

const bigNumber = BigInt("1234567890123456789012345678901234567890");

Calcoli con BigInt

Si possono svolgere operazioni aritmetiche utilizzando BigInt, come addizione, sottrazione, moltiplicazione, e anche elevamento a potenza. Tuttavia, c'è un problema: non possiamo fare operazioni aritmetiche mescolando BigInt con il tipo Number, non senza prima fare delle conversioni esplicite tra un tipo e l'altro.

Per esempio, questo non funzionerà:

let result = bigNumber + 5; // Error: cannot mix BigInt and other types

C'è bisogno prima di convertire Number in BigInt:

let result = bigNumber + BigInt(5); // Adesso funziona!

Quando utilizzare BigInt?

BigInt è particolarmente utile in aree in cui è richiesta precisione, come ad esempio:

• Algoritmi crittografici
• Gestire grandi set di dati
• Calcoli finanziari che richiedono precisione

Riassumendo

• Il limite intero sicuro in JavaScript garantisce una rappresentazione accurata dei numeri tra -(2^53 - 1) e 2^53 - 1.
• Gli errori di precisione si verificano a causa dell'aritmetica dei numeri a virgola mobile, quando si lavora con particolari numeri (come 0.1 + 0.2).
• Se hai bisogno di utilizzare numeri oltre del limite sicuro, BigInt è tuo amico. Ma ricorda che per combinare BigInt con il tipo Number bisogna prima fare delle conversioni esplicite.

A volte in JavaScript si può considerare l'utilizzo di un'istruzione switch al posto di un'istruzione if else.

L'istruzione switch può offrire una sintassi più semplice rispetto a istruzioni if else più complicate.

Consideriamo l'esempio sottostante – invece di utilizzare questa lunga istruzione if else, possiamo scegliere di utilizzare un'istruzione switch più semplice da leggere.

const animale = "cane";

if (animale === "lucertola") {
  console.log("Ho una lucertola");
} else if (animale === "cane") {
  console.log("Ho un cane");
} else if (animale === "gatto") {
  console.log("Ho un gatto");
} else if (animale === "serpente") {
  console.log("Ho un serpente");
} else if (animale === "pappagallo") {
  console.log("Ho un pappagallo");
} else {
  console.log("Non ho nessun animale");
}

const animale = "cane";

switch (animale) {
  case "lucertola":
    console.log("Ho una lucertola");
    break;
  case "cane":
    console.log("Ho un cane");
    break;
  case "gatto":
    console.log("Ho un gatto");
    break;
  case "serpente":
    console.log("Ho un serpente");
    break;
  case "pappagallo":
    console.log("Ho un pappagallo");
    break;
  default:
    console.log("Non ho nessun animale");
    break;
}

In questo articolo, vedremo cosa sono le istruzioni switch e come funzionano. Ti aiuterò anche a capire se sono una buona alternativa da utilizzare nel tuo codice.

Che cos'è un'istruzione switch?

Nella programmazione, un'istruzione switch è un'istruzione di controllo del flusso che confronta il valore di una espressione con diversi casi possibili.

Questa è la sintassi di base di un'istruzione switch:

switch (espressione) {
  case 1:
   //questo codice verrà eseguito se questo caso corrisponde all'espressione
    break;
  case 2:
   //questo codice verrà eseguito se questo caso corrisponde all'espressione
    break;
  case 3:
   //questo codice verrà eseguito se questo caso corrisponde all'espressione
    break;
  default:
    //questo codice verrà eseguito se nessun caso corrisponde all'espressione
    break;
}

Il computer valuterà l'istruzione switch verificando l'uguaglianza (stretta) === tra i vari case e l'espressione. Se uno dei casi corrisponde all'espressione, allora verrà eseguito il codice all'interno di quella clausola case.

switch (espressione) {
  case 1:
   //questo codice verrà eseguito se questo caso corrisponde all'espressione
    break;
  case 2:
   //questo codice verrà eseguito se questo caso corrisponde all'espressione
    break;
}

Se nessuno dei casi corrisponde all'espressione, allora la clausola default verrà eseguita.

  default:
    //questo codice verrà eseguito se nessun caso corrisponde all'espressione
    break;

Se più casi dell'istruzione switch possono corrispondere all'espressione, allora il primo case che corrisponde all'espressione verrà utilizzato.

Le istruzioni break permettono di uscire dall'istruzione switch quando un case corrisponde. Se non sono presenti istruzioni break, allora il computer continuerà l'esecuzione dell'istruzione switch anche se viene trovata una corrispondenza.

Se sono presenti delle istruzioni return nello switch, allora non è necessaria l'istruzione break.

Esempio di istruzioni switch in JavaScript

In questo esempio, confrontiamo "oboe" con i vari casi. "oboe" corrisponderà alla terza clausola case e stamperà nella console "Suono l'oboe".

switch ("oboe") {
  case "tromba":
    console.log("Suono la tromba");
    break;
  case "flauto":
    console.log("Suono il flauto");
    break;
  case "oboe":
    console.log("Suono l'oboe");
    break;
  default:
    console.log("Non suono nessuno strumento");
    break;
}

Se cambiassimo l'espressione in "nessuno strumento", allora verrebbe eseguita la clausola default e il messaggio stampato nella console sarebbe "Non suono nessuno strumento".

switch ("nessuno strumento") {
  case "tromba":
    console.log("Suono la tromba");
    break;
  case "flauto":
    console.log("Suono il flauto");
    break;
  case "oboe":
    console.log("Suono l'oboe");
    break;
  default:
    console.log("Non suono nessuno strumento");
    break;
}

Senza istruzioni break

In questo esempio, c'è corrispondenza con il case 2. Ma senza un'istruzione break, il computer continuerà con il case 3 e con la clausola default.

Vedrai il risultato di tre istruzioni console.log perché non è stata inclusa l'istruzione break.

switch (2) {
  case 1:
    console.log("È stato scelto il numero 1");
  case 2:
    console.log("È stato scelto il numero 2");
  case 3:
    console.log("È stato scelto il numero 3");
  default:
    console.log("Non è stato scelto nessun numero");
}

Dove posizionare la clausola default

La convenzione usuale è quella di inserire la clausola default come ultima clausola. Ma si può posizionare anche prima di altre clausole.

const cibo = "noccioline";

switch (cibo) {
  case "torta":
    console.log("Mi piace la torta");
    break;
  case "pizza":
    console.log("Mi piace la pizza");
    break;
  default:
    console.log("Mi piace di tutto");
    break;
  case "gelato":
    console.log("Mi piace il gelato");
    break;
}

Il computer controllerà sempre ogni caso per trovare una corrispondenza. Poiché il valore della variabile cibo non corrisponde a nessuno dei casi, allora verrà eseguito il caso di default.

Casi multipli per una stessa operazione

A volte, a più casi può corrispondere una stessa operazione.

Invece di scrivere gli stessi console.log per ciascun caso, possiamo tralasciare le istruzioni break e inserire un'istruzione dopo l'elenco dei casi.

Il messaggio "Questo paese si trova in Europa" verrà stampato nella console se paese corrisponde a uno dei casi tra "Francia", "Spagna", "Irlanda" o "Polonia".

const paese = "Irlanda";
switch (paese) {
  case "Francia":
  case "Spagna":
  case "Irlanda":
  case "Polonia":
    console.log("Questo paese si trova in Europa");
    break;
  case "Stati Uniti":
  default:
    console.log("Questo paese non si trova in Europa");
}

Ambito di blocco e istruzioni switch

Nell'esempio seguente si verificherà un errore, perché la variabile messaggio è già stata dichiarata e non si può dichiarare un'altra variabile con lo stesso nome nello stesso ambito di blocco.

const commissione = "Andare a fare shopping";
switch (commissione) {
  case "Andare dal dentista":
    let messaggio = "Odio andare dal dentista";
    console.log(messaggio);
    break;
  case "Andare a fare shopping":
    let messaggio = "Adoro fare shopping";
    console.log(messaggio);
    break;
  default:
    console.log("Nessuna commissione");
    break;
}

Per evitare il messaggio di errore, i casi devono essere racchiusi in parentesi graffe.

const commissione = "Andare a fare shopping";
switch (commissione) {
  case "Andare dal dentista": {
    let messaggio = "Odio andare dal dentista";
    console.log(messaggio);
    break;
  }
  case "Andare a fare shopping": {
    let messaggio = "Adoro fare shopping";
    console.log(messaggio);
    break;
  }
  default: {
    console.log("Nessuna commissione");
    break;
  }
}

Conclusione

Un'istruzione switch può essere un'alternativa all'istruzione if else. Un'istruzione switch confronta il valore di un'espressione con diversi casi.

Le istruzioni switch controllano l'uguaglianza stretta. In questo esempio, poiché "2"!== 2, verrà eseguita la clausola default.

switch (2) {
  case "2":
    console.log("Il numero 2 in una stringa");
    break;
  case "3":
    console.log("Il numero 3 in una stringa");
    break;
  default:
    console.log("Nessun numero presente");
    break;
}

Le istruzioni break permettono di uscire da uno switch quando c'è corrispondenza con un case. Se non sono presenti istruzioni break, allora il computer continuerà l'esecuzione dell'istruzione switch anche se viene trovata una corrispondenza.

Spero che questo articolo sull'istruzione switch ti sia piaciuto.

Ci saranno occasioni in cui avrai bisogno di scrivere comandi che gestiscono decisioni diverse nel tuo codice.

Per esempio, se stai creando un bot, puoi fare in modo che risponda con messaggi differenti in base ai comandi che può ricevere.

In questo articolo spiegherò cos'è un'istruzione if...else con esempi di codice. Ci occuperemo anche dell'operatore condizionale ternario, che può essere utilizzato come abbreviazione delle istruzioni if...else.

Cos'è un'istruzione if...else in JavaScript?

L'if...else è un tipo di istruzione condizionale (conditional statement), che esegue un blocco di codice quando la condizione contenuta nell'istruzione if è truthy (vera). Se la condizione è falsy (falsa), allora sarà il blocco else ad essere eseguito.

I valori truthy e falsy vengono convertiti in true (vero) o false (falso) nelle istruzioni if.

if (condizione) {
   // codice eseguito se la condizione è vera
} else {
   // codice eseguito se la condizione è falsa
}

Qualunque valore che non è definito falsy, verrà considerato truthy in JavaScript.

Ecco una lista di valori falsy :

• false
• 0 (zero)
• -0 (zero negativo)
• 0n (BigInt zero)
• "", '', `` (stringa vuota)
• null
• undefined
• NaN (not a number)

Esempi di istruzioni if...else in JavaScript

In questo esempio, la condizione nell'istruzione if  è true, quindi il messaggio che verrà mostrato nella console sarà "Nick is an adult".

const age = 18;

if (age >= 18) {
  console.log("Nick is an adult.");
} else {
  console.log("Nick is a child.");
}

Ma se cambio la variabile age in modo che sia minore di 18, allora la condizione diventerà false, quindi il codice questa volta eseguirà il blocco else.

const age = 12;

if (age >= 18) {
  console.log("Nick is an adult.");
} else {
  console.log("Nick is a child.");
}

Esempi con varie condizioni (istruzioni if...else if...else) in JavaScript

A volte potresti voler testare varie condizioni, e in questi casi entra in gioco il blocco else if.

if (condizione 1) {
   // codice eseguito quando condizione 1 è true
} else if (condizione 2) {
  // codice eseguito quando condizione 2 è true
} else {
   // codice eseguito quando nessuna delle condizioni precedenti è true
}

Quando la condizione dell'if è false, il computer valuta la condizione dell'else if.  Se anche questa risulta false, allora passa al blocco else.

In questo esempio, il blocco else if sarà quello che verrà eseguito, dato che Alice ha un'età compresa tra 18 e 21 anni.

const age = 18;

if (age < 18) {
  console.log("Alice is under 18 years old.");
} else if (age >= 18 && age <= 21) {
  console.log("Alice is between the ages of 18 and 21.");
} else {
  console.log("Alice is over 21 years old.");
}

Quando utilizzare le istruzioni switch invece che le istruzionii if...else?

Ci sono occasioni in JavaScript in cui potresti considerare di utilizzare un'istruzione switch, invece di un'istruzione if else.

Le istruzioni switch  hanno una sintassi più pulita, a differenza delle complicate istruzioni if else.

Dai un'occhiata a questo esempio in basso – invece di utilizzare questa lunga istruzione if else, potresti scegliere di servirti di un'istruzione switch , che è molto più semplice da leggere.

const pet = "dog";

if (pet === "lizard") {
  console.log("I own a lizard");
} else if (pet === "dog") {
  console.log("I own a dog");
} else if (pet === "cat") {
  console.log("I own a cat");
} else if (pet === "snake") {
  console.log("I own a snake");
} else if (pet === "parrot") {
  console.log("I own a parrot");
} else {
  console.log("I don't own a pet");
}

const pet = "dog";

switch (pet) {
  case "lizard":
    console.log("I own a lizard");
    break;
  case "dog":
    console.log("I own a dog");
    break;
  case "cat":
    console.log("I own a cat");
    break;
  case "snake":
    console.log("I own a snake");
    break;
  case "parrot":
    console.log("I own a parrot");
    break;
  default:
    console.log("I don't own a pet");
    break;
}

Le istruzioni switch non sono sempre la scelta più appropriata in tutte le situazioni, ma se pensi delle istruzioni if else siano troppo lunghe e complicate, allora un'istruzione switch potrebbe essere un'opzione alternativa.

L'operatore logico AND (&&) e le istruzioni if...else in JavaScript

Con l'operatore logico AND (&&), se entrambe le condizioni sono true, allora verrà eseguito il  blocco if. Se una o entrambe le condizioni sono false, allora sarà eseguito il blocco else.

In questo esempio, dato che l'età è maggiore di 16 e la variabile ownsCar è true, verrà eseguito il blocco if. Il messaggio mostrato dalla console sarà "Jerry is old enough to drive and has his own car."  

const age = 17;
const ownsCar = true;

if (age >= 16 && ownsCar) {
  console.log("Jerry is old enough to drive and has his own car.");
} else {
  console.log("Jerry does not drive.");
}

Cambiando la variabile age in modo che sia minore di 16, entrambe le condizioni non sono più true e quindi verrà eseguito il blocco else.

const age = 13;
const ownsCar = true;

if (age >= 16 && ownsCar) {
  console.log("Jerry is old enough to drive and has his own car.");
} else {
  console.log("Jerry does not drive.");
}

L'operatore logico OR (||) e le istruzioni if...else in JavaScript

Nel caso dell'operatore logico OR (||), se una o entrambe le condizioni sono true, allora il codice nell'istruzione if sarà eseguito.

In questo esempio, anche se la variabile isSale è false, il codice nel blocco if verrà eseguito lo stesso, perché almeno la variabile boyfriendIsPaying è true.

const boyfriendIsPaying = true;
const isSale = false;

if (boyfriendIsPaying || isSale) {
  console.log("Jesse will go shopping.");
} else {
  console.log("Jesse will not go shopping.");
}

Se cambiassi il valore della variabile boyfriendIsPaying in false, allora il blocco  else verrebbe eseguito, perché entrambe le condizioni sarebbero false.

const boyfriendIsPaying = false;
const isSale = false;

if (boyfriendIsPaying || isSale) {
  console.log("Jesse will go shopping.");
} else {
  console.log("Jesse will not go shopping.");
}

L'operatore logico NOT (!) e le istruzioni if...else in JavaScript

L'operatore logico NOT (!) cambia il valore di qualcosa da true a false, ma può anche fare il contrario, trasformandolo da false a true.

Possiamo modificare l'esempio precedente utilizzando l'operatore !, per rendere false la variabile boyfriendIsPaying. Dato che entrambe le condizioni adesso sono false, il blocco else verrà eseguito.

const boyfriendIsPaying = true;
const isSale = false;

if (!boyfriendIsPaying || isSale) {
  console.log("Jesse will go shopping.");
} else {
  console.log("Jesse will not go shopping.");
}

L'operatore condizionale (ternario) in JavaScript

Se stai utilizzando un'istruzione if else breve, potresti scegliere di servirti dell'operatore ternario.

Questa è la sintassi di base dell'operatore ternario:

condizione ? se condizione è true : se condizione è false

La condizione è posizionata prima del simbolo ? e se è true, allora il codice tra il simbolo ? ed il simbolo : verrà eseguito. Se la condizione è false, allora sarà il codice dopo il simbolo : ad essere eseguito.

In questo esempio, dato che l'età è maggiore di 18, il messaggio mostrato dalla console sarà "Can vote".

const age = 32;
const citizen = age >= 18 ? "Can vote" : "Cannot vote";
console.log(citizen);

Questo è invece lo stesso codice, ma scritto usando un'istruzione if else:

const age = 32;
let citizen;

if (age >= 18) {
  citizen = "Can vote";
} else {
  citizen = "Cannot vote";
}

console.log(citizen);

In conclusione

Le istruzioni if else eseguono un blocco di codice se la condizione nell'istruzione if è truthy. Se la condizione è falsy, allora sarà il blocco else ad essere eseguito.

Ci saranno occasioni in cui vorrai testare varie condizioni, e in questi casi potrai utilizzare le istruzioni if...else if...else.

Se pensi che un'istruzione if else sia lunga e complicata, allora c'è la possibilità di utilizzare un'istruzione switch come alternativa.

Utilizzare gli operatori logici per testare più di una condizione, può essere un'alternativa alle istruzioni if else annidate l'una nell'altra.

L'operatore ternario può essere utilizzato come metodo per scrivere un'istruzione if else in modo più sintetico.

Generalmente, un stringa rappresenta una sequenza di caratteri in un linguaggio di programmazione.

Diamo un'occhiata ad un esempio di stringa creata usando la sequenza di caratteri, "Yes, You Can DO It!". In JavaScript, possiamo creare una stringa in un paio di modi:

• Usando una stringa letterale come dato primitivo:

const msg = "Yes, You Can DO It!";

• Usando il costruttore String() come un oggetto:

const msg = new String("Yes, You Can DO It!");

Un fatto interessante sulle stringhe in JavaScript è che possiamo accedere ai caratteri in una stringa tramite il loro indice. L'indice del primo carattere è 0 e per i caratteri successivi si incrementa di 1 per ciascun carattere. Pertanto possiamo accedere a ciascuno dei caratteri della stringa come segue:

let str = "Yes, You Can Do It!";

console.log(str[0]); // Y
console.log(str[1]); // e
console.log(str[2]); // s
console.log(str[3]); // ,

console.log(str[10]); // a

L'immagine sotto rappresenta la stessa cosa:

Oltre alla possibilità di accedere ai caratteri della stringa tramite i loro indici, JavaScript fornisce un sacco di metodi utili per accedere ai caratteri, eliminare parti di una stringa e manipolarle in vari modi.

In questo articolo, ti mostrerò un pratico metodo delle stringhe chiamato split().  Spero ti divertirai nel leggerlo.

Il metodo split() in JavaScript

Il metodo split() divide una stringa in due o più sottostringhe in base ad un separatore. Il separatore può essere un singolo carattere, un'altra stringa oppure una espressione regolare.

Dopo la divisione della stringa in più sottostringhe, il metodo split() le inserisce in un array e restituisce quest'ultimo come risultato. Non viene apportata alcuna modifica alla stringa originale.

Comprendiamo meglio come funziona con un esempio. Qui è riportata una stringa creata usando una stringa letterale:

let message = 'I am a Happy Go lucky Guy';

Possiamo chiamare il metodo split() sulla stringa  message. Dividiamo la stringa sulla base del carattere spazio (' '). Qui il carattere spazio agisce come separatore.

// Dividiamo usando il carattere spazio
let arr = message.split(' ');

// L'array
console.log(arr); // ["I", "am", "a", "Happy", "Go", "lucky", "Guy"]


// Accedi a ciascun elemento nell'array
console.log(arr[0]); // "I"
console.log(arr[1]); // "am"
console.log(arr[2]); // "a"
console.log(arr[3]); // "Happy"
console.log(arr[4]); // "Go",
console.log(arr[5]); // "lucky"
console.log(arr[6]); // "Guy"

Lo scopo principale del metodo split()  è estrapolare le parti della stringa che ti interessano per impiegarli successivamente per altre operazioni.

Come separare una stringa in ciascuno dei suoi caratteri

Puoi separare una stringa in ciascuno dei suoi caratteri usando una stringa vuota ('') come separatore. Nell'esempio seguente, dividiamo lo stesso messaggio usando una stringa vuota. Il risultato della separazione sarà un array contenente tutti i caratteri della stringa originaria.

console.log(message.split('')); // ["I", " ", "a", "m", " ", "a", " ", "H", "a", "p", "p", "y", " ", "G", "o", " ", "l", "u", "c", "k", "y", " ", "G", "u", "y"]

💡 Nota che la separazione di una stringa vuota ('') usando una stringa vuota come separatore restituisce un array vuoto. Questa potrebbe essere una domanda nei tuoi prossimi colloqui di lavoro!

''.split(''); // returns []

Come separare una stringa in un singolo array

È possibile invocare il metodo split() su una stringa senza specificare un separatore. In questo caso nel metodo  split()  non è specificato nessun argomento.

Quando invochi il metodo  split() su una stringa senza separatore, questo restituisce un array contenente l'intera stringa.

let message = 'I am a Happy Go lucky Guy';
console.log(message.split()); // restituisce ["I am a Happy Go lucky Guy"]

💡 Nota nuovamente che, chiamando il metodo split() su una stringa vuota ('') senza separatore, otterrai un array con una stringa vuota. Non viene restituito un array vuoto.

Qui di seguito sono riportati due esempi in modo da evidenziare le differenze:

// Restituisce un array vuoto
''.split(''); // restituisce []

// Restituisce un array con una stringa vuota
''.split() // restituisce [""]

Come separare una stringa usando come separatore un carattere non presente nella stringa stessa

Solitamente, si usa come separatore un carattere che è parte della stringa che stiamo provando a dividere. Ci sono casi in cui potresti aver passato come argomento un separatore che non fa parte della stringa o non coincide con alcuna parte della stessa. In questo caso, il metodo split()  restituisce un array con l'intera stringa come elemento.

Nell'esempio riportato sotto, la stringa del messaggio non ha il carattere virgola (,). Proviamo a dividere la stringa usando il separatore virgola (,).

let message = 'I am a Happy Go lucky Guy';
console.log(message.split(',')); // ["I am a Happy Go lucky Guy"]

💡 Dovresti tenere a mente questo fatto in quanto risulta molto utile durante il debug del codice per banali errori come passare il separatore errato nel metodo split().

Come separare una stringa con un limite

Se pensi che il metodo split()  assuma solo il separatore come parametro opzionale, lascia che ti dica che ce n'è anche un altro. Puoi passare come parametro opzionale anche un valore limite al metodo split() .

string.split(splitter, limit);

Come indica il nome, il parametro limit limita il numero di divisioni. Significa che l'array risultante avrà solo il numero di elementi specificato nel parametro limite.

Nell'esempio seguente, separiamo una stringa usando lo spazio (' ') come divisore. Possiamo anche passare il numero 4 come limite. Il metodo split() restituisce un array con solo quattro elementi, ignorando il resto.

let message = 'I am a Happy Go lucky Guy';
console.log(message.split(' ', 4)); // ["I", "am", "a", "Happy"]

Come separare usando una espressione regolare

Possiamo passare anche una espressione regolare (regex) come separatore al metodo  split(). Consideriamo la stringa da dividere:

let message = 'The sky is blue. Grass is green! Do you know the color of the Cloud?';

Separiamo la stringa ad ogni punto (.), punto esclamativo (!) e punto interrogativo (?). Possiamo scrivere un'espressione regolare che identifica quando questi caratteri si presentano. Quindi passiamo l'espressione regolare al metodo split() ed lo invochiamo sulla stringa soprariportata.

let sentences = message.split(/[.,!,?]/);
console.log(sentences);

Il risultato sarà il seguente:

Puoi usare il parametro limit per limitare l'output ai soli tre elementi iniziali, come segue:

sentences = message.split(/[.,!,?]/, 3);
console.log(sentences);

Il risultato sarà il seguente:

💡 Se vuoi catturare i caratteri usati nell'espressione regolare nell'array risultante, devi modificare leggermente l'espressione regolare. Usa le parentesi tonde per catturare i caratteri corrispondenti. L'espressione regolare aggiornata sarà /([.,!,?])/.

Come sostituire caratteri in una stringa usando il metodo Split()

Si possono risolvere molti problemi interessanti usando il metodo split() combinato con altri metodi di stringhe e array. Vediamone uno qui. Potrebbe essere comune dover sostituire tutte le occorrenze di una stringa con un altro carattere.

Per esempio, potresti voler creare un id di un elemento HTML dal valore di un nome. Il valore attribuito al nome potrebbe contenere uno spazio (' '), ma in HTML, il valore id non deve contenere alcuno spazio. Possiamo ovviare a questo problema nel modo seguente:

let name = 'Tapas Adhikary';
let subs = name.split(' ');
console.log(subs); // ["Tapas", "Adhikary"]

let joined = subs.join('-');
console.log(joined); // Tapas-Adhikary

Consideriamo che il nome è costiutuito da un nome proprio (Tapas) ed un cognome (Adhikary) separati da uno spazio. Nell'esempio per prima cosa separiamo il nome con uno spazio come separatore. Questo restituisce un array contente il nome ed il cognome come elementi, ovvero ['Tapas', 'Adhikary'].

Quindi usiamo il metodo degli array chiamato join() per unire gli elementi dell'array usando il carattere -. Il metodo join() restituisce una stringa unendo gli elementi con il carattere passato come parametro. Alla fine otteniamo il risultato finale con la stringa Tapas-Adhikary.

ES6: come separare un array con la destrutturazione

La specifica ECMAScript2015 (ES6) ha introdotto modi più innovativi per estrarre un elemento da un array ed assegnarlo a una variabile. Questa elegante sintassi è conosciuta come destrutturazione degli array (array destructuring). Possiamo usarla con il metodo  split() per assegnare l'output ad una variabile facilmente e con meno codice.

let name = 'Tapas Adhikary';
let [firstName, lastName] = name.split(' ');
console.log(firstName, lastName);

In questo esempio abbiamo separato il nome usando come separatore il carattere spazio. Quindi abbiamo assegnato il valore restituito dall'array a una coppia di variabili (firstName e lastName) usando la sintassi di destrutturazione degli array.

Prima di concludere...

👋 Vorresti continuare a scrivere codice ed imparare con me? Puoi trovare lo stesso contenuto qui in questo video YouTube. Devi solo aprire il tuo editor di codice preferito e iniziare.

Spero che tu abbia trovato utile questo articolo, e che leggerlo ti abbia aiutato a comprendere più chiaramente il metodo delle stringhe split() in JavaScript. Per acquisire una buona dimestichezza, usa gli esempi presentati per fare pratica più volte. Puoi trovare tutti gli esempi di codice nel mio repository GitHub.

Seguimi su Twitter (@tapasadhikary).

Potrebbero piacerti anche questi articoli (in inglese):

• The JavaScript Array Handbook – JS Array Methods Explained with Examples
• 10 DevTools tricks to help you with CSS and UX design
• A practical guide to object destructuring in JavaScript
• 10 trivial yet powerful HTML facts you must know
• 10 VS Code emmet tips to make you more productive

Ci sono molti modi pe convertire una stringa in un numero usando JavaScript. Ma qual è in codice nella pratica?

In questo articolo, ti mostrerò 11 modi per convertire una stringa in un numero.

Qui c'è uno Scrim interattivo su come convertire una stringa in un numero in JavaScript

Come convertire una stringa in un numero in JavaScript usando la funzione Number()

Un modo per convertire una stringa in un numero è utilizzare la funzione  Number() .

In questo esempio, abbiamo una stringa denominata  quantity con il valore "12".

const quantity = "12";

Se usiamo l'operatore typeof su  quantity, otteniamo come risultato il tipo stringa.

console.log(typeof quantity);

Possiamo convertire quantity  in un numero utilizzando la funzione  Number  in questo modo:

Number(quantity)

Possiamo controllare come questa variabile sia ora un numero utilizzando l'operatore typeof nuovamente:

console.log(typeof Number(quantity));

Se si prova a passare come argomento un valore che non può essere convertito in un numero, allora il valore risultante sarà NaN ("Not a Number", letteralmente "non un numero").

console.log(Number("awesome"));

Come convertire una stringa in un numero in JavaScript usando la funzione parseInt()

Un altro modo per convertire una stringa in un numero è utilizzare la funzione parseInt(). Questa funzione prende come argomento una stringa e, opzionalmente, una radice.

Una radice è un numero tra 2 e 36 che rappresenta la base in un sistema numerico. Per esempio, una radice pari a 2 rappresenta il sistema binario, mentre la radice 10 rappresenta il sistema decimale.

Possiamo utilizzare la variabile quantity già usata in precedenza e convertirla in un numero:

const quantity = "12";

console.log(parseInt(quantity, 10));

Cosa succede se provo a cambiare la variabile quantity in "12.99"? Il risultato utilizzando parseInt() sarà il numero 12.99?

const quantity = "12.99";

console.log(parseInt(quantity, 10));

Come puoi vedere, il risultato è un numero intero arrotondato. Se desideravi come risultato un numero in virgola mobile (floating point number), allora avresti dovuto utilizzare parseFloat().

Come convertire una stringa in un numero in JavaScript usando la funzione parseFloat()

La funzione parseFloat() prende come argomento un valore e restituisce come risultato un numero floating point. Esempi di numeri floating point sono 12.99 e 3.14.

Se modifichiamo il nostro esempio precedente per usare parseFloat(), il risultato sarà il numero floating point 12.99.

const quantity = "12.99";

console.log(parseFloat(quantity));

Nel caso in cui fossero presenti spazi bianchi nella stringa prima o dopo il valore che deve essere convertito, la funzione parseFloat() effettuerà ugualmente la conversione.

const quantity = "   12.99    ";

console.log(parseFloat(quantity));

Se il primo carattere nella stringa non può essere convertito in un numero, allora parseFloat()  restituirà NaN.

const quantity = "F12.99";

console.log(parseFloat(quantity));

Come convertire una stringa in un numero in JavaScript usando l'operatore unario più (+)

L'operatore unario più  (+) convertirà una stringa in un numero. L'operatore deve essere posizionato prima dell'operando.

const quantity = "12";

console.log(+quantity);

Possiamo anche usare l'operatore unario più (+)  per convertire una stringa in un numero floating point.

const quantity = "12.99";

console.log(+quantity);

Se il valore della stringa non può essere convertito in un numero, allora il risultato sarà NaN.

const quantity = "awesome";

console.log(+quantity);

Come convertire una stringa in un numero in JavaScript moltiplicando la stringa per il numero 1

Un altro modo per convertire una stringa in un numero è utilizzare una operazione matematica di base. Puoi moltiplicare il valore della stringa per 1 ed otterrai un numero.

const quantity = "12";

console.log(quantity * 1);

Come puoi vedere, quando moltiplichiamo il valore di quantity per 1, il risultato è il numero 12. Ma come funziona?

In questo esempio, JavaScript ha convertito il nostro valore della stringa in un numero e quindi ha eseguito l'operazione matematica. Tuttavia se il valore contenuto nella stringa non può essere convertito, allora l'operazione matematica non può essere eseguita e il risultato sarà NaN.

const quantity = "awesome";

console.log(quantity * 1);

Questo metodo funziona anche con i numeri floating point.

const quantity = "10.5";

console.log(quantity * 1);

Come convertire una stringa in un numero in JavaScript dividendo la stringa per il numero 1

Invece di moltiplicare per 1, puoi anche dividere la stringa per 1. JavaScript convertirà il valore della nostra stringa in un numero e quindi eseguirà l'operazione matematica.

const quantity = "10.5";

console.log(quantity / 1);

Come convertire una stringa in un numero in JavaScript sottraendo il numero 0 dalla stringa

Un ulteriore metodo è sottrarre 0 dalla stringa. Come prima, JavaScript convertirà il valore della nostra stringa in un numero ed eseguirà l'operazione matematica.

const quantity = "19";

console.log(quantity - 0);

Come convertire una stringa in un numero in JavaScript utilizzando l'operatore NOT bit a bit (~)

L'operatore NOT bit a bit (~) inverte i bit di un operando e converte tale valore in un intero a 32 bit con segno. Un intero a 32 bit con segno è un valore che rappresenta un numero intero con 32 bit (equivalenti a 4 byte).

Se utilizziamo un operatore NOT bit a bit (~)  su un numero, questi eseguirà la seguente operazione: -(x + 1)

console.log(~19);

Ma se utilizziamo due operatori NOT bit a bit  (~), allora convertiremo la nostra stringa in un numero:

const quantity = "19";

console.log(~~quantity);

Questo metodo non funziona con i numeri floating point perchè il risultato sarà sempre un intero.

const quantity = "19.99";

console.log(~~quantity);

Se provi ad usare questo metodo su un carattere non-numerico, il risultato sarà zero.

const quantity = "awesome";

console.log(~~quantity);

Questo metodo ha dei limiti perchè inizierà a dare problemi per valori che sono considerati troppo grandi. È importante assicurarsi che il numero da convertire sia compreso tra i valori degli interi a 32 bit con segno (ovvero compreso tra -2.147.483.648 e +2.147.483.648).

const quantity = "2700000000";

console.log(~~quantity);

Per saperne di più sull'operatore NOT bit a bit (~) , puoi fare riferimento alla seguente documentazione.

Come convertire una stringa in un numero in JavaScript usando la funzione Math.floor()

Un altro modo di convertire una stringa in un numero è utilizzando la funzione Math.floor() . Questa funzione arrotonda per difetto un numero all'intero più vicino.

const quantity = "13.4";

console.log(Math.floor(quantity));

Come nei precedenti esempi, se proviamo ad usare un carattere non numerico, il risultato sarà  NaN.

const quantity = "awesome";

console.log(Math.floor(quantity));

Come convertire una stringa in un numero in JavaScript usando la funzione Math.ceil()

La funzione Math.ceil()  arrotonda per eccesso un numero all'interno più vicino.

const quantity = "7.18";

console.log(Math.ceil(quantity));

Come convertire una stringa in un numero in JavaScript usando la funzione Math.round()

La funzione  Math.round() arrotonda un numero all'intero più vicino.

Se abbiamo il valore di 6.3, la funzione  Math.round() restituirà il valore 6.

const quantity = "6.3";

console.log(Math.round(quantity));

Ma se cambio tale valore a 6.5, allora la funzione Math.round() restituirà il valore 7.

const quantity = "6.5";

console.log(Math.round(quantity));

Conclusioni

In questo articolo, ti ho mostrato 11 modi per convertire una stringa in un numero usando JavaScript.

Qui sono elencati gli 11 differenti metodi discussi nell'articolo:

1. usare la funzione Number()
2. usare la funzione parseInt()
3. usare la funzione parseFloat()
4. usare l'operatore unario più (+)
5. moltiplicare la stringa per il numero 1
6. dividere la stringa per il numero 1
7. sottrarre il numero 0 dalla stringa
8. usare l'operatore NOT bit a bit (~)
9. usare la funzione Math.floor()
10. usare la funzione Math.ceil()
11. usare la funzione Math.round()

Spero che questo articolo ti sia piaciuto. Buona fortuna per il tuo viaggio nel mondo di JavaScript.

I tipi di dato ed il controllo di tipo di dato (type checking) sono aspetti fondamentali di ogni linguaggio di programmazione.

Molti linguaggi di programmazione, come Java, sono fortemente tipizzati. Questo significa che una variabile definita con uno specifico tipo può contenere esclusivamente un valore appartenente a tale tipo.

JavaScript, invece, è un linguaggio debolmente tipizzato o dinamicamente tipizzato. Questo significa che una variabile può contenere un valore di qualsiasi tipo. Anche il seguente codice JavaScript può essere eseguito:

let one = 1;
one = 'one';
one = true;
one = Boolean(true);
one = String('It is possible');

Tenendo questo in considerazione, diventa di importanza critica conoscere il tipo di una variabile in qualsiasi momento.

Il tipo di una variabile è determinato dal tipo di valore ad essa assegnato. JavaScript ha uno speciale operatore, denominato typeof, il quale ti permette di conoscere il tipo di qualsiasi valore.

In questo articolo, impareremo come viene utilizzato typeof, insieme ad alcuni tranelli da cui stare in guardia.

I tipi di dato in JavaScript

Diamo una rapida occhiata ai tipi di dato in JavaScript prima di analizzare meglio l'operatore typeof.

Ci sono sette tipi di dato primitivi in JavaScript. Un tipo di dato primitivo è qualsiasi cosa che non è un oggetto. Essi sono:

1. String (stringa di testo)
2. Number (numero floating-point in doppia precisione)
3. BigInt (numero intero di dimensione arbitraria)
4. Symbol (variabile particolare il cui valore è unico)
5. Boolean (variabile booleana)
6. undefined
7. null

Qualsiasi altra cosa è un oggetto (Object) -  array e funzioni compresi. Un oggetto è una raccolta di coppie chiave-valore.

L'operatore TypeOf di JavaScript

L'operatore typeof considera solo un operando (operatore unario). Valuta il tipo dell'operando e restituisce il risultato come una stringa.

typeof 007;  // restituisce 'number'

Esiste una sintassi alternativa per l'operatore  typeof, che può essere usato come una funzione:

typeof(operand)

Questa sintassi è utile quando vuoi valutare una espressione invece di un singolo valore. Ecco un esempio:

typeof(typeof 007); // restituisce 'string'

Nell'esempio qui sopra, l'espressione typeof 007 valuta come tipo di dato "number" e restituisce la stringa 'number'. typeof('number') quindi fornisce come risultato un tipo di dato 'string'.

Osserviamo un altro esempio  per comprendere l'importanza delle parentesi con l'operatore typeof.

typeof(999-3223); // restituisce, "number"

Se ometti le parentesi, l'espressione restituirà NaN("Not a Number"):

typeof 999-3223; // restituisce, NaN

Questo accade perché, in primo luogo, l'espressione typeof 999 darà come risultato una stringa, "number". Quindi l'espressione "number" - 32223 restituirà  NaN, come accade quando si esegue una operazione di sottrazione tra una stringa ed un numero.

Esempi di TypeOf in JavaScript

I seguenti snippet di codice mostrano il risultato del controllo di tipi di dato di differenti valori utilizzando l'operatore typeof.

typeof 0;  //'number'
typeof +0;  //'number'
typeof -0;  //'number'
typeof Math.sqrt(2);  //'number'
typeof Infinity;  //'number'
typeof NaN;  //'number', anche se risulta Not a Number
typeof Number('100');  //'number', dopo aver convertito la stringa '100' nel tipo Number
typeof Number('freeCodeCamp');  //'number', nonstante questa stringa letterale non possa essere convertita in Number

typeof true;  //'boolean'
typeof false;  //'boolean'
typeof Boolean(0);  //'boolean'

typeof 12n;  //'bigint'

typeof '';  //'string'
typeof 'freeCodeCamp';  //'string'
typeof `freeCodeCamp is awesome`;  //'string'
typeof '100';  //'string'
typeof String(100); //'string'

typeof Symbol();  //'symbol'
typeof Symbol('freeCodeCamp');  //'symbol'

typeof {blog: 'freeCodeCamp', author: 'Tapas A'};  //'object';
typeof ['This', 'is', 101]; //'object'
typeof new Date();  //'object'
typeof Array(4);  //'object'

typeof new Boolean(true);  //'object'; 
typeof new Number(101);  //'object'; 
typeof new String('freeCodeCamp');  //'object';
typeof new Object;  //'object'

typeof alert;  //'function'
typeof function () {}; //'function'
typeof (() => {});  //'function' - è una funzione a freccia, pertanto sono necessarie le parentesi
typeof Math.sqrt;  //'function'

let a;
typeof a;  //'undefined'
typeof b;  //'undefined'
typeof undefined;  //'undefined'

typeof null;  //'object'

La tavola seguente mostra i valori risultanti dal controllo di tipo forniti da typeof:

Tranelli comuni con typeof

Ci sono dei casi in cui l'operatore  typeof potrebbe non restituire i tipi che ci aspettiamo. Questo può causare confusione ed errori. Ecco alcuni casi:

Il tipo di NaN è Number (numero)

typeof NaN;  //'number', anche se è Not a Number (letteralmente Non un Numero)

Il risultato di typeof NaN è 'number', ovvero numero. Questo è strano, pertanto non dovremmo usare typeof per individuare un valore NaN. Ci sono modi migliori per gestire questa situazione. Li vedremo tra poco.

Il tipo di null è Object (oggetto)

  typeof null;  //'object'

In JavaScript,  typeof null restituisce object (oggetto), il che dà l'errata impressione che null sia un oggetto invece che un tipo di dato primitivo.

Il risultato di typeof null è effettivamente un bug nel linguaggio. C'è stato un tentativo di risolverlo in passato ma è stato abbandonato a causa di problemi di compatibilità con le versioni precedenti di JS.

Il tipo di una variabile non dichiarata è Undefined

Prima dello standard ES6, un controllo di tipo su una variabile non dichiarata forniva come risultato  'undefined'. Ma questo non è un modo sicuro per gestire tale situazione ed evitare errori.

Con lo standard ES6 possiamo dichiarare variabili con visibilità a livello di blocco (un blocco è un pezzo di codice delimitato da {}. La visibilità a livello di blocco significa che la variabile è visibile a tutto il codice inserito tra queste parentesi graffe) con le parole chiave let oppure const. Se utilizzi l'operatore typeof su tali variabili prima che siano inizializzate, otterrai un errore di tipo ReferenceError.

 typeof cat; // ReferenceError
 let cat = 'brownie'; 

Il tipo di una funzione costruttore è object - oggetto

Tutte le funzioni costruttore, ad eccezione del costruttore Function, saranno sempre classificate da typeof come 'object', ovvero oggetto.

typeof new String('freeCodeCamp'); //'object'

Questo può portare ad un po' di confusione, siccome ci si attende che l'operatore restituisca il tipo effettivo del dato (nel caso soprariportato, un tipo di dato string - stringa).

Il tipo di un array è un oggetto

Sebbene tecnicamente corretto, questo potrebbe essere il caso più spiacevole. Vogliamo differenziare tra un array ed un oggetto anche se un array è tecnicamente un oggetto in JavaScript.

typeof Array(4);  //'object'

Fortunatamente ci sono modi per rilevare un array correttamente. Li vedremo tra poco.

Oltre typeof – Un migliore controllo del tipo dei dati

Ora che abbiamo conosciuto alcune delle limitazioni che sorgono con l'impiego dell'operatore typeof, osserviamo come porvi rimedio ed implementare un controllo del tipo dei dati più efficace.

Come rilevare NaN

In JavaScript, NaN è un valore speciale. Il valore NaN rappresenta il risultato di una espressione aritmetica che non può essere effettivamente rappresentata. Per esempio:

let result = 0/0;
console.log(result);  // restituisce NaN

Inoltre, se eseguiamo una qualsiasi operazione aritmetica con NaN, questa fornirà sempre come risultato NaN.

console.log(NaN + 3); // restituisce NaN

Il controllo di tipo su NaN eseguito utilizzando l'operatore typeof non aiuta molto, poichè restituisce il tipo 'number', numero. JavaScript ha una funzione globale denominata isNaN() per verificare se un risultato è NaN.

isNaN(0/0); // restituisce true

Ma anche qui sorge un problema:

isNaN(undefined); // restituisce vero per 'undefined'

Nello standard ES6. il metodo isNaN() è aggiunto all'oggetto globale Number. Questo metodo è molto più affidabile e pertanto è quello preferito.

Number.isNaN(0/0); // restituisce true
Number.isNaN(undefined); // restituisce false

Un altro aspetto interessante di  NaN è che l'unico valore di JavaScript che non è mai uguale a nessun altro valore, incluso se stesso. Pertanto questo è un altro metodo per rilevare NaN dove lo standard ES6 non è supportato:

function isNaN (input) {
  return input !== input;
}

Come rilevare null in JavaScript

Abbiamo visto come rilevare null usando l'operatore typeof generi confusione. Il metodo preferito per verificare se qualche valore è uguale a null è utilizzare un operatore di uguaglianza stretta (===).

function isNull(input) {
 return input === null;
}

Accertati di non utilizzare l'operatore di uguaglianza generico == per errore. Usare  == al posto di  === fornirà un risultato fuorviante.

Come rilevare un array in JavaScript

Dall'introduzione dello standard ES6, possiamo rilevare un array utilizzando il metodo Array.isArray .

Array.isArray([]); // restituisce vero
Array.isArray({}); // restituisce falso

Prima di ES6, potevamo usare l'operatore instanceof  per identificare un array:

function isArray(input) {
  return input instanceof Array;
}

Una soluzione generale al controllo del tipo dei dati in JavaScript

Esiste un modo con cui possiamo creare una soluzione generale al problema del controllo del tipo dei dati. Diamo un occhiata al metodo Object.prototype.toString. Questo metodo è molto potente ed estremamente utile per implementare codice apposito per il controllo di tipo.

Quando Object.prototype.toString viene invocato utilizzando call() o apply(), questo restituisce il tipo dell'oggetto nel formato: [object Tipo]. La parte Tipo nel valore restituito costituisce il tipo di dato effettivamente ricercato.

Diamo un'occhiata a come funziona con qualche esempio:

// restituisce '[object Array]'
Object.prototype.toString.call([]); 

// restituisce '[object Date]'
Object.prototype.toString.call(new Date()); 

// restituisce '[object String]'
Object.prototype.toString.call(new String('freeCodeCamp'));

// restituisce '[object Boolean]'
Object.prototype.toString.call(new Boolean(true));

// restituisce '[object Null]'
Object.prototype.toString.call(null);

Questo significa che se prendiamo la stringa restituita ed estraiamo la parte Tipo, avremo il tipo di dato effettivo. Qui riporto un tentativo di implementare quanto appena detto:

function typeCheck(value) {
  const return_value = Object.prototype.toString.call(value);
  // possiamo usare anche le espressioni regolari per fare questo...
  const type = return_value.substring(
           return_value.indexOf(" ") + 1, 
           return_value.indexOf("]"));

  return type.toLowerCase();
}

Ora possiamo usare la funzione typeCheck per rilevare i tipi di dato:

typeCheck([]); // 'array'
typeCheck(new Date()); // 'date'
typeCheck(new String('freeCodeCamp')); // 'string'
typeCheck(new Boolean(true)); // 'boolean'
typeCheck(null); // 'null'

Riassumendo

Per riassumere quanto abbiamo imparato in questo articolo:

• In JavaScript il controllo del tipo dei dati non è così rigoroso come in altri linguaggi di programmazione.
• Utilizzo dell'operatore  typeof per rilevare i tipi di dato.
• Ci sono due varianti della sintassi per l'operatore typeof: typeof e typeof(espressione).
• Il risultato dell'operatore typeof può essere fuorviante a volte. In questi casi dobbiamo necessariamente affidarci ad altri metodi disponibili (Number.isNaN,  Array.isArray, e così via).
• Possiamo usare Object.prototype.toString per creare un metodo generico per il controllo del tipo di dato.

Prima di terminare...

Grazie per aver letto questo articolo! Connettiamoci! Puoi taggarmi nei commenti su Twitter (@tapasadhikary).

Potrebbero interessarti anche questi articoli:

• JavaScript undefined and null: Let's talk about it one last time! (inglese)
• JavaScript: Equality comparison with ==, === and Object.is (inglese)
• La Parola Chiave `this` in Javascript + 5 Regole Chiave di Binding Spiegate per Principianti di JS

È tutto per ora. Ci rivediamo con il mio prossimo articolo. A presto!

È possibile utilizzare JavaScript per controllare se la tua app è connessa ad internet?

In questo articolo, ti fornirò una risposta aggiornata a questa domanda.

La soluzione farà uso dell'API Fetch di Javascript e della programmazione asincrona con il costrutto Async & Await. Prima però, diamo un'occhiata ad un approccio comunemente accettato e vediamo perché potrebbe non essere la scelta migliore da implementare nella tua applicazione.

navigator.onLine

La proprietà "online" dell'interfaccia navigator, navigator.onLine, è utilizzata frequentemente per rilevare lo stato online/offline del browser.

Combinata con i listener per gli eventi online ed offline, sembra fornire agli sviluppatori una soluzione semplice e facile da implementare.

Diamo un'occhiata a come implementare navigator.onLine

Iniziamo aggiungendo un event listener all'evento "load". Quando l'evento "load" viene attivato, il listener controlla la proprietà "online" dell'interfaccia "navigator" e quindi mostra lo stato della connessione.

La proprietà "online" di navigator fornisce una risposta booleana (vero o falso). Per terminare l'azione del listener, utilizzeremo un operatore ternario per impostare il valore dell'elemento DOM che mostra lo stato della connessione.

window.addEventListener("load", (event) => {
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = navigator.onLine ? "Online" : "OFFline";
});

Ma perché la parola "navigator" (navigatore)? È un riferimento al browser Netscape Navigator in uso negli anni '90.

Posiziona un elemento h1 al centro nella tua pagina HTML con l'id "status".  Se applichi il codice JavaScript riportato qui sopra alla tua pagina, dovresti vedere comparire il testo "Online".

Tuttavia questo aggiorna solamente l'elemento h1 quando la pagina viene caricata. Proviamo ad aggiungere dei listener per gli eventi offline e online che aggiornano il display dello stato ogni volta che l'uno o l'altro evento viene attivato.

window.addEventListener("offline", (event) => {
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = "OFFline";
});

window.addEventListener("online", (event) => {
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = "Online";
});

Puoi andare alla scheda Applicazione degli strumenti Chrome per sviluppatori (Chrome Dev Tools > Application Tab )  e cliccare su ServiceWorker per impostare il browser in modo che risponda come se fosse offline.

Seleziona e deseleziona la checkbox Offline alcune volte. Dovresti vedere il display di stato rispondere immediatamente agli eventi offline e online che sono stati attivati.

Andiamo un po' più a fondo

A prima vista, quanto riportato sopra sembra una buona soluzione, oltre che abbastanza semplice. Sfortunatamente, se leggiamo qualcosa in più nella documentazione della proprietà "online" di navigator e sugli eventi online/offline, troviamo che c'è un problema.

Una ricerca di navigator.online su CanIUse.com mostra il supporto diffuso fornito dai browser alla proprietà per lo stato online | offline. Tuttavia, guardano alle note riportate sotto la tabella relativa al supporto nelle diverse versioni, possiamo leggere:

“Online non significa sempre connessione ad Internet. Può anche significare connessione a qualche rete”.

Mmh, questo ci mette un po' i bastoni tra le ruote.

Così, se volessi veramente determinare lo stato online del browser, dovresti sviluppare metodi addizionali per la questa verifica.

Diamo anche un'occhiata al riferimento sulla documentazione MDN per navigator.onLine.

“I browsers implementano questa proprietà in modo differente...non si può assumere che un valore true significhi necessariamente che il browser abbia accesso ad internet. Si potrebbe incorrere in falsi positivi...”

Questo conferma i nostri timori nell'utilizzare la proprietà online di navigator come soluzione per verificare la connessione Internet. È una soluzione che può devastare la nostra applicazione se questa dipende dalla conoscenza di quando delle sorgenti esterne di dati sono disponibili.

Uno di tali esempi è quando proviamo a determinare se una Web App Progressiva (Progressive Web App o PWA) sia online oppure no. MDN raccomanda persino,

“...se realmente si vuole determinare lo stato della connessione del browser, si dovrebbero sviluppare metodi addizionali di verifica.”

Una ricerca rapida nel web per "navigator online non funziona" (“navigator online not working”) fornisce diversi post nei forum di chi ha riscontrato problemi dipendendo da questa proprietà.

Allora, qual è la soluzione?

Ci serve sapere quando la nostra applicazione è realmente connessa a Internet e non solamente ad un router o una rete locale. Torniamo al nostro file JavaScript e ricominciamo da capo.

L'idea è fare una richiesta HTTP e trattarla elegantemente gestendo gli errori se questa fallisce. Se la richiesta ha successo, siamo online, mentre se fallisce, non lo siamo.

Richiederemo una piccola immagine a un intervallo temporale predefinito per determinare lo stato online. Il moderno linguaggio JavaScript fornisce l'API Fetch e la programmazione asincrona con il costrutto Async & Await. Utilizzeremo questi strumenti per portare a termine il nostro obiettivo.

La funzione checkOnlineStatus()

Iniziamo creando una funzione freccia asincrona denominata checkOnlineStatus. La funziona restituirà vero o falso come la proprietà online di navigator.

All'interno della funzione, impostiamo un blocco try dove attendiamo una richiesta fetch per una immagine da 1 pixel. Assicurati che il tuo service worker non stia salvando questa immagine nella cache.

Un codice di risposta HTTP tra 200 e 299 indica che la richiesta ha avuto successo, pertanto forniremo il risultato del confronto sul codice di stato. Questo sarà vero se lo stato della risposta è compreso tra 200 e 299 e falso per gli altri valori.

Inoltre dobbiamo fornire un blocco catch che intercetti l'errore se la richiesta fallisce. La funzione ritornerà falso all'interno del blocco catch per indicare che siamo veramente offline, qualora accadesse.

const checkOnlineStatus = async () => {
  try {
    const online = await fetch("/1pixel.png");
    return online.status >= 200 && online.status < 300; // può essere vera o falsa
  } catch (err) {
    return false; // sicuramente offline
  }
};

Come prossimo passo, utilizzeremo il metodo setInterval e lo passeremo ad una funziona async anonima. La funzione async attenderà il risultato della nostra funzione checkOnlineStatus. Utilizzeremo quindi un operatore ternario con tale risultato per mostrare lo stato corrente della connessione.

Per testare questo esempio, imposta l'intervallo temporale ad ogni 3 secondi (3'000 millisecondi). Ma così è troppo frequente. Controllare ogni 30 secondi (30'000 millisecondi) potrebbe essere sufficiente per le tue effettive necessità.

setInterval(async () => {
  const result = await checkOnlineStatus();
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = result ? "Online" : "OFFline";
}, 3000); // probabilmente troppo frequente, usa 30'000  per controllare ogni 30 secondi

Con il nostro nuovo codice salvato, torniamo alla scheda Application negli strumenti per sviluppatori di Chrome per testare la risposta quando siamo offline.

Ho quasi dimenticato di includere il listener dell'evento "load" con funzionalità asincrona! Il rilevamento dell'evento "load" è importante forse nell'unico caso in cui si abbia una Web App Progressiva che utilizzi un service worker per essere disponibile in modalità offline. In caso contrario, la tua pagina web o la tua web app semplicemente non viene caricata senza una connessione.

Ecco qui il nuovo listener dell'evento load:

window.addEventListener("load", async (event) => {
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = (await checkOnlineStatus())
    ? "Online"
    : "OFFline";
});

Una considerazione finale

Il codice riportato sopra con le richieste HTTP effettuate ad intervalli prestabiliti va bene per mostrare lo stato della connessione della tua App. Detto questo, non suggerisco di affidarsi ad uno stato di connessione che viene controllato 20 o 30 secondi prima di effettuare una richiesta di dati critica nella tua applicazione.

In questo caso, dovresti invocare la funzione checkOnlineStatus direttamente prima della richiesta e valutare la risposta prima di richiedere i dati.

const yourDataRequestFunction = async () => {
    const online = await checkOnlineStatus();
    if (online) {
    	// make data request
    }
}

Conclusioni

Anche se navigator.onLine è ampiamente supportato nei diversi browser, fornisce risultati inaffidabili quando è necessario determinare se la nostra applicazione è realmente connessa a Internet. Utilizzando l'API Fetch e la programmazione asincrona in Javascript, possiamo rapidamente programmare una soluzione più affidabile.

Qui c'è un link al code gist su GitHub, e qui c'è un video tutorial che ho realizzato (video in lingua originale):

La ricorsione è una tecnica usata per risolvere problemi computazionali attraverso una funzione che invoca sé stessa fino a quando il programma ottiene il risultato desiderato.

Questo tutorial ti consentirà di imparare cos'è ricorsione e quali sono le differenze rispetto ai più comuni loop.

Che cos'è la ricorsione?

Prendiamo come esempio una funzione che mostra nella console i numeri da 1 a 5. Ecco come possiamo scriverla usando la ricorsione:

function log(num){
    if(num > 5){
        return;
    }
    console.log(num);
    log(num + 1);
}

log(1);

Quando questo codice è eseguito, la funzione log continua a invocare sé stessa fino a quando il valore della variabile num è minore di 5.

Una funzione ricorsiva deve avere almeno una condizione che porti la funzione a smettere di invocarsi. Se la funzione continua a invocarsi, a un certo punto JavaScript darà errore.

La condizione che consente alla funzione ricorsiva di smettere di invocare sé stessa si chiama caso base. Nella funzione log sopra, il caso base e quando num è maggiore di 5.

Perché non usare un ciclo?

Qualsiasi problema che possiamo risolvere con una funzione ricorsiva può sempre essere risolto con una soluzione iterativa. L'esempio precedente può essere sostituito con questo codice:

for(let i = 1; i <= 5; i++){
    console.log(i);
}

I linguaggi di programmazione moderni come JavaScript possiedono istruzioni come for e while che forniscono alternative alle funzioni ricorsive. Tuttavia, esistono linguaggi come Clojure che non includono dichiarazioni di cicli, quindi in questi casi abbiamo bisogno di usare la ricorsione per ripetere parti del codice.

Inoltre, per usare un ciclo for è necessario sapere quante volte il codice dovrà essere ripetuto. Le funzioni ricorsive e il ciclo while invece possono essere usate per eseguire una parte di codice senza sapere quante volte sarà necessario ripeterlo. L'unica cosa che basta sapere è la condizione che fermerà l'esecuzione del codice.

Per esempio, immagina di dover risolvere questo problema:

• Scegli un numero a caso tra 1 e 10 fino a quando ottieni 5.
• Registra quante volte il codice è stato eseguito prima di ottenere 5.

Ecco la soluzione usando una funzione ricorsiva:

function randomUntilFive(result = 0, count = 0){
    if(result === 5){
        console.log(`Il risultato casuale: ${result}`);
        console.log(`Numero di esecuzioni del codice: ${count}`);
        return;
    }
    result = Math.floor(Math.random() * (10 - 1 + 1) + 1);
    count++;
    randomUntilFive(result, count);
}

randomUntilFive();

Non è possible sostituire il codice qui sopra con un ciclo for, ma è possibile farlo con un ciclo while:

let result = 0;
let count = 0;

while (result !== 5) {
  result = Math.floor(Math.random() * (10 - 1 + 1) + 1);
  count++;
}

console.log(`Il risultato casuale: ${result}`);
console.log(`Numero di esecuzioni del codice: ${count}`);

Ad esclusione dei colloqui di lavoro in cui ti può essere chiesto di risolvere un problema usando la ricorsione, puoi sempre trovare una soluzione alternativa che usa i cicli for o while.

Come leggere una funzione ricorsiva

Una funzione ricorsiva non è facile o intuitiva da capire a prima vista. I seguenti punti ti aiuteranno a leggere e capire una funzione ricorsiva velocemente.

1. Prima di tutto, identifica sempre qual è il caso base;
2. Passa argomenti nella funzione che raggiungono immediatamente il caso base;
3. Includi argomenti che consentiranno almeno una iterazione della funzione ricorsiva.

Proviamo a seguire questi passaggi usando l'esempio precedente di randomUntilFive(). Puoi identificare il caso base per questa funzione all'interno dell'istruzione if:

function randomUntilFive(result = 0, count = 0){
    if(result === 5){
        // il caso base è attivato
    }
    // la funzione è invocata ricorsivamente
}

randomUntilFive();

Questo significa che puoi raggiungere il caso base passando il numero 5 nel parametro result come segue:

function randomUntilFive(result = 0, count = 0){
    if(result === 5){
        console.log(`Il risultato casuale: ${result}`);
        console.log(`Numero di esecuzioni del codice: ${count}`);
        return;
    }
}

randomUntilFive(5);

Il parametro count non dovrebbe essere zero. Tuttavia, se passiamo il numero 5 come argomento della funzione sopra allora soddisfiamo il requisito del punto 2.

Infine, dobbiamo trovare un argomento che ci consenta di eseguire la funzione ricorsiva una volta. Nel caso qui sopra, possiamo passare qualsiasi numero tranne 5, oppure possiamo anche non passare alcun argomento:

function randomUntilFive(result = 0, count = 0){
    if(result === 5){
        console.log(`Il risultato casuale: ${result}`);
        console.log(`Numero di esecuzioni del codice: ${count}`);
        return;
    }
    result = Math.floor(Math.random() * (10 - 1 + 1) + 1);
    count++;
    randomUntilFive(result, count);
}

randomUntilFive(4); 
// qualsiasi numero diverso da 5
// eseguirà la ricorsione

Ecco fatto. Ora abbiamo capito che la funzione randomUntilFive() invocherà sé stessa ricorsivamente fino a quando il valore di result non sarà 5.

Come scrivere una funzione ricorsiva

Scrivere una funzione ricorsiva non è molto diverso da leggerne una.

1. Crea una funzione regolare con un caso base che può essere raggiunto con i suoi parametri;
2. Passa argomenti nella funzione che attivano immediatamente il caso base;
3. Passa argomenti che attivano la ricorsione una volta sola.

Prendiamo l'esempio di una funzione per il calcolo di fattoriali. Ecco il fattoriale di cinque:

5*4*3*2*1 = 120

Il caso base di questa funzione è uno, quindi creiamo una funzione factorial che restituisce uno:

function factorial(num){
    if(num === 1){
        return num;
    }
    
}

console.log(factorial(1));

Ora, andiamo al passo 3. Abbiamo bisogno di raggiungere la chiamata ricorsiva nella funzione e invocarla almeno una volta. Visto che il calcolo fattoriale diminuisce il numero di uno ad ogni moltiplicazione, possiamo simulare questo caso passando l'argomento num-1 nella chiamata ricorsiva:

function factorial(num){
    if(num === 1){
        return num;
    }
    return num * factorial(num-1) 
}

console.log(factorial(2));

Abbiamo finito. Puoi testare la funzione passando 5 come argomento:

console.log(factorial(5));

Conclusione

Abbiamo imparato che cos'è una funzione ricorsiva e quali sono le differenze tra questo tipo di funzione e le comuni istruzioni di ciclo for e while. Una funzione ricorsiva deve sempre avere almeno un caso base affinché eviti di invocare sé stessa all'infinito. In caso contrario, la funzione darà un errore.

Quando leggiamo una funzione ricorsiva, dobbiamo simulare una situazione dove il caso base è eseguito immediatamente senza eseguire la chiamata ricorsiva.

Quando abbiamo trovato il caso base, facciamo un passo indietro e proviamo a eseguire la chiamata ricorsiva almeno una volta. In questo modo, la tua mente percorrerà il codice ricorsivo e capirà intuitivamente come funziona.

Lo stesso vale per quando dobbiamo scrivere una funzione ricorsiva. È bene pensare sempre al caso base all'inizio, e poi includere un argomento nella funzione che faccia eseguire la chiamata ricorsiva almeno una volta. Dopo aver fatto questo, tutto il resto sarà facile.

Grazie per aver letto questo tutorial

Se questo articolo ti è piaciuto e vuoi migliorare le tue abilità in JavaScript, ti consiglio di leggere il mio nuovo libro Beginning Modern JavaScript qui.

Questo libro è pensato per essere facile da capire e accessibile per chiunque voglia imparare JavaScript. Le sue semplici guide passo-passo ti aiuteranno a capire come usare JavaScript per creare un'applicazione dinamica.

Ti prometto che capirai davvero cosa stai facendo con JavaScript.

Alla prossima!

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

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

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

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

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

Sommario

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

1 - Introduzione a Javascript

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

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

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

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

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

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

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

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

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

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

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

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

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

1.1 - Perché imparare JavaScript?

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

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

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

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

1.2 - JavaScript vs Java

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

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

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

2 - Come preparare il tuo computer

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

Il primo strumento da installare è Visual Studio Code

2.1 - Come installare VSCode

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

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

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

2.2 - Come installare Node.js

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

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

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

node -v

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

3 - Breve introduzione alla console

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

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

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

pwd

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

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

cd

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

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

cd nome_directory/nome_sotto_directory

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

cd ..

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

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

clear

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

cls

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

ls

Per il Prompt dei Comandi di Windows digita dir:

dir

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

touch index.js

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

type nul > index.js

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

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

mkdir mio_progetto

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

md mio_progetto

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

node index.js

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

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

Andiamo ora a eseguire il tuo primo programma JavaScript!

4 - È ora di dire Hello World!

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

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

# Per sistemi Linux e MacOs
touch index.js

rem Per sistemi Windows
type > nul index.js

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

console.log("Hello World!");

Ritorna alla console, ed esegui questo script con Node:

node index.js

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

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

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

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

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

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

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

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

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

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

5 - Struttura del codice

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

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

5.1 - Istruzioni

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

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

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

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

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

5.2 - Commenti

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

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

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

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

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

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

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

5.3 - Flusso di esecuzione

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

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

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

Risultato:

Hello World!
Sto imparando JavaScript
1
2
3

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

5.4 - Esercizio nr. 1

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

Il risultato dovrebbe assomigliare a questo:

Mario Rossi
19
Studente

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

6 - Variabili

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

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

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

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

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

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

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

let message = "Hello World!"

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

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

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

Esegui il file e vedrai due righe stampate come risultato:

Hello World!
Bel tempo oggi!

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

Successivamente, vedremo alcune regole per la denominazione delle variabili.

6.1 - Denominazione

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

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

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

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

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

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

1. camelCase
2. snake_case

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

let laMiaStupendaVariabile

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

let la_mia_stupenda_variabile

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

6.2 - Il tipo di variabile const

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

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

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

Quanto segue mostra come dichiarare 2 costanti in JavaScript:

const FILE_SIZE_LIMIT = 2000
const MAX_SPEED = 300

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

6.3 - Il tipo di variabile var

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

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

Per mostrarti cosa intendo, considera il seguente esempio:

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

console.log(name)

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

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

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

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

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

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

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

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

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

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

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

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

6.4 - Esercizio nr. 2

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

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

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

Mario Rossi
Studente
19

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

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

7 - Tipi di Dato Base

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

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

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

Bene, anche JavaScript la pensa allo stesso modo:

console.log(2 + 2);

// Risultato: 4

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

console.log(2 + "ABC");

Risultato:

2ABC

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

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

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

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

Iniziamo con le stringhe.

7.1 - Stringhe

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

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

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

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

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

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

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

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

// Risultato: Hello and Goodbye!

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

let message = "Ciao, Dave!";

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

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

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

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

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

// Risultato: John sta imparando JavaScript oggi

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

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

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

// Risultato: John sta imparando JavaScript oggi

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

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

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

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

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

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

// Risultato: 1030

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

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

7.2 - Numeri (interi e con virgola mobile)

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

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

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

let x = 1;
let y = 2;

console.log(x + y);

// Risultato: 3

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

let f = 1.2;
let z = 2.35;

console.log(f + z);

// Risultato: 3.55

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

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

7.3 - Booleani

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

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

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

let on = true;
let off = false;

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

7.4 - Undefined

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

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

let first_name;

console.log(first_name); // undefined

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

let last_name = undefined;

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

7.5 - Null

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

let first_name = null;

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

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

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

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

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

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

8 - Conversione di tipo e coercizione di tipo

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

8.1 - Coercizione di tipo

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

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

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

console.log(1 + "1");

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

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

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

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

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

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

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

8.1.1 - Regole della coercizione di tipo

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

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

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

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

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

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

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

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

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

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

8.1.2 - Perché dovresti evitare la coercizione di tipo

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

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

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

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

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

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

console.log(totalPrice);

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

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

Successivamente impareremo gli operatori JavaScript.

9 - Operatori

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

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

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

9.1 - Operatori Aritmetici

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

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

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

Ci sono in totale 8 operatori aritmetici in JavaScript:

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

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

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

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

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

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

9.2 - Operatori di assegnazione

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

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

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

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

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

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

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

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

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

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

Ora esaminiamo gli operatori di confronto.

9.3 - Operatori di confronto

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

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

Ecco alcuni esempi di utilizzo di questi operatori:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

9.4 - Operatori logici

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

JavaScript ha tre operatori logici:

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

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

Questi operatori logici seguono le leggi della logica matematica:

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

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

console.log(true && false);

console.log(false || false);

console.log(!true);

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

9.5 - Operatore typeof

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

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

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

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

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

9.6 - Esercizio nr. 3

Cerca di indovinare i risultati per queste operazioni:

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

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

10 - Array

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

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

Ecco come creare un elenco di stringhe:

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

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

Puoi anche dichiarare un array vuoto, senza elementi:

let birds = [];

Un array può anche contenere elementi di tipo diverso:

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

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

10.1 - Posizione dell'indice

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

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

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

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

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

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

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

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

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

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

Sostituiamo 'Parrot' con 'Vulture':

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

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

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

10 - 2 Metodi speciali per la manipolazione di array

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

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

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

birds.push('Sparrow');

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

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

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

birds.pop();

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

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

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

fishes.unshift('Sardine');

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

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

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

fishes.shift();

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

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

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

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

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

console.log(pos); // 2

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

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

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

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

Impareremo di più sugli oggetti prossimamente.

10.3 - Esercizio nr.  4

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

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

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

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

Il risultato dovrà essere il seguente:

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

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

11 - Flussi di controllo (condizionali)

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

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

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

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

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

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

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

Imparerai le istruzioni per i cicli nella successiva sezione.

11.1 - Istruzione if...else

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

La sintassi è la seguente:

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

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

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

let balance = 7000;

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

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

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

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

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

let balance = 7000;

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

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

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

let balance = 7000;

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

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

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

Ecco un esempio:

let balance = 7000;

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

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

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

Considera l'esempio seguente:

let balance = 7000;

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

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

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

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

11.2 - Istruzione switch...case

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

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

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

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

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

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

case "apple":

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

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

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

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

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

11.3 - Corpo dell'istruzione switch...case

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

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

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

Dai un'occhiata al seguente esempio:

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

Quando esegui il codice qui sopra, JavaScript stamperà:

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

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

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

Infine, puoi anche inserire espressioni come valori di case:

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

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

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

I seguenti blocchi case non funzioneranno nelle istruzioni switch:

let age = 5;

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

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

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

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

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

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

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

Ecco come puoi scriverlo:

let weekdayNumber = 1;

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

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

let weekdayNumber = 1;

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

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

let myFood = "Banana";

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

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

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

let myFood = "Banana";

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

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

11.5 - Esercizio nr. 5

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

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

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

Esempio dei possibili risultati a seconda del valore di giudizio:

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

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

12 - Flussi di controllo (cicli)

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

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

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

// e così via...

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

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

Esistono due istruzioni di ciclo utilizzate in JavaScript:

• L'istruzione for
• L'istruzione while

Impariamo come utilizzare queste istruzioni nella pratica.

12.1 - Istruzione for

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

12.2 - Quando usare un ciclo for

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

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

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

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

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

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

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

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

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

12.3 - Istruzione while

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

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

while (condizione) {
  istruzione;
}

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

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

let i = 0;

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

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

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

let i = 0;

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

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

12.4 - Quando usare un ciclo while

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

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

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

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

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

let flips = 0;
let isHeads = false;

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

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

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

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

12.5 - Esercizio nr. 6

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

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

Poi stampa una mezza piramide rovesciata, come segue:

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

13 - Funzioni

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

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

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

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

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

13.1 - Come creare la tua funzione

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

Ecco un esempio:

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

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

greet(); // Ciao!

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

13.2 - Parametri e argomenti della funzione

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

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

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

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

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

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

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

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

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

greet("Peter");

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

Esegui il codice e otterrai questo risultato:

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

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

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

greet("Nathan", "piovoso");

Risultato:

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

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

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

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

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

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

13.3 - Parametri predefiniti

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

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

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

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

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

greet();
greet("Jack");

Risultato:

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

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

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

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

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

greet("soleggiato");

Risultato:

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

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

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

Considera l'esempio seguente:

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

greet(undefined, "sunny");

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

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

13.4 - Parametri predefiniti e null

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

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

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

greet(undefined); // John

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

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

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

greet(null); // null

Questo è uno degli errori più comuni che commettono i principianti quando imparano JavaScript. Quando usi il valore null, JavaScript penserà che vuoi che quel valore sia vuoto, quindi non sostituisce il valore con il parametro predefinito.

Quando utilizzi undefined, JavaScript lo sostituirà con il parametro predefinito. Potresti riscontrare questo problema mentre lavori con il codice JavaScript nella tua carriera, quindi tienilo a mente.

13.5 - Istruzione return

Una funzione può anche avere un'istruzione return all'interno del blocco di codice. Un'istruzione return viene utilizzata per restituire un valore al chiamante.

Ad esempio, la seguente funzione restituisce la somma di due valori:

function sum(a, b) {
  return a + b;
}

let result = sum(3, 2);
console.log(result); // 5

Il valore restituito da una funzione può essere assegnato a una variabile per ulteriori operazioni. Puoi aggiungere l'istruzione return ovunque all'interno della funzione.

Quando JavaScript raggiunge l'istruzione return, salta l'ulteriore codice scritto all'interno del blocco funzione e torna al punto in cui chiami la funzione.

La seguente funzione ha due istruzioni return:

function checkAge(age) {
  if (age > 18) {
    return "Puoi prendere la patente";
  }
  return "Non puoi ancora prendere la patente";
}

console.log(checkAge(20));
console.log(checkAge(15));

Risultato:

Puoi prendere la patente
Non puoi ancora prendere la patente

Quando chiamiamo la funzione checkAge() la prima volta, il valore dell'argomento age (età) è maggiore di 18, quindi JavaScript esegue l'istruzione return all'interno del blocco if.

La seconda volta che abbiamo chiamato la funzione, la condizione if non è soddisfatta, quindi JavaScript esegue invece l'istruzione return sotto il blocco if.

Puoi anche interrompere l'esecuzione di una funzione e tornare al chiamante specificando l'istruzione return senza alcun valore:

function greet() {
  console.log("Ciao!");
  return;
  console.log("Arriverderci!!");
}

greet()

Risultato:

Ciao!

Qui, l'istruzione return viene invocata tra le chiamate delle funzioni console.log().

JavaScript esegue la prima chiamata di console.log(), quindi salta il resto del codice. La stringa 'Arrivederci!' non viene stampata.

13.6 - Ambito di una variabile

Ora che stai imparando le funzioni, è un buon momento per parlare dell'ambito di una variabile.

Una variabile dichiarata all'interno di una funzione è accessibile solo da quella funzione. Questo perché quella variabile ha un ambito locale.

D'altro canto, una variabile dichiarata al di fuori di qualsiasi blocco è nota come variabile globale a causa del suo ambito globale.

Questi due ambiti sono importanti perché quando provi ad accedere a una variabile locale al di fuori del suo ambito, riceverai un errore. Per esempio:

function greet() {
  let myString = "Hello World!";
}

greet();
console.log(myString);

Quando esegui il codice qui sopra JavaScript risponde con un errore, dicendo che la variabile myString non è definita:

ReferenceError: myString is not defined

Questo perché la variabile myString è dichiarata all'interno della funzione greet(), quindi non puoi accedere a quella variabile al di fuori di essa. Non importa anche se hai chiamato quella funzione prima di accedere alla variabile.

Viceversa, è possibile accedere a una variabile globale da qualsiasi punto, anche all'interno di una funzione:

let myString = "Hello World!";

function greet() {
  console.log(myString);
}

greet(); // Hello World!

Qui, la funzione greet() è in grado di accedere alla variabile myString dichiarata al di fuori della funzione.

Tieni presente che questo vale solo per le variabili dichiarate usando let e const.

Puoi anche definire una variabile locale con lo stesso nome della variabile globale senza sovrascriverla.

Ecco un esempio:

let myString = "Hello World!";

function greet() {
  let myString = "Morning!";
  console.log(myString);
}

greet();  // Morning!
console.log(myString); // Hello World!

Quando chiami la funzione greet(), alla variabile locale chiamata myString è stata assegnata la stringa 'Morning!'.

Al di fuori della funzione, la variabile globale anch'essa chiamata myString esiste ancora e il valore non viene modificato.

JavaScript considera la variabile di ambito locale come una variabile diversa. Quando dichiari la stessa variabile all'interno di una funzione, qualsiasi codice all'interno della funzione farà sempre riferimento alla variabile locale.

In pratica, raramente è necessario dichiarare una variabile con lo stesso nome in ambiti diversi:

• Qualsiasi variabile dichiarata all'esterno di una funzione non dovrebbe essere utilizzata all'interno di una funzione senza passarla come parametro.
• Una variabile dichiarata all'interno di una funzione non dovrebbe mai riferirsi al di fuori di tale funzione

Tienilo a mente quando scrivi funzioni JavaScript.

13.7 - Parametro rest

Il parametro rest è un parametro che può accettare qualsiasi numero di dati come argomenti. Gli argomenti verranno memorizzati come un array.

È possibile definire un parametro rest nell'intestazione della funzione aggiungendo tre punti ... prima del nome del parametro.

Ecco un esempio di creazione di una funzione che ha un argomento di lunghezza variabile:

function printArguments(...args){
    console.log(args);
}

Quando si chiama la funzione  printArguments() qui sopra, puoi specificare tanti argomenti quanti ne vuoi:

function printArguments(...args){
    console.log(args);
}

printArguments("A", "B", "C"); 
// [ 'A', 'B', 'C' ]
printArguments(1, 2, 3, 4, 5);
// [ 1, 2, 3, 4, 5 ]

Tieni presente che una funzione può avere solo un parametro rest e il parametro rest deve essere l'ultimo parametro nella funzione.

Puoi utilizzare un parametro rest quando la tua funzione deve lavorare con un numero indefinito di argomenti.

13.8 - Funzione freccia

La sintassi della funzione freccia consente di scrivere una funzione JavaScript con una sintassi più breve e concisa.

Quando è necessario creare una funzione, il metodo principale consiste nell'utilizzare la parola chiave function seguita dal nome della funzione come mostrato di seguito:

function greetings(name) {
  console.log(`Hello, ${name}!`);
}

greetings("John"); // Hello, John!

La sintassi della funzione freccia consente la creazione di una espressione funzione che produce lo stesso risultato del codice qui sopra.

Ecco la funzione greetings() riscritta usando la sintassi freccia:

const greetings = (name) => {
  console.log(`Hello, ${name}!`);
};

greetings("John"); // Hello, John!

Quando crei una funzione usando la sintassi freccia, devi assegnare l'espressione a una variabile in modo che la funzione abbia un nome.

Fondamentalmente, la sintassi della funzione freccia è la seguente:

const nomeFunzione = (param1, param2, ...) => {
  // corpo della funzione
}

Nella descrizione generica della funzione freccia qui sopra,

• nomeFunzione è il nome della variabile alla quale viene assegnata la funzione. Puoi chiamare la funzione successivamente nel tuo codice con nomeFunzione().
• (param1, param2, ...) sono i parametri della funzione. Puoi definire tanti parametri quanti sono necessari alla funzione.
• di seguito la freccia => che indica l'inizio della funzione.

Il codice qui sopra equivale a scrivere:

const nomeFunzione = function(param1, param2, ...) {
  // corpo della funzione
}

La sintassi della funzione freccia non aggiunge nuove capacità al linguaggio.

Viceversa offre un miglioramento nel modo nel quale scrivi una funzione in JavaScript.

Sulle prime potrebbe sembrare strano, se sei abituato a utilizzare la parola chiave function.

Ma quando inizi a usare la sintassi della freccia, vedrai che è molto comodo e più facile da scrivere.

13.9 - Funzioni freccia su singola riga o più righe

La funzione freccia ti fornisce un modo per scrivere una funzione su riga singola in cui il lato destro della freccia => viene restituito al lato sinistro.

Quando usi la parola chiave function, devi usare le parentesi graffe {} e la parola chiave return come segue:

function plusTwo(num) {
  return num + 2;
}

Usando la funzione freccia, puoi omettere sia le parentesi graffe che la parola chiave return, creando una funzione su una sola riga, come segue:

const plusTwo = (num) => num + 2;

Senza le parentesi graffe, JavaScript valuta l'espressione alla destra della freccia e la ritorna al chiamante.

La sintassi della funzione freccia va bene anche per funzioni che non ritornano un valore, come mostrato qui sotto:

const greetings = () => console.log("Hello World!");

Quando usi la sintassi della funzione freccia, le parentesi graffe sono richieste solo quando il corpo della funzione è composto da più righe:

const greetings = () => {
  console.log("Hello World!");
  console.log("How are you?");
};

13.10 Funzione freccia senza parentesi tonde

Le parentesi tonde () sono usate nelle funzioni  JavaScript per contenere i parametri che può ricevere la funzione.

Quando usi la parola chiave function , le parentesi tonde sono richieste:

function plusThree(num) {
  return num + 3;
}

La funzione freccia, viceversa, consente di omettere le parentesi tonde quando la funzione ha esattamente un solo parametro.

Questo codice di esempio è una espressione di funzione freccia valida:

const plusThree = num => num + 3;

Come puoi vedere si possono eliminare la parentesi tonde e graffe, così come la parola chiave return.

Devi tuttavia usare la parentesi tonde quando si verificano le seguenti condizioni:

• la funzione non ha parametri
• la funzione ha più di un parametro

Quando non hai parametri, devi usare le parentesi tonde, in questo modo:

const greetings = () => console.log("Hello World!");

Lo stesso vale se hai più di un parametro.

La funzione che segue ha due parametri: name e age.

const greetings = (name, age) => console.log("Hello World!");

La sintassi della funzione freccia rende le parentesi tonde opzionali quando hai una funzione con un solo parametro.

13.11 - La funzione freccia non ha associazione con arguments

Quando usi la parola chiave  function per definire una funzione, puoi accedere agli argomenti che riceve usando la parola chiave arguments, così:

const printArgs = function () {
  console.log(arguments);
};

printArgs(1, 2, 3);
// [Arguments] { '0': 1, '1': 2, '2': 3 }

Nel codice qui sopra, la parola chiave arguments fa riferimento all'oggetto che conserva tutti gli argomenti passati alla funzione.

Al contrario, la funzione freccia non ha l'oggetto arguments e darà errore quando tenti di accedervi:

const printArgs = () => console.log(arguments);

printArgs(1, 2, 3);
//Uncaught ReferenceError: arguments is not defined 
//Errore di riferimento non gestito: arguments non è definito

Puoi usare la sintassi JavaScript spread per imitare l'associazione con arguments come segue:

const printArgs = (...arguments) => console.log(arguments);

printArgs(1, 2, 3);
// [1, 2, 3]

Utilizzando la sintassi spread, gli argomenti passati alla funzione freccia verranno memorizzati in un array.

Nota che se usi la sintassi spread hai bisogno delle parentesi tonde anche se stai passando solo un argomento alla funzione.

È possibile accedere agli argomenti ricevuti con la notazione dell'indice dell'array come arguments[0], arguments[1] nell'esempio e così via.

13.12 - Convertire facilmente una funzione normale in  funzione freccia

Puoi seguire tre semplici passaggi per convertire una funzione normale in funzione freccia:

1. Sostituisci la parola chiave function con una dichiarazione di variabile let o const.
2. Aggiungi il simbolo = dopo il nome della funzione e prima delle parentesi tonde.
3. Aggiungi il simbolo => dopo le parentesi tonde.

Il codice qui sotto ti aiuterà a visualizzare i passaggi:

function plusTwo(num) {
  return num + 2;
}

// step 1: sostituisci function con let / const
const plusTwo(num) {
  return num + 2;
}

// step 2: aggiungi = dopo il nome della funzione
const plusTwo = (num) {
  return num + 2;
}

// step 3: aggiungi => dopo le parentesi tonde
const plusTwo = (num) => {
  return num + 2;
}

I tre passaggi precedenti sono sufficienti per convertire qualsiasi vecchia sintassi della funzione JavaScript nella nuova sintassi della funzione freccia.

Quando hai una funzione su riga singola, c'è un quarto passaggio facoltativo per rimuovere le parentesi graffe e la parola chiave return come segue:

// da così
const plusTwo = num => {
  return num + 2;
};

// a così
const plusTwo = num => num + 2;

Quando hai esattamente un solo parametro puoi anche rimuovere le parentesi tonde:

// da così
const plusTwo = (num) => num + 2;

// a così
const plusTwo = num => num + 2;

Tuttavia gli ultimi due passaggi sono opzionali. Solo i primi tre sono necessari per convertire qualunque funzione scritta con function e usare la sintassi della funzione freccia.

13.13 Esercizio nr. 7

Scrivi una funzione chiamata calcolaQuadrato() che viene utilizzata per calcolare l'area e il perimetro di una forma quadrata.

La funzione accetta un solo parametro (lato), che rappresenta il lato del quadrato.

La formula per calcolare l'area è  lato * lato e la formula per calcolare il perimetro è 4 * lato

Il risultato che mostra la dimensione del lato, l'area e il perimetro potrebbe essere come segue se l'argomento del parametro lato è 8:

Il lato del quadrato è 8
L'area del quadrato è 64
Il perimetro del quadrato è 32

14 - Oggetti

Un oggetto è un tipo di dato speciale che consente di memorizzare più di un valore, proprio come un array.

La differenza tra un oggetto e un array è che un array memorizza i dati come un elenco di elementi, mentre un oggetto memorizza i dati nel formato di coppia chiave:valore.

Vediamo un esempio che illustra questa differenza. Supponi di voler memorizzare informazioni su un libro nel tuo programma.

Usare variabili normali, sarebbe simile a questo:

let titoloLibro = "JavaScript Introduction";
let autoreLibro = "Nathan Sebhastian";

Questo va bene ma non è certo il modo migliore per memorizzare valori in relazione tra loro.

Un altro modo di conservare il valore sarebbe usare un array:

let mioLibro = ["JavaScript Introduction", "Nathan Sebhastian"];

Questo è certamente meglio in quanto puoi raggruppare i dati correlati, ma non hai modo di aggiungere contesto al valore.

Ecco quando torna utile un oggetto. Puoi dichiarare un oggetto che rappresenta un singolo libro e conservare i dati nel formato chiave:valore:

let mioLibro = {
  titolo: "JavaScript Introduction",
  autore: "Nathan Sebhastian",
};

Un oggetto viene dichiarato utilizzando le parentesi graffe {} e ogni elemento all'interno delle parentesi è scritto nel formato chiave:valore.

Un elemento di un oggetto è anche noto come proprietà, con la chiave che rappresenta il nome della proprietà e il valore il contenuto della proprietà.

Come un array, devi separare ogni elemento all'interno di un oggetto usando una virgola.

Puoi assegnare una stringa o numeri come chiave di un elemento e puoi assegnare qualsiasi tipo di dato come valore, inclusa una funzione:

let mioLibro = {
  titolo: "JavaScript Introduction",
  autore: "Nathan Sebhastian",
  descrizione: function () {
    console.log(`Titolo: ${this.titolo}`);
    console.log(`Autore: ${this.autore}`);
  },
};

Qui, la chiave descrizione è una funzione che stampa il valore di titolo e autore dall'oggetto.

La parola chiave this si riferisce al contesto del codice, che in questo caso è l'oggetto mioLibro.

Di solito, la chiave in un oggetto è qualcosa che fornisce più contesto al valore che contiene. Una chiave deve anche essere univoca, quindi non puoi usare la stessa chiave due volte nello stesso oggetto.

Ad esempio, se disponi di dati su un libro, puoi utilizzare chiavi come titolo, autore e prezzo per aiutarti a comprendere il contesto del valore memorizzato in ciascuna chiave.

14.1 - Accedere ai valori

Per accedere ai valori di un oggetto puoi utilizzare la notazione punto (.) oppure le parentesi quadre [].

Ecco un esempio di accesso alle proprietà di un oggetto usando la notazione punto:

let mioLibro = {
  titolo: "JavaScript Introduction",
  autore: "Nathan Sebhastian",
};

console.log(mioLibro.titolo);
console.log(mioLibro.autore);

Ecco come usare le parentesi quadre per accedere alle stesse proprietà:

let mioLibro = {
  titolo: "JavaScript Introduction",
  autore: "Nathan Sebhastian",
};

console.log(mioLibro["titolo"]);
console.log(mioLibro["autore"]);

Ricorda che devi racchiudere il nome della proprietà tra apici, come una stringa, altrimenti  JavaScript penserà che stai passando una variabile all'interno delle parentesi quadre.

14.2 - Aggiungere una nuova proprietà

Puoi aggiungere una nuova proprietà a un oggetto usando sia la notazione punto che le parentesi quadre, così:

let mioLibro = {
  titolo: "JavaScript Introduction",
  autore: "Nathan Sebhastian",
};

// aggiunge la proprietà anno di pubblicazione
mioLibro.anno = 2023;

// aggiunge la proprietà editore
mioLibro["editore"] = "CodeWithNathan";

console.log(mioLibro);

Quando stampi l'oggetto, ecco il risultato:

{
  titolo: 'JavaScript Introduction',
  autore: 'Nathan Sebhastian',
  anno: 2023,
  editore: 'CodeWithNathan'
}

Puoi aggiungere tante proprietà quante necessarie allo stesso oggetto.

14.3 - Modificare una proprietà

Per modificare una proprietà esistente, devi specificarla con la notazione punto o con le parentesi quadre, quindi aggiungere l'operatore di assegnazione e il nuovo valore, in questo modo:

let mioLibro = {
  titolo: "JavaScript Introduction",
  autore: "Nathan Sebhastian",
};

// modifica il valore della proprietà autore
mioLibro.autore = "John Doe";

console.log(mioLibro);

Risultato:

{
  titolo: 'JavaScript Introduction',
  autore: 'John Doe'
}

Come puoi vedere, il  valore della proprietà autore è stato modificato.

14.4 - Eliminare una proprietà

Per eliminare una proprietà da un oggetto devi usare delete in questo modo:

let mioLibro = {
  titolo: "JavaScript Introduction",
  autore: "Nathan Sebhastian",
};

delete mioLibro.autore;

console.log(mioLibro);

Risultato:

{ titolo: 'JavaScript Introduction' }

Quando cerchi di accedere alla proprietà cancellata (o a una proprietà che non esiste), otterrai il valore undefined.

14.5 Verificare se esiste una proprietà

Per verificare se una data proprietà esiste nel tuo oggetto puoi usare l'operatore in, così:

nomeProprietà in mioOggetto

L'operatore in ritorna true se nomeProprietà esiste nel tuo oggetto.

Di seguito un esempio:

let persona = {
  nomeProprio: "Nathan",
  cognome: "Sebhastian"
}

// verifica se esiste 'nomeProprio'
console.log('nomeProprio' in persona); // true

// verifica se esiste 'eta'
console.log('eta' in persona); // false

Ora sai come manipolare gli oggetti JavaScript.

14.6 - Esercizio nr. 8

Crea un oggetto persona con le seguenti proprietà:

• nome - nome della persona
• eta - età della persona
• saluto() - una funzione per salutare un'altra persona

All'interno della funzione saluto() introduci la persona, specificando nome ed età.

Ecco un esempio del risultato:

persona.saluto();

Ciao! Mi chiamo Alex e ho 22 anni.

15 - Esercizio finale: sviluppare un registratore di cassa

Sviluppiamo un registratore di cassa che può aggiungere elementi a un carrello della spesa, calcolare il prezzo totale, gli sconti e accettare il pagamento in contanti.

Ipotizziamo che la moneta sia il dollaro (USD) così che non lo dovrai specificare nel programma.

Il registratore di cassa ha 3 elementi in vendita:

• Un Telefono per 300
• Una Smart TV per 220
• Una Console di Gioco per 150

C'è il 10% di sconto quando il prezzo totale supera 400.

Il registratore di cassa dovrebbe avere un carrello della spesa all'inizio vuoto.

Il registratore di cassa dovrebbe fornire un metodo chiamato aggiungiArticolo che riceve il nome di un articolo come parametro. Quando chiamato, dovrebbe verificare se l'articolo risulta disponibile per la vendita. In questo caso l'articolo dovrebbe essere aggiunto al carrello della spesa. Se l'articolo non è disponibile, mostra un messaggio che dice che quell'articolo non viene venduto.

Il registratore di cassa dovrebbe fornire un metodo chiamato calcolaPrezzoTotale che somma il prezzo di tutti gli articoli nel carrello della spesa. Dovrebbe iterare sugli articoli presenti nel carrello e sommare i loro prezzi.

Il registratore di cassa dovrebbe fornire un metodo chiamato pagamento che ottiene l'importo ricevuto per il pagamento come parametro.

Dovrebbe poi calcolare il prezzo totale degli articoli nel carrello usando il metodo calcolaPrezzoTotale. Se il totale è maggiore di 400, deve applicare lo sconto del 10%.

Il metodo dovrebbe poi confrontare la somma ricevuta dall'utente per il pagamento con il totale dovuto e mostrare un messaggio appropriato:

• Se il totale pagato è uguale o maggiore del prezzo degli articoli dovrebbe mostrare un messaggio che ringrazia il cliente per l'acquisto. Se c'è del resto dovrebbe mostrarne l'ammontare.
• Se il totale pagato è minore del prezzo dovuto, dovrebbe visualizzare un messaggio che indica che il cliente non ha abbastanza denaro per pagare gli articoli acquistati.
• Il programma dovrebbe includere delle istruzioni console.log() appropriate per stampare dei messaggi quando vengono aggiunti articoli al carrello, per visualizzare il prezzo totale e per elaborare il pagamento.

Il programma dovrebbe gestire situazioni nelle quali il cliente paga esattamente il dovuto, quando il pagamento è minore del dovuto e quando pagamento è maggiore del dovuto.

Per sviluppare il programma devi sfruttare quello che hai imparato sugli oggetti, gli array i flussi condizionali e i cicli.

Ti consiglio di provare prima a sviluppare da solo il programma. Se non sai come proseguire allora verifica la soluzione fornita alla fine dell'articolo. Buona fortuna!

16 - Conclusione

Congratulazioni per aver terminato la lettura di questo manuale! Abbiamo esaminato insieme molti concetti per imparare a programmare utilizzando JavaScript.

Spero che ti sia piaciuto leggerlo tanto quanto io mi sono divertito a scriverlo. Mi piacerebbe ricevere il tuo feedback, sapere cosa ti è piaciuto e cosa no, così posso migliorare il tutorial.

Se vuoi saperne di più su JavaScript, sto creando un corso che ti aiuta a utilizzare JavaScript per creare applicazioni web. È attualmente in un periodo di pre-ordinazione, quindi puoi ottenere il corso a un prezzo inferiore e supportare il mio lavoro nella creazione di altri tutorial. Puoi ricevere informazioni qui.

17 - Soluzioni

Esercizio nr. 1

console.log("Il tuo nome dovrebbe essere qui");
console.log("La tua età dovrebbe essere qui");
console.log("La tua occupazione dovrebbe essere qui");

Esercizio nr. 2

let nome = "Il tuo nome dovrebbe essere qui";
let eta = "La tua età dovrebbe essere qui";
let occupazione = "La tua occupazione dovrebbe essere qui";

console.log(nome);
console.log(eta);
console.log(occupazione);

Esercizio nr. 3

1
false
true
true
true
false

Esercizio nr. 4

let colori = ["rosso", "verde", "blu"];

colori.push("nero");
console.log(colori);

colori.shift();
colori[0] = "blu";
colori[1] = "verde";
console.log(colori);

colori.unshift("giallo");
console.log(colori);

Esercizio nr. 5

Usando l'istruzione if...else :

let giudizio = "D";

if (giudizio === "A") {
  console.log("Hai ottenuto una A, eccoti del cioccolato");
} else if (giudizio === "B") {
  console.log("Hai ottenuto una B, eccoti un biscotto!");
} else if (giudizio === "C") {
  console.log(
    "Hai ottenuto una C, c'è spazio per migliorare, eccoti una caramella!"
  );
} else {
  console.log("Nessun premio da dare");
}

Usando l'istruzione switch...case

let giudizio = "C";
switch (giudizio) {
  case "A":
    console.log("Hai ottenuto una A, eccoti del cioccolato");   
    break;
  case "B":
    console.log("Hai ottenuto una B, eccoti un biscotto!");
    break;
  case "C":
    console.log(
      "Hai ottenuto una C, c'è spazio per migliorare, eccoti una caramella!"  
   );
    break;
  default:
    console.log("Nessun premio da dare");

}

Esercizio nr. 6

Modello della mezza piramide:

let pattern;

for (let i = 1; i <= 5; i++) {
  pattern = "";
  for (let j = 1; j <= i; j++) {
    pattern += "*";
  }
  console.log(pattern);
}

Modello della mezza piramide invertita:

for (let i = 4; i >= 0; i--) {
  pattern = "";
  for (let j = 0; j <= i; j++) {
    pattern += "*";
  }
  console.log(pattern);
}

Esercizio nr. 7

function calcolaQuadrato(lato) {
  console.log(`Il lato del quadrato è ${lato}`);
  console.log(`L'area del quadrato è ${lato * lato}`);
  console.log(`Il perimetro del quadrato è ${4 * lato}`);
}

calcolaQuadrato(7);

Esercizio nr. 8

const persona = {
  nome: "Alex",
  eta: 22,
  saluto: function () {
    console.log(
      `Ciao! Mi chiamo ${this.nome} e ho ${this.age} anni.`
    );
  },
};

persona.saluto();

Esercizio finale

Crea un file chiamato registratoreDiCassa.js e inserisci il seguente codice:

const registratoreDiCassa = {
  articoliInVendita: [
    { nome: "Telefono", prezzo: 300 },
    { nome: "Smart TV", prezzo: 220 },
    { nome: "Console di Gioco", prezzo: 150 },
  ],
  carrelloSpesa: [],
  aggiungiArticolo: function (nome) {
    let articoloTrovato = this.articoliInVendita.find(function (articolo) {
      return articolo.nome === nome;
    });
    if (articoloTrovato) {
      this.carrelloSpesa.push(articoloTrovato);
      console.log(`Aggiunto ${nome} al tuo carrello della spesa`);
    } else {
      console.log(`Mi dispiace, non vendiamo ${nome} qui!`);
    }
  },
  calcolaPrezzoTotale: function () {
    let prezzoTotale = 0;
    this.carrelloSpesa.forEach(function (articoloAcquistato) {
      prezzoTotale += articoloAcquistato.prezzo;
    });
    return prezzoTotale;
  },
  pagamento: function (pagato) {
    let prezzoTotale = this.calcolaPrezzoTotale();
    if (prezzoTotale > 400) {
      prezzoTotale -= prezzoTotale * 0.1;
      console.log(
        `Hai il 10% di sconto e il tuo prezzo da pagare è ${prezzoTotale}`
      );
    }
    if (pagato >= prezzoTotale) {
      if (pagato - prezzoTotale > 0) {
        console.log(`Ecco il tuo resto ${amount - prezzoTotale}`);
      }
      console.log(`Grazie per l'acquisto! Speriamo di averti di nuovo qui!`);
    } else {
      console.log(
        "Spiacenti, non non hai abbastanza denaro per acquistare gli articoli nel carrello"
      );
    }
  },
};

Per verificare il programma, aggiungi le righe seguenti alla fine del file registratoreDiCassa.js:

registratoreDiCassa.aggiungiArticolo("Telefono");
registratoreDiCassa.aggiungiArticolo("Smart TV");
console.log(registratoreDiCassa.calcolaPrezzoTotale());
registratoreDiCassa.pagamento(700);

Quando esegui il programma con node registratoreDiCassa.js dovresti ottenere questo risultato:

Aggiunto Telefono al tuo carrello della spesa
Aggiunto Smart TV al tuo carrello della spesa
520
Hai il 10% di sconto e il tuo prezzo da pagare è 468
Ecco il tuo resto 232
Grazie per l'acquisto! Speriamo di averti di nuovo qui!

Grazie per la lettura!

La parola chiave di JavaScript this è uno degli aspetti del linguaggio più difficili da comprendere. Tuttavia è di importanza critica per la scrittura di codice JavaScript più avanzato.

In JavaScript, la parola chiave this ci consente di:

• Riutilizzare funzioni in diversi contesti di esecuzione. Vale a dire che una funzione, una volta definita, può essere chiamata per oggetti diversi usando la parola chiave this.
• Identificare l'oggetto nel contesto di esecuzione corrente quando chiamiamo un metodo.

La parola chiave this è strettamente associata  alle funzioni JavaScript. Quando si parla di this, la cosa fondamentale è capire dove viene chiamata una funzione, poiché non sappiamo a cosa si riferisca la parola chiave this fino a quando la funzione non viene invocata.

L'uso di  this può essere categorizzato in cinque diversi aspetti di binding (associazione). In questo articolo, esamineremo tutti e cinque gli aspetti con degli esempi.

Innanzitutto, Cos'è il Binding?

In JavaScript, un ambiente lessicale è il posto in cui viene fisicamente scritto il codice. Nell'esempio qui sotto, la variabile name dal punto di vista lessicale è all'interno della funzione sayName().

function sayName() {
  let name = 'someName';
  console.log('Il nome è, ', name);
 }

Un contesto di esecuzione fa riferimento al codice attualmente in esecuzione e tutto ciò che contribuisce a eseguirlo. Possono esserci molti ambienti lessicali a disposizione ma quello che è attualmente in esecuzione viene gestito dal contesto di esecuzione.

Ciascun contesto di esecuzione contiene un record di ambiente. Quando il motore JavaScript esegue il codice, variabili e nomi di funzioni vengono aggiunti al record di ambiente.

Questo fenomeno è noto in JavaScript come binding. Il binding aiuta l'associazione degli identificatori (variabili e nomi di funzioni) con la parola chiave this per costituire un contesto di esecuzione.

Non preoccuparti se trovi questo concetto difficile da capire adesso. Ne avrai una migliore comprensione mano a mano che procediamo.

Regola #1: Come Funziona il Binding Implicito di JavaScript

Il binding implicito copre la maggior parte dei casi d'uso per quanto riguarda la parola chiave this.

Quando invochiamo un metodo di un oggetto, usiamo la notazione punto (.) per accedervi. Nel binding implicito, devi verificare l'oggetto adiacente al metodo in fase di invocazione. Questo determina a cosa viene associato this.

Esaminiamo un esempio per capire meglio.

let blog = {
    name: 'Tapas',
    address: 'freecodecamp',
    message: function() {
        console.log(`${this.name} ha un blog su ${this.address}`);
    }
};

blog.message();

Qui this viene associato all'oggetto blog. Lo sappiamo perché chiamiamo il metodo message() sull'oggetto blog. Pertanto this.name sarà Tapas e this.address sarà  freeCodeCamp e tali valori verranno stampati nella console.

Vediamo un altro esempio per capire meglio questo concetto:

 function greeting(obj) {
      obj.logMessage = function() {
          console.log(`${this.name} ha ${this.age} anni!`);
      }
  };

  const tom = {
      name: 'Tom',
      age: 7
  };

  const jerry = {
      name: 'jerry',
      age: 3
  };

  greeting(tom);
  greeting(jerry);

  tom.logMessage ();
  jerry.logMessage ();

In questo esempio abbiamo due oggetti,  tom e jerry. Abbiamo decorato (arricchito) questi oggetti con un metodo chiamato logMessage().

Nota che quando invochiamo tom.logMessage(), il metodo viene chiamato sull'oggetto tom. Pertanto this è associato all'oggetto tom e i valori stampati saranno tom e 7 (this.name equivale a tom e this.age in questo caso è  7). Lo stesso vale quando viene invocato jerry.logMessage().

Regola #2: Come Funziona In JavaScript il Binding Esplicito

Abbiamo visto che JavaScript crea un ambiente per eseguire il codice che scriviamo. Si occupa della creazione in memoria di variabili, funzioni, oggetti e così via nella fase di creazione. Successivamente esegue il codice nella fase di esecuzione. Questo ambiente speciale viene chiamato contesto di esecuzione.

Possono essercene molti di questi ambienti (contesti di esecuzione) in un'applicazione JavaScript. Ogni contesto di esecuzione opera indipendentemente dagli altri.

A volte, tuttavia, potremmo voler usare cose che si trovano in un altro contesto di esecuzione. Ecco quando entra in gioco il binding esplicito.

Nel binding esplicito chiamiamo una funzione con un oggetto quando la funzione è al di fuori del contesto di esecuzione di quell'oggetto.

Ci sono tre metodi molto speciali:  call(), apply() e bind() che ci aiutano a ottenere il binding esplicito.

Come Funziona il Metodo call() di JavaScript

Con il metodo call(), il contesto nel quale la funzione deve essere chiamata verrà passato come parametro a  call(). Vediamo come funziona con un esempio:

let getName = function() {
     console.log(this.name);
 }
 
let user = {
   name: 'Tapas',
   address: 'Freecodecamp'  
 };

getName.call(user);

Qui sopra il metodo call() viene invocato su una funzione chiamata getName(). La funzione getName() stampa semplicemente alla console il valore di this.name. Ma cosa rappresenta this qui? Questo dipende da cosa è stato passato al metodo call().

In questo caso this sarà associato all'oggetto user, in quanto lo abbiamo passato come parametro al metodo call(). Pertanto this.name dovrebbe avere il valore associato alla proprietà name dell'oggetto user, vale a dire Tapas.

Nell'esempio qui sopra abbiamo passato solo un argomento a call(). Tuttavia  possiamo passare molteplici argomenti a call(), in questo modo:

let getName = function(hobby1, hobby2) {
     console.log('A ' + this.name + ' piace ' + hobby1 + ' , ' + hobby2);
 }

let user = {
   name: 'Tapas',
   address: 'Bangalore'  
 };

let hobbies = ['Nuotare', 'Tenere un Blog'];
 
getName.call(user, hobbies[0], hobbies[1]);

Qui abbiamo passato diversi argomenti al metodo call(). Il primo argomento deve essere il contesto dell'oggetto nel quale la funzione deve essere chiamata. Gli altri parametri potrebbero essere semplicemente valori da usare.

In questo caso sto passando Nuotare e Tenere un Blog come due parametri della funzione getName().

Hai notato il punto dolente qui? Nel caso di call(), gli argomenti devono essere passati uno ad uno  – il che non è un modo intelligente di fare le cose!. Ecco quando il nostro prossimo metodo, apply(), entra in  gioco.

Come Funziona il Metodo apply() in JavaScript

Questo modo di passare argomenti al metodo call() può essere risolto usando un metodo alternativo chiamato apply(). Funziona esattamente come call(), ma ti consente di passare gli argomenti in modo più conveniente. Dai un'occhiata a questo codice:

let getName = function(hobby1, hobby2) {
     console.log('A ' + this.name + ' piace ' + hobby1 + ' , ' + hobby2);
 }
 
let user = {
   name: 'Tapas',
   address: 'Bangalore'  
 };

let hobbies = ['Nuotare', 'Tenere un Blog'];
 
getName.apply(user, hobbies);

Qui siamo in grado di passare un array di argomenti, il che è molto più conveniente rispetto al passarli ad uno ad uno.

Suggerimento: Quando hai solo uno o nessun valore di argomento da passare, usa call(). Quando hai diversi valori di argomento, usa apply().

Come Funziona il Metodo bind() di JavaScript

Il metodo bind() è simile al metodo call(), con una differenza: diversamente da call(), che chiama la funzione direttamente,  bind() ritorna una funzione completamente nuova che possiamo invocare.

let getName = function(hobby1, hobby2) {
     console.log('A ' + this.name + ' piace ' + hobby1 + ' , ' + hobby2);
 }

let user = {
   name: 'Tapas',
   address: 'Bangalore'  
 };

let hobbies = ['Nuotare', 'Tenere un Blog'];
let newFn = getName.bind(user, hobbies[0], hobbies[1]); 

newFn();

Qui getName.bind() non chiama la funzione getName() direttamente. Ritorna una nuova funzione, newFn che possiamo invocare come newFn().

Rule #3: Il Binding new di JavaScript

La parola chiave new è usata per creare un oggetto dalla funzione costruttore.

let Cartoon = function(name, character) {
     this.name = name;
     this.character = character;
     this.log = function() {
         console.log(this.name +  ' è un ' + this.character);
     }
 };

Puoi creare oggetti usando la parola chiave new in questo modo:

 let tom = new Cartoon('Tom', 'Gatto');
 let jerry = new Cartoon('Jerry', 'Topo');

Quando una funzione viene invocata con la parola chiave new, JavaScript crea un oggetto this interno (così: this = {}) nella funzione. Il this appena creato si associa all'oggetto in fase di creazione usando la parola chiave new.

Sembra complicato? Ok, esaminiamolo approfonditamente. Osserva questa riga:

let tom = new Cartoon('Tom', 'Gatto');

Qui la funzione Cartoon viene invocata con la parola chiave new . Quindi il this creato internamente sarà associato al nuovo oggetto creato qui, che è tom.

Regola #4: Binding dell'Oggetto Globale di JavaScript

Quale pensi che sarà il risultato del codice qui sotto? A cosa è associato this qui?

let sayName = function(name) {
    console.log(this.name);
};

window.name = 'Tapas';
sayName();

Se la parola chiave this non viene risolta con alcuno dei binding, implicito, esplicito o new, allora this viene associata all'oggetto globale window() .

Esiste un'eccezione, tuttavia, la modalità strict (strict mode) di JavaScript non consente questo binding predefinito.

"use strict";
function myFunction() {
  return this;
}

Nell'esempio qui sopra,  this è undefined.

Regola #5: Binding di un Evento HTML in JavaScript

Nei gestori di eventi HTML, this viene associato all'elemento HTML che riceve l'evento.

<button onclick="console.log(this)">Click Me!</button>

Questo è il risultato nella console del click sul pulsante:

"<button onclick='console.log(this)'>Click Me!</button>"

Puoi cambiare lo stile del pulsante al click dell'utente usando la parola chiave this, in questo modo:

<button onclick="this.style.color='teal'">Click Me!</button>

Tuttavia, fai attenzione quando chiami una funzione per gestire un clic del pulsante e usi this all'interno di quella funzione; ipotizziamo questo codice HTML.

<button onclick="changeColor()">Click Me!</button>

e questo codice JavaScript:

function changeColor() {
  this.style.color='teal';
}

Quanto sopra non funzionerà come atteso. Come abbiamo visto nella regola  4, in questo caso this sarà associato all'oggetto globale (in modalità non strict), laddove non esiste un oggetto style con il quale impostare il colore.

Riepilogo

Per riassumere,

• In caso di binding implicito,  this viene associato all'oggetto adiacente all'operatore punto (.) quando si invoca il metodo.
• In caso di binding esplicito, possiamo chiamare una funzione con un oggetto quando la funzione è al di fuori del contesto di esecuzione dell'oggetto stesso. I metodi call(), apply(), e bind() giocano un grosso ruolo qui.
• Quando una funzione viene chiamata con la parola chiave new, la parola chiave this all'interno della funzione si associa al nuovo oggetto che si sta costruendo.
• Quando la parola chiave  this non è risolta con alcuna dei binding, implicito, esplicito o new, allora this viene associato all'oggetto globale window(). Nella modalità strict di JavaScript, this sarà undefined.
• Nei gestori di evento HTML,  this viene associato all'elemento HTML che riceve l'evento.

C'è un ulteriore caso nel quale  this si comporta in modo differente, vale a dire le funzioni freccia E6. Daremo uno sguardo a questo caso in un articolo successivo.

Spero che tu abbia trovato utile questo articolo. Ti potrebbero anche piacere:

• JavaScript Hoisting Internals
• Understanding JavaScript Execution Context like never before
• JavaScript Scope Fundamentals with Tom and Jerry
• Understanding JavaScript Closure with example

Se hai apprezzato questo articolo, condividilo in modo che altri lo possano leggere. Puoi menzionarmi su Twitter (@tapasadhikary) nei tuoi commenti, oppure sentiti libero di seguirmi.

Lavorando con gli oggetti in JavaScript, potresti esserti imbattuto nell'output [object, object]. Potrebbe sembrare irrilevante, ma non è necessariamente un  errore.

[object, object] è la rappresentazione in formato stringa di un oggetto in JavaScript. Capirai meglio continuando a leggere questo articolo.

Ci sono due situazioni principali in cui incontrerai un output del genere:

• Provando a mostrare un oggetto usando il metodo alert() (il più comune).
• Usando il metodo toString() su un oggetto.

Diamo un'occhiata a qualche esempio.

Cosa accade se usi alert() su un oggetto in JavaScript?

In questa sezione vedrai cosa accade quando usi il metodo alert() per mostrare un oggetto in JavaScript. Ecco il codice di esempio:

const student = {
  name: "John",
  school: "freeCodeCamp",
};

alert(student)

Nel codice qui sopra, abbiamo creato un oggetto chiamato student. Dopo aver usato il metodo alert() per mostrare l'oggetto nel browser, otteniamo il seguente output:

Invece di visualizzare l'oggetto con le sue proprietà, vediamo [object, object].

Questo accade perché quando utilizzi il metodo alert() per mostrare un oggetto in JavaScript, viene visualizzato in formato stringa.

Per ovviare a questo problema puoi usare il metodo JSON.stringify(), così da trasformare l'oggetto in una stringa che può essere mostrata  nel browser con il metodo alert(). Ecco un esempio:

const student = {
  name: "John",
  school: "freeCodeCamp",
};

alert(JSON.stringify(student));

Quando esegui il codice qui sopra, dovresti visualizzare l'oggetto con le sue proprietà – come nell'immagine seguente.

Cosa accade se usi il metodo toString() su un oggetto in JavaScript?

Il metodo toString() in JavaScript restituisce la rappresentazione in formato stringa di un oggetto. Questa sezione ti aiuterà a capire cosa è accaduto dietro le quinte nella sezione precedente.

Quando usi il metodo toString() su un oggetto in JavaScript, viene restituita la rappresentazione – [object, object].

const student = {
  name: "John",
  school: "freeCodeCamp",
};

console.log(student.toString());
// [object Object]

Come puoi vedere nel codice qui sopra, abbiamo usato il metodo toString() su un oggetto chiamato student: student.toString().

Quando lo stampiamo sulla console, otteniamo [object, object].

Questo è esattamente quelle che avviene quando mostri un oggetto nel browser usando il metodo alert() (come abbiamo visto nella sezione precedente).

Conclusione

In questo articolo, abbiamo parlato dello strano output [object, object] in JavaScript.

Questo output è la rappresentazione in formato stringa di un oggetto in JavaScript.

Probabilmente ti capiterà di vedere un output del genere quando provi a mostrare un oggetto nel browser usando il metodo alert() oppure quando usi il metodo toString() su un oggetto.

Abbiamo anche analizzato alcuni esempi di codice e immagini per dimostrare come puoi vedere [object, object] in JavaScript.

Buona programmazione!

Vuoi imparare JavaScript? Scarica il mio ebook su jshandbook.com

Introduzione alle espressioni regolari

Un'espressione regolare (anche detta regex) è un modo rapido per lavorare con le stringhe di testo.

Creando un'espressione regolare con una sintassi speciale puoi:

• cercare un testo in una stringa
• sostituire del testo in una stringa
• ed estrarre informazioni da una stringa

Quasi ogni linguaggio di programmazione presenta una qualche implementazione delle espressioni regolari. Esistono piccole differenze tra ogni implementazione, ma i concetti generali si applicano quasi ovunque.

Le espressioni regolari risalgono agli anni '50 del Novecento, quando vennero formalizzate come modello di ricerca concettuale per gli algoritmi di elaborazione di stringhe.

Implementate in strumenti UNIX come grep, sed e in editor di testo comuni, le espressioni regolari crebbero in popolarità. Vennero introdotte nel linguaggio di programmazione Perl e, successivamente, anche in altri linguaggi.

JavaScript, insieme a Perl, è uno dei linguaggi di programmazione che comprende il supporto per le espressioni regolari direttamente integrato nel linguaggio.

Difficili ma utili

Se non si impiega il tempo necessario per comprenderle, le espressioni regolari possono sembrare totalmente insensate per un principiante e, molte volte, anche per uno sviluppatore professionista.

Espressioni regolari criptiche sono difficili da scrivere, difficili da leggere e difficili da modificare/manutenere.

Ma delle volte un'espressione regolare è il solo modo sensato per manipolare delle stringhe, quindi è uno strumento di grande valore in tuo possesso.

Questo tutorial mira a introdurti alle espressioni regolari in JavaScript in un modo semplice e a darti tutte le informazioni per leggere e creare espressioni regolari.

La regola generale è che più semplici sono le espressioni regolari e più è semplice leggerle e scriverle, mentre le espressioni regolari complesse possono diventare velocemente un pasticcio se non afferri appieno le basi.

Che aspetto ha un'espressione regolare?

In JavaScript, un'espressione regolare è un oggetto che può essere definito in due modi.

Il primo è istanziare un nuovo oggetto usando il costruttore RegEx:

const re1 = new RegExp('hey')

Il secondo è usare un'espressione regolare letterale:

const re1 = /hey/

Sai che JavaScript ha oggetti e array letterali? Ha anche espressioni regolari letterali.

Nell'esempio precedente, hey è detto pattern. Nella forma letterale è delimitato da barre oblique, mentre non lo è all'interno del costruttore.

Questa è la prima importante differenza tra le due forme, ma ne vedremo altre in seguito.

Come funziona?

L'espressione regolare che abbiamo precedentemente definito come re1 è molto semplice. Cerca la stringa hey, senza alcuna limitazione. La stringa può contenere molto testo e hey nel mezzo e l'espressione è soddisfatta. Può anche contenere solo hey e anche in questo caso l'espressione è soddisfatta.

Piuttosto semplice.

Puoi testare un'espressione regolare usando RegExp.test(String), che restituisce un booleano:

re1.test('hey') //✅
re1.test('blablabla hey blablabla') //✅
re1.test('he') //❌
re1.test('blablabla') //❌

Nell'esempio qui sopra, abbiamo verificato se "hey" soddisfa il pattern dell'espressione regolare memorizzata in re1.

Questo è il caso più semplice, ma adesso conosci già molti concetti sulle espressioni regolari.

Ancoraggi

/hey/

indica hey in qualsiasi posizione di una stringa.

Se vuoi trovare stringhe che iniziano con hey, usa l'operatore ^:

/^hey/.test('hey') //✅
/^hey/.test('bla hey') //❌

Se vuoi trovare stringhe che finiscono con hey, usa l'operatore $:

/hey$/.test('hey') //✅
/hey$/.test('bla hey') //✅
/hey$/.test('hey you') //❌

Se combini i due, troverai esattamente e soltanto la stringa hey:

/^hey$/.test('hey') //✅

Per trovare una stringa che inizia con una sottostringa e finisce con un'altra, puoi usare .*, che indica qualsiasi carattere ripetuto 0 o più volte:

/^hey.*joe$/.test('hey joe') //✅
/^hey.*joe$/.test('heyjoe') //✅
/^hey.*joe$/.test('hey how are you joe') //✅
/^hey.*joe$/.test('hey joe!') //❌

Intervalli

Invece di trovare una particolare stringa, puoi scegliere di trovare qualsiasi carattere in un intervallo, ad esempio:

/[a-z]/ //a, b, c, ... , x, y, z
/[A-Z]/ //A, B, C, ... , X, Y, Z
/[a-c]/ //a, b, c
/[0-9]/ //0, 1, 2, 3, ... , 8, 9

Queste espressioni regolari indicano stringhe che contengono almeno uno dei caratteri compresi negli intevalli:

/[a-z]/.test('a') //✅
/[a-z]/.test('1') //❌
/[a-z]/.test('A') //❌
/[a-c]/.test('d') //❌
/[a-c]/.test('dc') //✅

Gli intervalli possono essere combinati:

/[A-Za-z0-9]/

/[A-Za-z0-9]/.test('a') // ✅
/[A-Za-z0-9]/.test('1') // ✅
/[A-Za-z0-9]/.test('A') // ✅

Intervalli con elementi multipli

Puoi verificare se una stringa contiene uno e soltanto un carattere nell'intervallo usando il carattere -:

/^[A-Za-z0-9]$/

/^[A-Za-z0-9]$/.test('A') // ✅
/^[A-Za-z0-9]$/.test('Ab') // ❌

Pattern negati

Il carattere ^ all'inizio di un pattern lo ancora all'inizio della stringa.

Se usato in un intervallo, nega i suoi elementi:

/[^A-Za-z0-9]/.test('a') //❌
/[^A-Za-z0-9]/.test('1') //❌
/[^A-Za-z0-9]/.test('A') //❌
/[^A-Za-z0-9]/.test('@') //✅

• \d corrisponde a qualsiasi cifra, equivalente a [0-9]
• \D corrisponde a qualsiasi carattere che non è una cifra, equivalente a [^0-9]
• \w corrisponde a qualsiasi carattere alfanumerico, equivalente a [A-Za-z0-9]
• \W corrisponde a qualsiasi carattere non alfanumerico, equivalente a [^A-Za-z0-9]
• \s corrisponde a qualsiasi carattere di spazio: spazio, tab, nuova riga e spazi Unicode
• \S corrisponde a qualsiasi carattere che non è uno spazio
• \0 corrisponde a null
• \n corrisponde al carattere nuova riga
• \t corrisponde al carattere tab
• \uXXXX corrisponde al carattere Unicode con codice XXXX (richiede il flag u)
• . corrisponde a qualsiasi carattere che non è una nuova riga (e.g. \n) (a meno che non usi il flag s, spiegato in seguito)
• [^] corrisponde a qualsiasi carattere, incluso il carattere nuova riga. Utile su stringhe multi-riga.

Scelte nelle espressioni regolari

Se vuoi cercare una stringa oppure un'altra, usa l'operatore |.

/hey|ho/.test('hey') //✅
/hey|ho/.test('ho') //✅

Quantificatori

Supponiamo di avere questa espressione regolare che verifica se una stringa ha una cifra al suo interno e nient'altro:

/^\d$/

Puoi usare il quantificatore ? per renderla opzionale (presente 0 o 1 volta):

/^\d?$/

Ma se volessi trovare più cifre?

Puoi farlo in 4 modi, usando +, *, {n} e {n,m}. Vediamo queste opzioni una alla volta.

+

indica 1 o più (>=1) elementi

/^\d+$/

/^\d+$/.test('12') // ✅
/^\d+$/.test('14') // ✅
/^\d+$/.test('144343') // ✅
/^\d+$/.test('') // ❌
/^\d+$/.test('1a') // ❌

*

indica 0 o più (>= 0) elementi

/^\d+$/

/^\d*$/.test('12') // ✅
/^\d*$/.test('14') // ✅
/^\d*$/.test('144343') // ✅
/^\d*$/.test('') // ✅
/^\d*$/.test('1a') // ❌

{n}

indica esattamente n elementi

/^\d{3}$/

/^\d{3}$/.test('123') // ✅
/^\d{3}$/.test('12') // ❌
/^\d{3}$/.test('1234') // ❌
/^[A-Za-z0-9]{3}$/.test('Abc') // ✅

{n,m}

indica elementi tra n e m volte:

/^\d{3,5}$/

/^\d{3,5}$/.test('123') // ✅
/^\d{3,5}$/.test('1234') // ✅
/^\d{3,5}$/.test('12345') // ✅
/^\d{3,5}$/.test('123456') // ❌

m può essere omesso per un intervallo aperto, così da avere almeno n elementi:

/^\d{3,}$/

/^\d{3,}$/.test('12') // ❌
/^\d{3,}$/.test('123') // ✅
/^\d{3,}$/.test('12345') // ✅
/^\d{3,}$/.test('123456789') // ✅

Elementi opzionali

Apporre un ? dopo un elemento lo rende opzionale:

/^\d{3}\w?$/

/^\d{3}\w?$/.test('123') // ✅
/^\d{3}\w?$/.test('123a') // ✅
/^\d{3}\w?$/.test('123ab') // ❌

Gruppi

Usando le parentesi puoi creare gruppi di caratteri: (...)

Questo esempio indica esattamente 3 cifre seguite da uno o più caratteri alfanumerici:

/^(\d{3})(\w+)$/

/^(\d{3})(\w+)$/.test('123') // ❌
/^(\d{3})(\w+)$/.test('123s') // ✅
/^(\d{3})(\w+)$/.test('123something') // ✅
/^(\d{3})(\w+)$/.test('1234') // ✅

I caratteri di ripetizione posti dopo la parentesi di chiusura di un gruppo fanno riferimento all'intero gruppo:

/^(\d{2})+$/

/^(\d{2})+$/.test('12') //✅
/^(\d{2})+$/.test('123') //❌
/^(\d{2})+$/.test('1234') //✅

Gruppi di acquisizione

Finora, abbiamo visto come testare delle stringhe e verificare se contengono un certo pattern.

Una funzionalità molto bella delle espressioni regolari è la possibilità di acquisire parti di una stringa e inserirle in un array.

Puoi farlo usando i gruppi e in particolare i gruppi di acquisizione (capturing group).

Di default, un gruppo è un gruppo di acquisizione. Adesso, invece di usare RegExp.test(String), che restituisce un booleano se il pattern è soddisfatto, useremo String.match(RegExp) o RegExp.exec(String).

Funzionano esattamente allo stesso modo e restituiscono un array con l'intera stringa trovata come primo elemento, seguita dal contenuto dei gruppi.

Se non c'è corrispondenza, restituiscono null:

'123s'.match(/^(\d{3})(\w+)$/)
// Array [ "123s", "123", "s" ]

/^(\d{3})(\w+)$/.exec('123s')
// Array [ "123s", "123", "s" ]

'hey'.match(/(hey|ho)/)
// Array [ "hey", "hey" ]

/(hey|ho)/.exec('hey')
// Array [ "hey", "hey" ]

/(hey|ho)/.exec('ha!')
// null

Quando un gruppo viene trovato più volte, solo l'ultima corrispondenza viene inserita nell'array:

'123456789'.match(/(\d)+/) //Array [ "123456789", "9" ]

Gruppi opzionali

Un gruppo di acquisizione può essere reso opzionale usando (...)?. Se non viene trovato, la posizione corrispondente nell'array conterrà undefined:

/^(\d{3})(\s)?(\w+)$/.exec('123 s')
// Array [ "123 s", "123", " ", "s" ]

/^(\d{3})(\s)?(\w+)$/.exec('123s')
// Array [ "123s", "123", undefined, "s" ]

Riferimenti dei gruppi trovati

A ogni gruppo che viene trovato viene assegnato un numero. $1 si riferisce al primo, $2 al secondo e via dicendo. Questo sarà utile quando parleremo più avanti di sostituire parti di una stringa.

Gruppi di acquisizione con nome

Questa è una nuova funzionalità di ES2018.

A un gruppo può essere assegnato un nome piuttosto che uno slot nell'array dei risultati:

const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
const result = re.exec('2015-01-02')

// result.groups.year === '2015';
// result.groups.month === '01';
// result.groups.day === '02';

Usare match ed exec senza gruppi

Esiste una differenza nell'uso di match e exec senza gruppi: il primo elemento dell'array non è l'intera stringa trovata, ma direttamente la corrispondenza:

/hey|ho/.exec('hey')
// [ "hey" ]

/(hey).(ho)/.exec('hey ho')
// [ "hey ho", "hey", "ho" ]

Gruppi non acquisiti

Dato che i gruppi sono per impostazione predefinita gruppi di acquisizione, ti serve un modo per ignorare alcuni gruppi nell'array dei risultati. Questo è possibile usando i cosiddetti non-capturing group, che iniziano con (?:...):

'123s'.match(/^(\d{3})(?:\s)(\w+)$/)
// null

'123 s'.match(/^(\d{3})(?:\s)(\w+)$/)
// Array [ "123 s", "123", "s" ]

Flag

Puoi usare i seguenti flag su qualsiasi espressione regolare:

• g: trova il pattern più volte
• i: rende la regex indifferente a maiuscole/minuscole
• m: abilita la modalità multi-riga. In questa modalità, ^ e $ indicano l'inizio e la fine dell'intera stringa. Senza questo flag con stringhe multi-riga indicano l'inizio e la fine di ogni riga.
• u: consente il supporto Unicode (introdotto in ES6/ES2015)
• s: (nuovo in ES2018) abbreviazione per single line (riga singola), fa sì che il . trovi anche il carattere nuova riga.

I flag possono essere combinati e sono aggiunti alla fine dell'espressione regolare letterale:

/hey/ig.test('HEy') //✅

o come secondo parametro nel costruttore RegEx:

new RegExp('hey', 'ig').test('HEy') //✅

Analizzare un'espressione regolare

Data un'espressione regolare, puoi consultare le seguenti proprietà:

• source è il pattern
• multiline è true con il flag m
• global è true con il flag g
• ignoreCase è true con il flag i
• lastIndex

/^(\w{3})$/i.source //"^(\\d{3})(\\w+)$" /^(\w{3})$/i.multiline //false /^(\w{3})$/i.lastIndex //0 /^(\w{3})$/i.ignoreCase //true /^(\w{3})$/i.global //false

Escaping

Questi caratteri sono speciali:

• \
• /
• [ ]
• ( )
• { }
• ?
• +
• *
• |
• .
• ^
• $

Sono speciali perché sono caratteri di controllo che hanno un significato nel pattern dell'espressione regolare. Se vuoi usarli all'interno del pattern come caratteri da ricercare, devi eseguirne l'escape anteponendo loro una barra rovesciata:

/^\\$/ /^\^$/ // /^\^$/.test('^') ✅ /^\$$/ // /^\$$/.test('$') ✅

Confini di stringa

\b e \B ti consentono di verificare se una stringa si trovi all'inizio o alla fine di una parola:

• \b indica un insieme di caratteri all'inizio o alla fine di una parola
• \B indica un insieme di caratteri che non si trovano all'inizio o alla fine di una parola

Esempio:

'I saw a bear'.match(/\bbear/) //Array ["bear"]
'I saw a beard'.match(/\bbear/) //Array ["bear"]
'I saw a beard'.match(/\bbear\b/) //null
'cool_bear'.match(/\bbear\b/) //null

Sostituire usando le espressioni regolari

Abbiamo già visto come verificare se una stringa contiene un pattern.

Abbiamo anche visto come estrarre parte di una stringa in un array, tramite la corrispondenza con un pattern.

Ora vediamo come sostituire parti di una stringa sulla base di un pattern.

L'oggetto String in JavaScript ha un metodo replace() che può essere usato senza espressioni regolari per eseguire una singola sostituzione in una stringa:

"Hello world!".replace('world', 'dog')
// Hello dog!

"My dog is a good dog!".replace('dog', 'cat')
// My cat is a good dog!

Questo metodo accetta anche un'espressione regolare come argomento:

"Hello world!".replace(/world/, 'dog') //Hello dog!

Usare il flag g è l'unico modo per sostituire più occorrenze in una stringa in JavaScript:

"My dog is a good dog!".replace(/dog/g, 'cat') //My cat is a good cat!

I gruppi ci consentono di fare cose più complesse, come muovere parti di una stringa:

"Hello, world!".replace(/(\w+), (\w+)!/, '$2: $1!!!') // "world: Hello!!!"

Invece di usare una stringa, puoi usare una funzione per fare cose ancora più complesse. Potrà ricevere diversi argomenti come quelli restituiti da String.match(RegExp) o RegExp.exec(String), con il numero di argomenti che dipende dal numero di gruppi:

"Hello, world!".replace(/(\w+), (\w+)!/, (matchedString, first, second) => { 
  console.log(first); 
  console.log(second); 
  return `${second.toUpperCase()}: ${first}!!!` 
}) 
// "WORLD: Hello!!!"

Avidità

Le espressioni regolari di default mostrano un comportamento per cui sono dette greedy.

Cosa vuol dire?

Prendiamo questa regex:

/\$(.+)\s?/

Ci aspettiamo che estragga una somma di dollari da una stringa:

/\$(.+)\s?/.exec('This costs $100')[1] //100

Ma se abbiamo altre parole dopo il numero, dà di matto:

/\$(.+)\s?/.exec('This costs $100 and it is less than $200')[1] //100 and it is less than $200

Questo accade perché l'espressione regolare, dopo il segno $, cerca qualsiasi carattere con .+ e non si fermerà finché non viene raggiunta la fine della stringa. Poi termina perché \s? rende lo spazio finale opzionale.

Per sistemare questo aspetto, dobbiamo dire alla regex di essere pigra (lazy) e trovare la minor corrispondenza possibile. Possiamo farlo usando il simbolo ? dopo il quantificatore:

/\$(.+?)\s/.exec('This costs $100 and it is less than $200')[1] //100

Ho rimosso ? dopo \s . Altrimenti avrebbe trovato soltanto la prima cifra, dato che lo spazio era opzionale.

Quindi ? ha diversi significati in base alla sua posizione, perché può essere sia un quantificatore che un indicatore della modalità lazy.

Lookahead: trovare una stringa in base a cosa c'è dopo

Usa ?= per trova una stringa che è seguita da una specifica sottostringa:

/Roger(?=Waters)/

/Roger(?= Waters)/.test('Roger is my dog') // false
/Roger(?= Waters)/.test('Roger is my dog and Roger Waters is a famous musician')
// true

?! svolge l'operazione inversa, cercando una stringa che non è seguita da una specifica sottostringa:

/Roger(?!Waters)/

/Roger(?! Waters)/.test('Roger is my dog') // true
/Roger(?! Waters)/.test('Roger Waters is a famous musician')
// false

Lookbehind: trovare una stringa in base a cosa c'è prima

Questa è una funzionalità di ES2018.

I lookahead utilizzano il simbolo ?= symbol. I lookbehind usano ?<=:

/(?<=Roger) Waters/
/(?<=Roger) Waters/.test('Pink Waters is my dog') 
// false

/(?<=Roger) Waters/.test('Roger is my dog and Roger Waters is a famous musician')
// true

Un lookbehind viene negato usando ?<!:

/(?<!Roger) Waters/

/(?<!Roger) Waters/.test('Pink Waters is my dog') 
// true

/(?<!Roger) Waters/.test('Roger is my dog and Roger Waters is a famous musician')
// false

Espressioni regolari e Unicode

Il flag u è obbligatorio per lavorare con le stringhe Unicode. Ciò è particolarmente vero quando hai bisogno di gestire caratteri non inclusi tra i primi 1600 caratteri Unicode.

Le emoji sono un buon esempio, ma non sono l'unico.

Se non aggiungi il flag, questa semplice regex che dovrebbe trovare un carattere non funzionerà perché per JavaScript quella emoji è rappresentata internamente da 2 caratteri (vedi Unicode in JavaScript):

/^.$/.test('a') // ✅
/^.$/.test('🐶') // ❌
/^.$/u.test('🐶') // ✅

Quindi usa sempre il flag u.

Unicode, proprio come i normali caratteri, accetta gli intervalli:

/[a-z]/.test('a') // ✅
/[1-9]/.test('1') // ✅
/[🐶-🦊]/u.test('🐺') // ✅
/[🐶-🦊]/u.test('🐛') // ❌

JavaScript verifica la rappresentazione interna del codice, quindi 🐶 < 🐺 < 🦊 perché \u1F436 < \u1F43A < \u1F98A. Dai un'occhiata alla lista completa delle emoji per vedere i codici e scoprire l'ordine (suggerimento: il selettore di emoji macOS ha alcune emoji in diverso ordine, quindi non farci affidamento).

Proprietà Unicode

Come abbiamo visto prima, nel pattern di un'espressione regolare puoi usare \d per indicare qualsiasi cifra, \s per indicare qualsiasi carattere di spazio, \w per indicare qualsiasi carattere alfanumerico e così via.

Le proprietà Unicode costituiscono una funzionalità di ES2018 che estende questo concetto a tutti caratteri Unicode grazie a \p{} e alla sua negazione \P{}.

Ogni carattere Unicode ha una serie di proprietà. Ad esempio Script determina la famiglia della lingua, ASCII è un booleano che è true per ogni carattere ASCII e così via. Puoi inserire una proprietà tra parentesi graffe e l'espressione regolare controllerà se è vera:

/^\p{ASCII}+$/u.test('abc') // ✅
/^\p{ASCII}+$/u.test('ABC@') // ✅
/^\p{ASCII}+$/u.test('ABC🙃') // ❌

ASCII_Hex_Digit è un'altra proprietà booleana che verifica se la stringa contiene solo cifre esadecimali valide:

/^\p{ASCII_Hex_Digit}+$/u.test('0123456789ABCDEF') // ✅
/^\p{ASCII_Hex_Digit}+$/u.test('h') // ❌

Esistono molte altre proprietà booleane che puoi controllare aggiungendone il nome tra parentesi graffe. Tra queste Uppercase, Lowercase, White_Space, Alphabetic, Emoji e altre:

/^\p{Lowercase}$/u.test('h') // ✅
/^\p{Uppercase}$/u.test('H') // ✅
/^\p{Emoji}+$/u.test('H') // ❌
/^\p{Emoji}+$/u.test('🙃🙃') // ✅

In aggiunta a queste proprietà binarie, puoi verificare se le proprietà corrispondono a un valore specifico. In questo esempio, verifico se la stringa è scritta in alfabeto greco o latino:

/^\p{Script=Greek}+$/u.test('ελληνικά') // ✅
/^\p{Script=Latin}+$/u.test('hey') // ✅

Se vuoi sapere altro sulle proprietà che puoi usare consulta direttamente la proposta.

Esempi

Supponendo che una stringa contenga solo un numero che hai bisogno di estrarre, /\d+/ dovrebbe andare bene:

'Test 123123329'.match(/\d+/) 
// Array [ "123123329" ]

Trovare un indirizzo email

Un approccio semplicistico è verificare i caratteri che non sono spazi prima e dopo il segno @, usando \S:

/(\S+)@(\S+)\.(\S+)/
/(\S+)@(\S+)\.(\S+)/.exec('copesc@gmail.com')
               
// ["copesc@gmail.com", "copesc", "gmail", "com"]

Tuttavia, questo è un esempio riduttivo, dato che molti indirizzi email non validi soddisfano comunque questa regex.

Acquisire il testo tra virgolette doppie

Supponi di avere una stringa che contiene qualcosa tra virgolette doppie e di voler estrarre quel contenuto.

Il modo migliore per farlo è usare un gruppo di acquisizione, in quanto sappiamo che la parte di interesse inizia e termina con ", e possiamo facilmente selezionarla, ma vogliamo anche rimuovere le virgolette dal risultato.

Troveremo ciò che ci serve in result[1]:

const hello = 'Hello "nice flower"'
const result = /"([^']*)"/.exec(hello)
// Array [ "\"nice flower\"", "nice flower" ]

Ottenere il contenuto di un tag HTML

Per esempio, possiamo ottenere il contenuto di un tag span, consentendo qualsiasi numero di argomenti nel tag:

/<span\b[^>]*>(.*?)<\/span>/

/<span\b[^>]*>(.*?)<\/span>/.exec('test')
// null

/<span\b[^>]*>(.*?)<\/span>/.exec('<span>test</span>')
// ["<span>test</span>", "test"]

/<span\b[^>]*>(.*?)<\/span>/.exec('<span class="x">test</span>')
// ["<span class="x">test</span>", "test"]

Vuoi imparare JavaScript? Scarica il mio JavaScript Handbook.

Gli oggetti costituiscono il tipo di dato più utilizzato nella programmazione. Un oggetto è un insieme di dati correlati memorizzati come coppie chiave-valore. Ad esempio:

let userDetails = {
  name: "John Doe",
  username: "jonnydoe",
  age: 14,
}

Quando lavori con gli oggetti, potresti dover verificare se un oggetto è vuoto prima di svolgere un'operazione.

In JavaScript esistono vari modi per controllare se un oggetto è vuoto. In questo articolo, imparerai le varie strategie utilizzabili, quali sono le opzioni che puoi applicare e perché.

Nota: un oggetto è considerato vuoto se non ha coppie chiave-valore.

Se sei di fretta, ecco un esempio molto semplice::

const myEmptyObj = {};

// Funziona meglio con i browser nuovi
Object.keys(myEmptyObj).length === 0 && myEmptyObj.constructor === Object

// Funziona con tutti i browser
_.isEmpty(myEmptyObj)

Entrambi i metodi restituiranno true. Adesso cerchiamo di capire questo codice e le altre opzioni che puoi usare per verificare se un oggetto è vuoto in JavaScript.

Come controllare se un oggetto è vuoto con Object.keys()

Il metodo Object.keys() è un metodo statico per oggetti introdotto con ECMAScript6 (ES6) e supportato da tutti i browser moderni. Questo metodo restituisce un array con le chiavi di un oggetto. Ad esempio:

let userDetails = {
  name: "John Doe",
  username: "jonnydoe",
  age: 14
};

console.log(Object.keys(userDetails)); // ["name","username","age"]

A questo, puoi applicare la proprietà .length. Se restituisce zero, l'oggetto è vuoto.

let userDetails = {
  name: "John Doe",
  username: "jonnydoe",
  age: 14
};

let myEmptyObj = {};

console.log(Object.keys(userDetails).length); // 3
console.log(Object.keys(myEmptyObj).length); // 0

Puoi usare questo metodo per controllare se un oggetto è vuoto con un'istruzione if oppure creando una funzione apposita.

const isObjectEmpty = (objectName) => {
  return Object.keys(objectName).length === 0
}

Restituirà true o false. Se l'oggetto è vuoto, restituirà true, altrimenti restituirà false.

let userDetails = {
  name: "John Doe",
  username: "jonnydoe",
  age: 14
};

let myEmptyObj = {};

const isObjectEmpty = (objectName) => {
  return Object.keys(objectName).length === 0
}

console.log(isObjectEmpty(userDetails)); // false
console.log(isObjectEmpty(myEmptyObj)); // true

Nota: controllare soltanto la lunghezza non è l'opzione migliore quando vuoi verificare che un oggetto o qualsiasi altro tipo di dato sia vuoto. È sempre meglio avere conferma che il tipo di dato sia corretto.

A questo scopo puoi controllare il costruttore:

const isObjectEmpty = (objectName) => {
  return Object.keys(objectName).length === 0 && objectName.constructor === Object;
}

In tal modo, puoi eseguire una verifica più approfondita.

Finora è andato tutto bene, ma potresti voler evitare di ottenere un TypeError quando una variabile è undefined o un valore null viene passato invece di {}. Per risolvere questo problema puoi aggiungere un controllo extra:

const isObjectEmpty = (objectName) => {
  return (
    objectName &&
    Object.keys(objectName).length === 0 &&
    objectName.constructor === Object
  );
};

Nel codice qui sopra, è stato aggiunto un ulteriore controllo. Questo vuol dire che verrà restituito null o undefined se non si tratta di un oggetto vuoto, come mostrato nell'esempio seguente:

let userDetails = {
  name: "John Doe",
  username: "jonnydoe",
  age: 14
};

let myEmptyObj = {};
let nullObj = null;
let undefinedObj;

const isObjectEmpty = (objectName) => {
  return (
    objectName &&
    Object.keys(objectName).length === 0 &&
    objectName.constructor === Object
  );
};

console.log(isObjectEmpty(userDetails)); // false
console.log(isObjectEmpty(myEmptyObj)); // true
console.log(isObjectEmpty(undefinedObj)); // undefined
console.log(isObjectEmpty(nullObj)); // null

Nota: ciò vale anche per altri metodi statici per oggetti, ovvero puoi usare Object.entries() o Object.values() invece di Object.keys().

Come verificare se un oggetto è vuoto con un loop for…in

Un altro metodo che puoi usare è il loop for…in introdotto con ES6. Puoi usare questo loop insieme al metodo hasOwnProperty().

const isObjectEmpty = (objectName) => {
  for (let prop in objectName) {
    if (objectName.hasOwnProperty(prop)) {
      return false;
    }
  }
  return true;
};

Il codice qui sopra itererà su ogni proprietà dell'oggetto. Se avviene una singola iterazione, l'oggetto non è vuoto. Inoltre, hasOwnProperty() restituirà un booleano che indica se l'oggetto possiede la proprietà specificata.

let userDetails = {
  name: "John Doe",
  username: "jonnydoe",
  age: 14
};

let myEmptyObj = {};

const isObjectEmpty = (objectName) => {
  for (let prop in objectName) {
    if (objectName.hasOwnProperty(prop)) {
      return false;
    }
  }
  return true;
};

console.log(isObjectEmpty(userDetails)); // false
console.log(isObjectEmpty(myEmptyObj)); // true

Come verificare se un oggetto è vuoto con JSON.stringify()

Puoi anche utilizzare il metodo JSON.stingify(), che serve per convertire un valore JavaScript in una stringa JSON. Questo vuol dire che convertirà i valori del tuo oggetto in una stringa. Ad esempio:

let userDetails = {
  name: "John Doe",
  username: "jonnydoe",
  age: 14
};

console.log(JSON.stringify(userDetails)); 

Output:
"{'name':'John Doe','username':'jonnydoe','age':14}"

Quando l'oggetto è vuoto, restituisce "{}". Puoi usare questo valore per controllare se l'oggetto è vuoto.

const isObjectEmpty = (objectName) => {
  return JSON.stringify(objectName) === "{}";
};

Restituirà true se l'oggetto è vuoto, oppure false:

let userDetails = {
  name: "John Doe",
  username: "jonnydoe",
  age: 14
};

let myEmptyObj = {};

const isObjectEmpty = (objectName) => {
  return JSON.stringify(objectName) === "{}";
};

console.log(isObjectEmpty(userDetails)); // false
console.log(isObjectEmpty(myEmptyObj)); // true

Come verificare se un oggetto è vuoto con Lodash

Alcuni dei metodi che ho spiegato potrebbero andare bene per i browser più vecchi, ma potrebbero non funzionare con altri. Se ti interessa trovare una soluzione che funzioni sia per le versioni vecchie che per quelle moderne, puoi usare Lodash.

Lodash è una libreria di utilità JavaScript moderna che può svolgere svariate funzionalità con una sintassi molto semplice.

Ad esempio, se vuoi controllare che un oggetto sia vuoto, devi soltanto usare il metodo "isEmpty".

_.isEmpty(objectName);

Installare Lodash nei tuoi progetti è piuttosto facile. Tutto ciò che devi fare è usare questo comando:

$ npm install lodash

Adesso puoi inizializzare il metodo con il trattino basso e utilizzarlo.

const _ = require('lodash');

let userDetails = {
  name: "John Doe",
  username: "jonnydoe",
  age: 14
};

let myEmptyObj = {};

const isObjectEmpty = (objectName) => {
  return _.isEmpty(objectName);
};

console.log(isObjectEmpty(userDetails)); // false
console.log(isObjectEmpty(myEmptyObj)); // true

Ecco fatto! 💪

Mi sono divertito molto a esplorare i diversi modi con cui puoi verificare che un oggetto sia vuoto. Usa il metodo che si presta meglio alle tue necessità.

Buona programmazione!

Un URL – o Uniform Resource Locator – è un testo usato per identificare risorse come pagine web, immagini e video su internet.

Gli URL sono chiamati comunemente indirizzi dei siti web e vengono usati per trasferire file, per le email e altre applicazioni.

Gli URL consistono di più parti – protocollo, nome di dominio e via dicendo – che dicono al browser come e dove recuperare la risorsa.

In JavaScript, potresti usare un URL in un tag di ancoraggio o un pulsante per rimandare l'utente a un'altra pagina web. In una situazione del genere, questa stringa URL deve essere verificata per assicurarsi che sia valida.

Questo tutorial ti mostrerà alcuni modi per verificare se una stringa JavaScript è un URL valido.

Per imparare come ottenere l'URL corrente in JavaScript, puoi leggere questo articolo (risorsa in inglese).

Come verificare se una stringa è un URL valido usando un'espressione regolare

Le espressioni regolari (regex) sono dei pattern (modelli) che indicano combinazioni di caratteri in una stringa. In JavaScript, le espressioni regolari sono degli oggetti che offrono diversi metodi per svolgere operazioni varie.

Puoi costruire un'espressione regolare in due modi:

• Usando un'espressione regolare letterale
• Usando il costruttore RegEx

Nota: è consigliabile usare il metodo letterale quando vuoi soltanto verificare se una stringa è un URL valido senza creare alcun oggetto aggiuntivo.

Vediamo come funzionano questi due metodi.

Come usare le espressioni regolari letterali

In un'espressione regolare letterale, il pattern è racchiuso tra barre oblique, come puoi vedere di seguito.

Il pattern include la validazione delle parti necessarie per l'URL. Ad esempio, un protocollo, https, le barre, //, e via dicendo.

const urlPattern = /(?:https?):\/\/(\w+:?\w*)?(\S+)(:\d+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/;

Come usare il costruttore di espressioni regolari

Per creare un'espressione regolare usando l'approccio del costruttore, usa il costruttore RegExp() e passa il pattern come parametro.

const urlPattern = new RegExp('(?:https?):\/\/(\w+:?\w*)?(\S+)(:\d+)?(\/|\/([\w#!:.?+=&%!\-\/]))?');

Per dimostrare come verificare se una stringa è un URL, creiamo un metodo che validerà la stringa JavaScript usando il costruttore di espressioni regolari, restituendo vero o falso in base al riscontro.

	const isValidUrl = urlString=> {
	  	var urlPattern = new RegExp('^(https?:\\/\\/)?'+ // protocollo
	    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // nome dominio
	    '((\\d{1,3}\\.){3}\\d{1,3}))'+ // o indirizzo ip (v4)
	    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // porta e percorso
	    '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
	    '(\\#[-a-z\\d_]*)?$','i'); // fragment locator
	  return !!urlPattern.test(urlString);
	}

Come usare un'espressione regolare per validare un URL

Il seguente codice mostra come validare diverse stringhe URL usando il metodo appena creato:

	var url = "invalidURL";
	console.log(isValidUrl(url));      //false
	 
	var url = "htt//jsowl";            //false
	console.log(isValidUrl(url));
	
    var url = "www.jsowl.com";         //true
    console.log(isValidUrl(url));
    
    var url = "https://www.jsowl.com"; //true
    console.log(isValidUrl(url));
    
    var url = "https://www.jsowl.com/remove-an-item-from-an-array-in-javascript/";
    console.log(isValidUrl(url));      //true

Come verificare se una stringa è un URL valido usando il costruttore URL

Puoi usare il costruttore URL per verificare se una stringa è un URL valido.

Il costruttore URL (new URL(url)) restituisce un oggetto URL definito dai parametri URL.

Se l'URL dato non è valido, JavaScript dà un'eccezione TypeError.

Nota: è indicato usare questo approccio quando vuoi costruire un oggetto URL nel tuo programma per ulteriori utilizzi.

Sintassi del costruttore URL

La seguente sintassi spiega come creare un oggetto URL con una stringa JavaScript.

new URL(url);
new URL(url, base);

Dove,

• url è una stringa o qualsiasi oggetto dotato di uno stringifier che rappresenta un URL assoluto o relativo. Se l'URL è assoluto, base va ignorato. Se l'URL è relativo, è richiesto anche base.
• base (opzionale) è una stringa che rappresenta l'URL base. Deve essere passato quando l'URL è relativo. Risulta undefined quando ignorato.

Esempio del metodo costruttore URL

Per dimostrare come funziona il costruttore URL, creiamo una funzione lambda per costruire un nuovo URL con la stringa passata.

• Se la stringa è un URL valido, viene creato un oggetto URL e viene restituito true
• Se la stringa non è un URL valido, si verifica un TypeError e viene restituito false

const isValidUrl = urlString=> {
      try { 
      	return Boolean(new URL(urlString)); 
      }
      catch(e){ 
      	return false; 
      }
  }

Come usare il metodo isValidURL()

Invochiamo il metodo isValidURL() per diversi tipi di stringhe e vediamo i risultati.

  var url = "invalidURL";
  console.log(isValidUrl(url));     //false
  
  var url = "htt//jsowl";
  console.log(isValidUrl(url));     //false
  
  var url = "www.jsowl.com";
  console.log(isValidUrl(url));     //false
  
  var url = "tcp://www.jsowl.com";
  console.log(isValidUrl(url));     //true
  
  var url = "https://www.jsowl.com/remove-an-item-from-an-array-in-javascript/";
  console.log(isValidUrl(url));     //true

Nei primi tre casi, puoi vedere che è stata passata una stringa che non è un URL valido. Come risultato, la creazione dell'oggetto URL fallisce con un TypeError e viene restituito false.

Negli ultimi due casi, è stato passato un URL valido. Quindi viene creato un oggetto URL e viene restituito true, confermando che l'URL è corretto.

Vediamo un altro esempio per validare una parte specifica di un URL.

In questo esempio, valideremo un protocollo specifico nell'URL, che dovrà contenere il protocollo http o https.

	const isValidUrl = urlString=> {
		let url;
		try { 
	      	url =new URL(urlString); 
	    }
	    catch(e){ 
	      return false; 
	    }
	    return url.protocol === "http:" || url.protocol === "https:";
	}

Esempio di come validare una parte di un URL

Invochiamo il metodo isValidURL() per diversi tipi di stringhe e protocolli e vediamo i risultati.

var url = "tcp://www.jsowl.com";
console.log(isValidUrl(url));      //false

var url = "https://www.jsowl.com";
console.log(isValidUrl(url));      //true

Nel primo caso, la stringa (tcp://www.jsowl.com) è un URL valido, ma non contiene un protocollo specifico (HTTP/HTTPS). Quindi viene restituito false.

Nel secondo caso, la stringa https://www.jsowl.com è un URL valido e contiene il protocollo specifico, quindi viene restituito true.

Come verificare se una stringa è un URL valido con un elemento input

L'HTML supporta gli elementi input di tipo url, per rappresentare in modo specifico gli URL.

L'attributo value di un elemento <input> contenente la stringa viene validato automaticamente dal confronto con la sintassi URL (come un URL vuoto o formato in modo appropriato) prima che il modulo sia inviato.

Il metodo HTMLInputElement.checkValidity() viene usato per controllare se l'attributo value di un elemento <input> è un URL. Il metodo checkvalidity() restituisce true se il valore è un URL corretto e false se l'input non è un URL corretto.

Creiamo un metodo che genera un elemento input di tipo URL e lo valida usando il metodo checkValidity().

    const isValidUrl = urlString =>{
      var inputElement = document.createElement('input');
      inputElement.type = 'url';
      inputElement.value = urlString;

      if (!inputElement.checkValidity()) {
        return false;
      } else {
        return true;
      }
    } 

Adesso usiamo questo metodo per validare diverse stringhe e vedere se sono URL validi.

    var url = "invalidURL";
    console.log(isValidUrl(url));     //false
    
    var url = "htt//jsowl";
    console.log(isValidUrl(url));     //false
    
    var url = "www.jsowl.com";
    console.log(isValidUrl(url));     //false
    
    var url = "https://www.jsowl.com";
    console.log(isValidUrl(url));     //true
    
    var url = "https://www.jsowl.com/remove-an-item-from-an-array-in-javascript/";
    console.log(isValidUrl(url));     //true

Ed ecco come puoi usare l'approccio input type per verificare se una stringa è un URL valido.

Come verificare se una stringa è un URL valido con il metodo del tag di ancoraggio

Questa sezione ti mostra come usare un HTMLAnchorElement per controllare se una stringa JavaScript è un URL.

Nota: è consigliabile usare questo metodo quando vuoi assegnare un URL a un tag di ancoraggio e assicurarti che la stringa sia un URL valido.

L'interfaccia HTMLAnchorElement rappresenta degli elementi hyperlink. Fornisce proprietà e metodi speciali per manipolare il layout e la presentazione di tali elementi. Viene anche chiamata tag di ancoraggio.

Puoi assegnare un URL a un tag di ancoraggio usando l'attributo href. Nell'assegnazione,

• Se la stringa passata è un URL valido, viene assegnata al tag di ancoraggio
• Se la stringa passata non è un URL valido, la posizione attuale del browser viene assegnata al tag
• Di default, il tag di ancoraggio avrà un URL vuoto (“”)

Una volta che l'URL è assegnato, puoi estrarre una parte specifica dell'URL usando gli attributi spiegati di seguito.

Adesso vediamo come controllare se la stringa assegnata è un URL corretto.

Se lo è, viene assegnata al tag di ancoraggio. Altrimenti, gli sarà assegnata la posizione attuale del browser.

Quindi per vedere se l'URL è corretto, puoi controllare se l'host del tag di ancoraggio NON è uguale a quello della posizione attuale usando l'istruzione a.host != window.location.host.

Vediamo il codice.

Creiamo un funzione lambda e la assegniamo alla costante isValidUrl.

La funzione crea un tag di ancoraggio e gli assegna la stringa con l'URL. Dopodiché, verifica se l'attributo host dell'elemento è null o non definito.

Se non è null, verifica se l'attributo host NON è uguale alla posizione attuale del browser e restituisce true se non è uguale.

Questo perché se l'URL passato è valido, il tag di ancoraggio avrà un valore URL. Ma se l'URL non è valido, il tag di ancoraggio avrà la posizione attuale del browser. In questo caso, la funzione lambda restituisce false.

const isValidUrl = urlString =>{	
  	var a  = document.createElement('a');
   	a.href = urlString;
   	return (a.host && a.host != window.location.host);
  }

Il codice seguente invoca la funzione lambda isValidUrl() con input differenti e stampa l'output sulla console.

  var url = "invalidURL";
  console.log("1.AnchorTag:  " +isValidUrl(url));    //false
  
  var url = "htt//jsowl";
  console.log("22.AnchorTag:  "+isValidUrl(url));    //false
  
  var url = "www.jsowl.com";  
  console.log("3.AnchorTag:  " +isValidUrl(url));    //false  
  
  var url = "https://www.jsowl.com";  
  console.log("4.AnchorTag:  " +isValidUrl(url));    //true 
  
  var url = "https://www.jsowl.com/remove-an-item-from-an-array-in-javascript/";
  console.log("5.AnchorTag:  " +isValidUrl(url));    //true 

Questo tutorial è disponibile in questo JSFiddle.

Conclusione

In questo articolo hai imparato come verificare se una stringa JavaScript è un URL usando diversi metodi e quando usare ogni metodo.

Se ti è piaciuto questo articolo, condividilo.

Puoi vedere i miei altri tutorial sul mio blog, JS Owl.

Le Promise sono un concetto molto importante per le operazioni asincrone in JavaScript. Forse pensi che le promise non siano così facili da capire, apprendere e usare. E credimi non sei il solo!

Le Promise sono impegnative per molti sviluppatori web, anche dopo anni passati a usarle.

In questo articolo, cercherò di cambiare questa percezione e condividere quello che ho imparato sulle Promise in JavaScript negli ultimi anni. Spero che ti sia utile.

Cos'è una Promise in JavaScript?

Una Promise è un'oggetto speciale in JavaScript. Produce un valore quando un'operazione asincrona viene completata con successo, o un errore se non è completata con successo a causa di un  timeout, un errore di rete, e via dicendo.

Una chiamata riuscita è indicata dalla chiamata della funzione resolve, mentre gli errori sono indicati dalla chiamata della funzione reject.

Puoi creare una promise usando il costruttore Promise in questo modo:

let promise = new Promise(function(resolve, reject) {    
    // Esegui delle operazioni asincrone, quindi chiama resolve o reject
});

Nella maggior parte dei casi, una promise si usa per un'operazione asincrona. Tuttavia, tecnicamente, puoi risolvere/rifiutare sia operazioni sincrone che asincrone.

Aspetta un momento, non abbiamo già le funzioni callback per le operazioni asincrone?

Esatto! In JavaScript esistono le funzioni callback. Ma, una callback non è niente di speciale. È una normale funzione che produce un risultato al completamento di un'operazione asincrona.

La parola 'asincrona' significa che una cosa succede nel futuro, non adesso. Normalmente, le callback si usano solamente per operazioni di rete, o caricare/scaricare file, consultare una base di dati, o cose del genere.

Nonostante le callback siano utili, hanno anche un grande svantaggio. In alcuni casi, possiamo avere una callback dentro un'altra callback dentro un'altra callback, e così via. Dico davvero! Cerchiamo di capire questo "inferno di callback" con un esempio.

Come evitare l'Inferno di callback – Esempio con PizzaHub

Ordiniamo una pizza Margherita Veg🍕 da PizzaHub. Quando facciamo un ordine, PizzaHub individua automaticamente la nostra posizione geografica, trova una pizzeria nei dintorni e controlla se la pizza che vogliamo è disponibile.

Se è disponibile individua che tipo di bibita possiamo avere gratis con la pizza, e finalmente invia l'ordine.

Se l'ordine va a buon fine, riceviamo un messaggio di conferma.

Quindi, come possiamo scrivere un codice per queste operazioni usando le funzioni callback? Io ho pensato a qualcosa del genere:

function orderPizza(type, name) {
    
    // Chiedi a pizzahub di trovare un ristorante
    query(`/api/pizzahub/`, function(result, error){
       if (!error) {
           let shopId = result.shopId;
           
           // Contatta il ristorante e chiedi le pizze
           query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
               if (!error) {
                   let pizzas = result.pizzas;
                   
                   // Controlla se la pizza è dsponibile
                   let myPizza = pizzas.find((pizza) => {
                       return (pizza.type===type && pizza.name===name);
                   });
                   
                   // Controlla le bibite gratis
                   query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
                       if (!error) {
                           let beverage = result.id;
                           
                           // Prepara l'ordine
                           query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
                              if (!error) {
                                  console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
                              } else {
                                  console.log(`Bad luck, No Pizza for you today!`);
                              }
                           });

                       }
                   })
               }
           });
       } 
    });
}

// Chiama il metodo orderPizza
orderPizza('veg', 'margherita');

Esaminiamo meglio la funzione orderPizza.

Chiama una API per ottenere l'id del ristorante più vicino. Dopodiché, riceve la lista delle pizze disponibili nel ristorante. Controlla che la pizza che vogliamo è fra le disponibili e fa un'altra richiesta all'API per cercare le bibite da abbinare alla pizza. E infine invia l'ordine.

Qui stiamo usando una callback per ogni richiesta inviata all'API. Questo ci porta a dover usare una callback dentro un'altra callback, dentro un'altra callback, e così via.

Andiamo verso quello che chiamiamo (molto pittorescamente) inferno di callback. E penso che non piaccia a nessuno. Inoltre forma una piramide di codice che è fonte di confusione ma anche di possibili errori.

Ci sono vari modi per uscire dall'inferno di callback (o per non entrare).  Il modo più comune è appunto quello di usare una Promise o una funzione async. Tuttavia, per capire bene cosa sia una funzione async, hai bisogno prima di avere una conoscenza sufficiente delle promise.

Quindi iniziamo e tuffiamoci nelle promise.

Comprendere gli stati delle Promise

Riassumendo, una promise può essere creata con la sintassi del costruttore (constructor), in questo modo:

let promise = new Promise(function(resolve, reject) {
  // Codice da eseguire
});

Il costruttore ha come argomento una funzione. Quest'ultima funzione si chiama funzione esecutrice (executor).

// Funzione esecutrice passata come argomento
// al costruttore della promise
function(resolve, reject) {
    // la logica va qui...
}

La funzione esecutrice accetta due argomenti, resolve e reject. Queste sono le callback fornite dal linguaggio JavaScript stesso. La logica del tuo programma va inserita nel corpo della funzione esecutrice che viene eseguita automaticamente quando una nuova promise è creata con la parola chiave new.

Per essere effettiva, la funzione executor della promise deve chiamare una delle due callback, resolve o reject. Entreremo nei dettagli più avanti.

La funzione constructor new Promise() restituisce un oggetto promise. Siccome la funzione executor gestisce operazioni asincrone, l'oggetto promise deve avere la capacità di informare quando l'esecuzione ha inizio, quando viene completata (resolved) o quando restituisce un errore (rejected).

Un oggetto promise possiede le seguenti proprietà interne:

1. state – Questa proprietà può avere i seguenti valori:

• pending: il valore iniziale quando inizia l'esecuzione della funzione esecutrice (in sospeso).
• fulfilled: quando la promise è risolta.
• rejected: quando la promise è rifiutata.

2.  result – Questa proprietà può avere i seguenti valori:

• undefined: il valore iniziale quando la proprietà state ha valore pending.
• valore: quando viene chiamata resolve(valore).
• errore: quando viene chiamata reject(errore).

Queste proprietà interne, sono inaccessibili da un codice esterno, ma sono ispezionabili. Ovvero possiamo ispezionare il valore delle proprietà state e result con gli strumenti di debug, ma non possiamo accedervi direttamente tramite il programma.

Lo stato di una promise può essere pending (sospesa), fulfilled (soddisfatta) o rejected (respinta, rifiutata). Una promise risolta o rifiutata viene chiamata settled (conclusa).

Come si risolve o si rifiuta una promise

Ecco un esempio di una promise risolta (stato fulfilled) immediatamente con il valore I am done.

let promise = new Promise(function(resolve, reject) {
    resolve("I am done");
});

La seguente promise è rifiutata (stato rejected) con il messaggio di errore Something is not right!.

let promise = new Promise(function(resolve, reject) {
    reject(new Error('Something is not right!'));
});

Una cosa importante da notare:

La funzione executor di una Promise deve chiamare solo una volta resolve o reject. Una volta che lo stato passa da pending a fulfilled o da pending a rejected, è tutto. Qualsiasi ulteriore chiamata di resolve o reject viene ignorata.

let promise = new Promise(function(resolve, reject) {
  resolve("I am surely going to get resolved!");

  reject(new Error('Will this be ignored?')); // ignorato
  resolve("Ignored?"); // ignorato
});

Nell'esempio precedente, solo la prima chiamata di resolve avviene, mentre il resto viene ignorato.

Come gestire una Promise una volta creata

Una Promise utilizza una funzione executor per completare un'operazione (di solito asincrona). Una funzione che usa il risultato di una promise, dovrebbe essere avvertita quando la funzione executor ha terminato il suo lavoro chiamando resolve o reject.

I metodi .then(), .catch() e .finally(), servono per creare questo collegamento fra la funzione executor e la funzione che consuma la promise (consumer), in modo tale che possano essere sincronizzate quando la promise è risolta o rifiutata.

Come usare il metodo .then()

Il metodo .then() dovrebbe essere chiamato sull'oggetto promise per gestire un risultato (resolve) o un errore (reject).

Il metodo accetta due funzioni come parametri. Normalmente, il metodo .then() viene chiamato dalla funzione consumer quando vuoi conoscere il risultato dell'esecuzione di una promise.

promise.then(
  (result) => { 
     console.log(result);
  },
  (error) => { 
     console.log(error);
  }
);

Se ti interessa solo il risultato in caso di successo, puoi passare un solo argomento, in questo modo:

promise.then(
  (result) => { 
      console.log(result);
  }
);

Se ti interessa solo il risultato in caso di errore, puoi passare null come primo argomento, in questo modo:

promise.then(
  null,
  (error) => { 
      console.log(error)
  }
);

In ogni caso, puoi gestire meglio gli errori usando il metodo .catch() che vedremo in un minuto.

Vediamo un paio di esempi di come gestire i risultati e gli errori usando i metodi .then e .catch. Vediamo di rendere le cose un po' più divertenti con delle richieste asincrone reali. Useremo la PokeAPI per richiedere informazioni sui Pokémon e gestire i risultati con le promise e le funzioni resolve/reject.

Per prima cosa, creiamo una funzione generica che accetta un URL della PokeAPI come argomento e ritorna una promise. Se la richiesta alla API ha successo, restituiremo una promise risolta (resolved). In caso di errore, restituiremo una promise rifiutata (rejected).

D'ora in poi useremo questa funzione in vari esempi per ottenere una promise e lavorare con essa.

function getPromise(URL) {
  let promise = new Promise(function (resolve, reject) {
    let req = new XMLHttpRequest();
    req.open("GET", URL);
    req.onload = function () {
      if (req.status == 200) {
        resolve(req.response);
      } else {
        reject("There is an Error!");
      }
    };
    req.send();
  });
  return promise;
}

Esempio 1: ottieni informazioni su 50 Pokémon:

const ALL_POKEMONS_URL = 'https://pokeapi.co/api/v2/pokemon?limit=50';

// Abbiamo già parlato di questa funzione!
let promise = getPromise(ALL_POKEMONS_URL);

const consumer = () => {
    promise.then(
        (result) => {
            console.log({result}); // Registra il risultato di 50 Pokemons
        },
        (error) => {
            // Visto che l'URL è valido, questa funzione non sarà chiamata.
            console.log('We have encountered an Error!'); // Registra un errore
    });
}

consumer();

Esempio 2: proviamo con URL non valido

const POKEMONS_BAD_URL = 'https://pokeapi.co/api/v2/pokemon-bad/';

// Questa promise sarà rifiutata perché l'URL è 404
let promise = getPromise(POKEMONS_BAD_URL);

const consumer = () => {
    promise.then(
        (result) => {
            // La promise non è risolta. Quindi, questa funzione
            // non sarà eseguita.
            console.log({result});
        },
        (error) => {
            // Una promise rifiutata eseguirà questa funzione
            console.log('We have encountered an Error!'); // Registra un errore
        }
    );
}

consumer();

Come usare il metodo .catch()

Puoi usare questo metodo per gestire gli errori in una promise. La sintassi di passare null come primo argomento di .then() non è esattamente un gran modo di gestire gli errori. Per questo abbiamo .catch() per eseguire lo stesso lavoro con una sintassi più pulita:

// Questa promise sarà rifiutata perché l'URL è 404
let promise = getPromise(POKEMONS_BAD_URL);

const consumer = () => {
    promise.catch(error => console.log(error));
}

consumer();

Se lanciamo un errore come new Error("Something wrong!") invece di chiamare reject dalla funzione executor, sarà considerato comunque un rifiuto. Ovvero l'errore sarà intercettato dal metodo .catch.

Lo stesso succede per ogni eccezione sincrona che avviene nella funzione executor o in una funzione di gestione.

Questo è un esempio in cui un errore viene trattato come un rifiuto e il metodo .catch viene chiamato:

new Promise((resolve, reject) => {
  throw new Error("Something is wrong!");// nessuna chiamata di reject
}).catch((error) => console.log(error)); 

Come usare il metodo .finally()

Il metodo .finally() svolge operazioni di pulizia come interrompere un caricamento, chiudere una connessione attiva, e così via. Il metodo finally() viene chiamato a prescindere del fatto che una promise sia risolta o rifiutata. Passa il risultato o l'errore al gestore seguente, che a sua volta potrà chiamare .then() o .catch().

Questo è un esempio che ti aiuterà a capire i tre metodi insieme:

let loading = true;
loading && console.log('Loading...');

// Ottieni la promise
promise = getPromise(ALL_POKEMONS_URL);

promise.finally(() => {
    loading = false;
    console.log(`Promise Settled and loading is ${loading}`);
}).then((result) => {
    console.log({result});
}).catch((error) => {
    console.log(error)
});

Per spiegare meglio:

• Il metodo .finally() cambia il valore di loading in false.
• Se la promise è risolta, il metodo .then() viene chiamato. Se la promise è rifiutata con un errore, viene chiamato il metodo .catch(). Il metodo .finally() sarà chiamato comunque a prescindere che la promise sia risolta o rifiutata.

Cos'è la catena di Promise?

La chiamata promise.then() restituisce sempre una promise. Questa promise avrà la proprietà state con valore pending e result sarà undefined. Ci permette chiamare il metodo .then sulla nuova promise.

Quando il primo .then restituisce un valore, il seguente .then può ricevere questo valore. Il secondo .then  può passarlo al terzo e così via. Tutto questo forma una catena di .then che trasmette le promise. Questo fenomeno viene chiamato promise chain (catena di promise).

Ecco un esempio:

let promise = getPromise(ALL_POKEMONS_URL);

promise.then(result => {
    let onePokemon = JSON.parse(result).results[0].url;
    return onePokemon;
}).then(onePokemonURL => {
    console.log(onePokemonURL);
}).catch(error => {
    console.log('In the catch', error);
});

Qui per prima cosa otteniamo una promise risolta e quindi estraiamo l'URL per raggiungere il primo Pokémon. Quindi restituiamo questo valore che viene passato come promise al seguente metodo .then(). E dunque il risultato:

https://pokeapi.co/api/v2/pokemon/1/

Il metodo .then può restituire:

• Un valore (già abbiamo visto questo caso)
• Oppure una nuova promise.

Inoltre può anche dare un errore.

Ecco un esempio in cui creiamo una catena di promise con vari metodi .then che restituiscono dei risultati e una nuova promise:

// Catena di promise con then e catch multipli
let promise = getPromise(ALL_POKEMONS_URL);

promise.then(result => {
    let onePokemon = JSON.parse(result).results[0].url;
    return onePokemon;
}).then(onePokemonURL => {
    console.log(onePokemonURL);
    return getPromise(onePokemonURL);
}).then(pokemon => {
    console.log(JSON.parse(pokemon));
}).catch(error => {
    console.log('In the catch', error);
});

Nel primo .then estraiamo l'URL e restituiamo il suo valore. Questo URL viene passato al secondo .then che restituisce una nuova promise che prende l'URL come argomento.

Quest'ultima promise viene risolta e trasmessa nella catena dove otteniamo le informazioni sul Pokémon. Questo è il risultato:

Nel caso in cui ci fosse un errore o una promise rifiutata, il metodo .catch nella catena verrebbe chiamato.

Un punto importante: chiamare .then più volte non forma una catena di promise. Potresti finire per introdurre un bug nel codice:

let promise = getPromise(ALL_POKEMONS_URL);

promise.then(result => {
    let onePokemon = JSON.parse(result).results[0].url;
    return onePokemon;
});
promise.then(onePokemonURL => {
    console.log(onePokemonURL);
    return getPromise(onePokemonURL);
});
promise.then(pokemon => {
    console.log(JSON.parse(pokemon));
});

Abbiamo chiamato il metodo .then tre volte sulla stessa promise, ma non abbiamo trasmesso la promise. Questo è diverso dalla catena di promise. Nell'ultimo esempio, Il risultato sarebbe un errore.

Come gestire promise multiple

Oltre ai gestori (.then, .catch e .finally), esistono sei metodi statici disponibili nella API Promise. I primi quattro metodi accettano un array di promise e le eseguono in parallelo.

1. Promise.all
2. Promise.any
3. Promise.allSettled
4. Promise.race
5. Promise.resolve
6. Promise.reject

Vediamoli uno a uno.

Il metodo Promise.all()

Promise.all([promise]) accetta una collezione (per esempio, un array) di promise come argomento e le esegue in parallelo.

Questo metodo aspetta fino a che tutte le promise siano risolte e ritorna un array con i loro risultati. Se una qualsiasi di queste promise viene rifiutata o non viene eseguita a causa di un errore, i risultati di tutte le altre vengono ignorati.

Creiamo tre promise per ottenere informazioni su tre Pokémon.

const BULBASAUR_POKEMONS_URL = 'https://pokeapi.co/api/v2/pokemon/bulbasaur';
const RATICATE_POKEMONS_URL = 'https://pokeapi.co/api/v2/pokemon/raticate';
const KAKUNA_POKEMONS_URL = 'https://pokeapi.co/api/v2/pokemon/kakuna';


let promise_1 = getPromise(BULBASAUR_POKEMONS_URL);
let promise_2 = getPromise(RATICATE_POKEMONS_URL);
let promise_3 = getPromise(KAKUNA_POKEMONS_URL);

E usiamo il metodo Promise.all() passando un array di promise.

Promise.all([promise_1, promise_2, promise_3]).then(result => {
    console.log({result});
}).catch(error => {
    console.log('An Error Occured');
});

Risultato:

Come puoi vedere, viene restituito il risultato di tutte le promise. Il tempo di esecuzione di tutte le promise è uguale al tempo massimo di esecuzione della promise più "lenta".

Il metodo Promise.any()

Promise.any([promise]) - Simile al metodo all(), anche .any() accetta un array di promise da eseguire in parallelo. Però questo metodo non aspetta che tutte le promise siano risolte. Termina quando una qualsiasi delle promise è conclusa.

 Promise.any([promise_1, promise_2, promise_3]).then(result => {
     console.log(JSON.parse(result));
 }).catch(error => {
     console.log('An Error Occured');
 });

Il risultato sarà il risultato di una delle promise risolte:

Il metodo Promise.allSettled()

Promise.allSettled([promise]) - Questo metodo aspetta che tutte le promise siano concluse (risolte o rifiutate) e ritorna i loro risultati come un array di oggetti. I risultati conterranno la stato (fulfilled/rejected) e il valore, se lo stato è fulfilled. Nel caso in cui lo stato sia rejected, ritornerà la ragione dell'errore.

Ecco un esempio di tutte promise con stato fulfilled:

Promise.allSettled([promise_1, promise_2, promise_3]).then(result => {
    console.log({result});
}).catch(error => {
    console.log('There is an Error!');
});

Risultato:

Se qualcuna delle promise fosse rifiutata, per esempio la promise_1,

let promise_1 = getPromise(POKEMONS_BAD_URL);

Il metodo Promise.race()

Promise.race([promises]) – Aspetta la prima promise (la più veloce) a essere conclusa, e ritorna il risultato/errore di conseguenza.

Promise.race([promise_1, promise_2, promise_3]).then(result => {
    console.log(JSON.parse(result));
}).catch(error => {
    console.log('An Error Occured');
});

Il risultato sarà la promise che viene risolta più rapidamente:

I metodi Promise.resolve/reject

Promise.resolve(value) – Risolve una promise con il valore passato come argomento. È equivalente al seguente codice:

let promise = new Promise(resolve => resolve(value));

Promise.reject(error) – Rifiuta una promise con l'errore passato come argomento. È equivalente al seguente codice:

let promise = new Promise((resolve, reject) => reject(error));

Possiamo riscrivere l'esempio di PizzaHub con le promise?

Certo che sì, facciamolo. Supponiamo che il metodo query ritorni una promise. Nella vita reale, questo metodo potrebbe comunicare con un database e restituire i risultati. In questo caso, restituisce un risultato predeterminato, ma va bene per il nostro esempio.

function query(endpoint) {
  if (endpoint === `/api/pizzahub/`) {
    return new Promise((resolve, reject) => {
      resolve({'shopId': '123'});
    })
  } else if (endpoint.indexOf('/api/pizzahub/pizza/') >=0) {
    return new Promise((resolve, reject) => {
      resolve({pizzas: [{'type': 'veg', 'name': 'margherita', 'id': '123'}]});
    })
  } else if (endpoint.indexOf('/api/pizzahub/beverages') >=0) {
    return new Promise((resolve, reject) => {
      resolve({id: '10', 'type': 'veg', 'name': 'margherita', 'beverage': 'coke'});
    })
  } else if (endpoint === `/api/order`) {
    return new Promise((resolve, reject) => {
      resolve({'type': 'veg', 'name': 'margherita', 'beverage': 'coke'});
    })
  }
}

Il prossimo passo è il refactoring del nostro inferno di callback. A questo scopo, per prima cosa, creeremo alcune funzioni logiche:

// Restituisce shop id
let getShopId = result => result.shopId;

// Restituisce una promise con la liste delle pizze del ristorante
let getPizzaList = shopId => {
  const url = `/api/pizzahub/pizza/${shopId}`;
  return query(url);
}

// Restituisce una promise con la pizza che corrisponde alle richieste del cliente
let getMyPizza = (result, type, name) => {
  let pizzas = result.pizzas;
  let myPizza = pizzas.find((pizza) => {
    return (pizza.type===type && pizza.name===name);
  });
  const url = `/api/pizzahub/beverages/${myPizza.id}`;
  return query(url);
}

// Restituisce una promise dopo aver ordinato
let performOrder = result => {
  let beverage = result.id;
   return query(`/api/order`, {'type': result.type, 'name': result.name, 'beverage': result.beverage});
}

// Conferma l'ordine
let confirmOrder = result => {
    console.log(`Your order of ${result.type} ${result.name} with ${result.beverage} has been placed!`);
}

Usiamo queste funzioni per creare le promise necessarie. Questo è il codice che dovresti paragonare con l'esempio dell'inferno di callback. È molto più bello ed elegante.

function orderPizza(type, name) {
  query(`/api/pizzahub/`)
  .then(result => getShopId(result))
  .then(shopId => getPizzaList(shopId))
  .then(result => getMyPizza(result, type, name))
  .then(result => performOrder(result))
  .then(result => confirmOrder(result))
  .catch(function(error){
    console.log(`Bad luck, No Pizza for you today!`);
  })
}

E infine, chiamiamo il metodo orderPizza() passando il tipo e il nome della pizza, in questo modo:

orderPizza('veg', 'margherita');

Cosa viene dopo?

Se sei arrivato fin qui e hai letto la maggior parte di questo articolo, congratulazioni! Dovresti avere un'idea più chiara sulle promise in JavaScript. Puoi trovare tutti gli esempi usati nell'articolo in questo repository GitHub.

Il prossimo passo, dovrebbe essere apprendere le funzioni async in JavaScript che semplificano ulteriormente le cose. Il concetto delle promise in JavaScript si apprende meglio scrivendo dei piccoli esempi e lavorando su di essi.

A prescindere dal framework o dalla libreria che usiamo (Angular, React, Vue, ecc.), le operazioni asincrone sono inevitabili. Questo vuol dire che dobbiamo capire le promise per lavorare meglio.

Inoltre, sono sicuro che l'uso del metodo fetch ti risulterà più facile adesso:

fetch('/api/user.json')
.then(function(response) {
    return response.json();
})
.then(function(json) {
    console.log(json); // {"name": "tapas", "blog": "freeCodeCamp"}
});

• Il metodo fetch restituisce una promise. Quindi possiamo usare il metodo .then.
• Il resto riguarda la catena di promise che abbiamo imparato in questo articolo.

Prima di terminare...

Grazie per aver letto fin qui! Connettiamoci. Puoi taggarmi su Twitter (@tapasadhikary) in un commento.

Potresti trovare interessanti anche questi articoli:

• JavaScript undefined and null: Let's talk about it one last time!
• JavaScript: Equality comparison with ==, === and Object.is
• The JavaScript `this` Keyword + 5 Key Binding Rules Explained for JS Beginners
• JavaScript TypeOf – How to Check the Type of a Variable or Object in JS

È tutto per adesso. Ci vediamo presto con il mio prossimo articolo. Stammi bene.