La prima cosa che studieremo riguarda la struttura del codice.
Istruzioni
Le istruzioni sono dei costrutti sintattici e comandi che permettono di eseguire azioni.
Abbiamo già visto un’istruzione alert('Hello, world!'), che mostra il messaggio “Hello world!”.
All’interno del codice possiamo avere tutte le istruzioni che desideriamo. Le istruzioni possono essere separate da un punto e virgola.
Ad esempio, qui dividiamo il messaggio in due alert:
alert('Hello'); alert('World');Di solito ogni istruzione viene scritta in una riga separata per rendere il codice molto più leggibile:
alert('Hello');
alert('World');Punto e virgola
Un punto e virgola può essere omesso nella maggior parte dei casi quando si interrompe una riga.
Questo funzionerà ugualmente:
alert('Hello')
alert('World')In questo caso, JavaScript interpreta la fine della riga come un punto e virgola “implicito”. Viene anche chiamata inserimento automatico del punto e virgola.
In molti casi la nuova riga viene interpretata come un punto e virgola implicito. Ma “in molti casi” non significa “sempre”!
Ci sono casi in cui la nuova riga non implica una punto e virgola, per esempio:
alert(3 +
1
+ 2);Il codice stampa 6 perché, in questo caso, JavaScript non inserisce un punto e virgola. E’ abbastanza ovvio che se la riga finisce con un "+", allora è un “espressione incompleta”, quindi il punto e virgola sarebbe errato. Per questo, nell’esempio sopra, tutto funziona come dovrebbe.
Ma ci sono casi in cui JavaScript “fallisce” nell’interpretare un punto e virgola, dove invece sarebbe necessario.
Gli errori di questo tipo sono molto difficili da trovare e sistemare.
Se sei curioso di vedere un esempio concreto di questo tipo di errore, dai un occhiata al seguente codice:
alert("Hello");
[1, 2].forEach(alert);Non c’e bisogno di pensare al significato delle parentesi [] e al forEach. Li studieremo più avanti, per ora è sufficiente sapere il risultato: mostrerà 1 e poi 2.
Adesso andiamo a rimuovere il punto e virgola dopo alert:
alert("Hello")
[1, 2].forEach(alert);La differenza rispetto al codice precedente è solo un carattere, il punto e virgola al termine della prima line è sparito.
Se eseguiamo il codice, verrà mostrato solo il primo Hello (ci sarà un errore, ma per visualizzarlo bisogna aprire la console). Non verranno più mostrati i numeri.
Questo perché JavaScript non inserisce il punto e virgola prima della parentesi quadre [...]. Quindi il codice viene interpretato come un singolo comando.
Ecco come il motore interpreta il codice: