Grammatica e tipi

Questo capitolo tratta la sintassi di base di JavaScript, le dichiarazioni di variabili, i tipi di dati e i letterali.

Nozioni di base

JavaScript mutua molta della sua sintassi da Java, ma è anche influenzato da Awk, Perl e Python.

JavaScript è sensibile al maiuscolo-minuscolo (case-sensitive) e usa l'insieme di caratteri Unicode.

In JavaScript, le istruzioni sono separate da punto e vigola (;). Spazi, tabulazioni e charatteri di a capo sono chiamati spazi bianchi. Il testo sorgente di uno script JavaScript viene analizzato da sinistra verso destra ed è convertito in una sequenza di elementi di input che sono: token, caratteri di controllo, terminatori di linea, commenti o spazi bianchi. ECMAScript definisce anche determinate parole chiave e letterali e ha delle regole per l'inserimento automatico dei punti e virgola (ASI) per chiudere le istruzioni. Tuttavia si raccomanda di aggiungere sempre un punto e virgola per terminare ogni istruzione, questo eviterà effetti collaterali. Per maggiori informazioni si veda il riferimento dettagliato riguardo la lexical grammar di JavaScript.

Commenti

La sintassi dei commenti è la stessa di quelli del C++ e di molti altri linguaggi:

// una linea di commento
 
/* questo è un commento più lungo, 
   occupa più linee
 */
 
/* Però non puoi /* annidare i commenti */ SyntaxError */

Dichiarazioni

Ci sono tre tipi di dichiarazioni in JavaScript.

var

Dichiarazione di una variabile, opzionalmente inizializzata ad un valore.

let

Dichiarazione di una variabile locale con visibilità nel blocco, opzionalmente inizializzata ad un valore.

const

Dichiarazione di una costante in sola lettura con un nome.

Variabili

Le variabili sono nomi simbolici da usare nelle applicazioni in luogo dei valori che rappresentano. I nomi delle variabili, chiamati  identificatori, devono seguire certe regole di scrittura.

Un identificatore JavaScript deve iniziare con una lettera, un trattino basso (_) o segno del dollaro ($), mentre i caratteri successivi possono anche essere le cifre (0-9). Siccome JavaScript è case-sensitive, le lettere includono i caratteri da "A" fino a "Z" (maiuscoli) e i caratteri da "a" fino a "z" (minuscoli).

Si possono usare anche le lettere ISO 8859-1 o Unicode come per esempio å e ü negli identificatori. Possono essere usate anche le sequenze di escape di Unicode come caratteri negli identificatori.

Alcuni esempi di nomi leciti sono Number_hits, temp99 e _name.

Dichiarazione di variabili

Una variabile può essere dichiarata in tre modi:

• Con la parola chiave var, per esempio, var x = 42. Questa sintassi può essere usata per dichiarare sia variabili locali che globali.
• Semplicemente assegnandole un valore. Per esempio, x = 42. questo dichiara sempre una variabile globale. Genera uno warning nella modalità strict di JavaScript. Questa variante non dovrebbe essere usata.
• Con la parola chiave let, ad esempio, let y = 13. Questa sintassi può essere usata per dichiarare una variabile locale visibile in un blocco. Vedi Visibilità delle variabili più in basso.

Valutazione delle variabili

Una variabile dichiarata usando le istruzioni  var o let senza nessun valore iniziale specificato ha il valore undefined.

Il tentativo di accedere ad una variabile non dichiarata o di accedere ad un identificatore dichiarato con l'istruzione let, prima di una sua inizializzazione, provocherà un'eccezione di ReferenceError:

var a;
console.log("Il valore di a è " + a); // Scrive nel log "Il valore di a è undefined"

console.log("Il valore di b è " + b); // Solleva una eccezione ReferenceError

console.log("Il valore di c è " + c); // Scrive nel log "Il valore di c è undefined" 
var c; 

console.log("Il valore di x è " + x); // Solleva una eccezione ReferenceError: x is not defined
let x;

Si può usare undefined per determinare se una variabile ha un valore oppure no. Nel codice seguente alla variabile input non è stato assegnato un valore e la condizione dell'istruzione if è

valuta a true.

var input;
if(input === undefined){
  faiQuesto();
} else {
  faiQuello();
}

Il valore undefined si comporta come false quando viene usato in un contesto booleano. Ad esempio il codice seguente esegue la funzione miaFunzione perché l'elemento di mioArray non è definito:

var mioArray = [];
if (!mioArray[0]) miaFunzione(); 

Il valore undefined viene convertito in NaN quando viene usato in un contesto numerico.

var a;
a + 2;  // Viene valutato a NaN

Quando viene valutata una variabile null, il valore null si comporta come 0 in un contesto numerico e false in un contesto booleano. Per esempio:

var n = null;
console.log(n * 32); // Visualizzera nella console 0

Visibilità delle variabili

Quando una variabile viene dichiarata fuori da una qualsiasi funzione viene chiamata variabile globale, poiché è disponibile  in tutto il codice nel documento corrente. Quando invece la variabile viene dichiarata in una funzione viene chiamata variabile locale, perché è disponibile soltanto all'interno di quella funzione.

JavaScript prima di ECMAScript 2015 non aveva una visibilità a livello di blocco; piuttosto una variabile dichiarata all'interno di un blocco era locale alla funzione (o al contesto globale) in cui il blocco risiedeva. Per esempio il seguente codice scriverà nel log 5, perché la visibilità di x è la funzione (o il contesto globale) all'interno del quale x viene dichiarata e non il blocco, che in questo caso è l'istruzione if.

if (true) {
  var x = 5;
}
console.log(x);  // 5

Il comportamento cambia quando si usa l'istruzione let introdotta in ECMAScript 2015.

if (true) {
  let y = 5;
}
console.log(y);  // ReferenceError: y non è definita

Sollevamento delle variabili

Un'altra cosa inusuale riguardo le variabili in JavaScript è che si può fare riferimento ad una variabile dichiarata più avanti nello script senza causare una eccezione. Questo concetto è conosciuto come innalzamento (hoisting); le variabili in JavaScript sono in un certo senso "sollevate" o spostate all'inizio della definizione del corpo della funzione o dell'istruzione. Tuttavia le variabili che sono state sollevate ritornano il valore undefined. Dunque se viene usata (o si fa riferimento ad) una variabile prima che venga dichiarata questa ritornà undefined.

/**
 * Esempio 1
 */
console.log(x === undefined); // visualizza "true" nel log
var x = 3;

/**
 * Esempio 2
 */
var myvar = "mio valore";
 
(function() {
  console.log(myvar); // visualizza "undefined" nel log
  var myvar = "valore locale";
})();

L'esempio sopra sarà interpretato nello stesso modo di:

/**
 * Esempio 1
 */
var x;
console.log(x === undefined); // visualizza nel log "true"
x = 3;
 
/**
 * Esempio 2
 */
var myvar = "mio valore";
 
(function() {
  var myvar;
  console.log(myvar); // undefined
  myvar = "valore locale";
})();

Per via dell'innalzamento, tutte le istruzioni var in una funzione dovrebbero essere posizionate prima di ogni altra istruzione che vada a definire una funzione. Questa buona pratica incrementa la chiarezza del codice.

In ECMAScript 2015, let (const) non solleverà/sposterà la variabile all'inizio della dichiarazione del blocco, dunque un riferimento alla variabile nel blocco prima che questa venga dichiarata risulterà in un'eccezione di ReferenceError. La variabile si dice in una "zona temporale morta" ("temporal dead zone") dall'inizio del blocco fino alla a che non si incontri la sua dichiarazione.

console.log(x); // Solleverà un'eccezione ReferenceError
let x = 3

Sollevamento delle Funzioni

Nel caso delle funzioni, solo la dichiarazione della funzione verrà spostata all'inizio. Se la funzione viene introdotta da un'espressione, in questo caso non verrà spostata.

/* Function declaration */

foo(); // "bar"

function foo() {
  console.log("bar");
}


/* Function expression */

baz(); // TypeError: baz is not a function

var baz = function() {
  console.log("bar2");
};

Variabli globali

Le variabili globali sono in effetti proprietà dell'oggetto globale. Nelle pagine web l'oggetto globale è window quindi è possibile impostare e accedere alle variabili globali usando la sintassi window.variabile.

Di conseguenza è possibile accedere a variabili globali dichiarate in una finestra o un frame da un'altra finestra o frame specificando il nome della finestra o del frame. Per esempio, se una variabile chiamata numeroDiTelefono è dichiarata in un documento, è possibile far riferimento a questa variabile dall'interno di un iframe come parent.numeroDiTelefono.

Costanti

È possibile creare una costante in sola lettura dandole un nome usando la parola chiave const. La sintassi di un identificatore di costante è la stessa di un identificatore di variabile: deve iniziare con una lettera, trattino basso (_) o segno del dollaro ($) e può contenere caratteri alfabetici, numerici o trattini bassi.

const PI = 3.14;

Una costante non può cambiare il suo valore attraverso ulteriori assegnazioni o essere ridichiarata mentre lo script è in esecuzione. Deve anche essere inizializzata ad un valore.

Le regole di visibilità per le costanti sono le stesse di quelle per le variabil con visibilità al livello di blocco dichiarate con l'istruzione let. Se la parola chiave const viene omessa si assume che l'identificatore rappresenta una variabile.

Non è possibile dichiarare una costante con lo stesso nome di una funzione o di una variabile nello stesso spazio di visibilità. Per esempio:

// QUESTO CAUSERÀ UN ERRORE
function f() {};
const f = 5;

// ANCHE QUESTO CAUSERÀ UN ERRORE
function f() {
  const g = 5;
  var g;

  //istruzioni
}

Strutture dati e tipi

Tipi di dato

L'ultimo standard ECMAScript definisce sette tipi di dati:

• Sei tipi di dato che sono primitives:
  • Boolean. true e false.
  • null. Una parola chiave che denota un valore nullo. Siccome JavaScript è case-sensitive, null non è lo stesso di Null, NULL, o qualsiasi altra variante.
  • undefined. Una proprietà top-level il cui valore non è stato definito.
  • Number. 42 oppure 3.14159.
  • String. "Salve"
  • Symbol (nuovo in ECMAScript 2015). Un tipo di dato la cui istanza è unica e immutabile.
• e Object

Sebbene questi tipi di dati siano relativamente pochi questi permettono di eseguire funzioni utili nelle applicazioni. Objects e functions sono altri elementi fondamentali nel linguaggio. Si può pensatre agli oggetti come a contenitori con un nome per dei valori e alle funzioni come a procedure che l'applicazione può compiere.

Conversione dei tipi dei dati

JavaScript è un linguaggio con tipi assegnati dinamicamente. Questo significa che non si va a specificare il tipo di dato che una variabile conterrà quando viene dichiarata e anche che il tipo di un dato viene convertito automaticamente a seconda delle necessità durante l'esecuzione dello script. Così, per esempio, puoi si può definire una variabile come segure:

var risposta = 42;

E più avanti è possibile assegnare alla stessa variabile un valore testo (stringa), per esempio:

answer = "Grazie per tutti i pesci...";

Poiché in JavaScript i tipi si assegnano dinamicamente questa assegnazione non causerà un messaggio di errore.

Nelle espressioni che coinvolgono valori numerici e stringhe con l'operatore + JavaScript converte i valori numerici in stringhe. Per esempio si considerino le seguenti istruzioni:

x = "La risposta è " + 42 // "La risposta è 42"
y = 42 + " è la risposta" // "42 è la risposta"

In istruzioni che coinvolgono altri operatori JavaScript non converte valori numerici in stringa. Per esempio:

"37" - 7 // 30
"37" + 7 // "377"

Conversione delle stringhe in numeri

Nel caso in cui il valore che rappresenta un numero è memorizzato come stringa ci sono dei metodi per eseguire la conversione:

• parseInt()
• parseFloat()

parseInt ritornerà soltanto numeri interi,  ha una utilità ridotta per i numeri decimali. In aggiunta è buona pratica nell'uso di parseInt includere il parametro base, questo parametro è usato per specificare quale sistema di numerazione deve essere usato.

Un metodo alternativo per recuperare un numero da un testo è di usare l'operatore + (più unario):

"1.1" + "1.1" = "1.11.1"
(+"1.1") + (+"1.1") = 2.2   
// Note: le parentesi sono aggiunte per chiarezza, non sono richieste.

Letterali

I letterali sono usati per rappresentare i valori in JavaScript. Questi sono valori fissati, non variabili, che venvono letteralmente inseriti nello script. Questa sezione descrive i seguenti tipi di letterali:

• Letterali di array
• Letterali di booleani
• Letterali di numeri in virgola-mobile
• Letterali di numeri Interi
• Letterali di oggeti
• Letterali di RegExp
• Letterali di stringhe

Letterali di array

Un letterale di array è un elenco di zero o più espressioni ognuna delle quali rappresenta un elemento dell'array, inclusa in parentesi quadre ([]). Quando si crea un array usando un letterale l'array stesso viene inizializzato con i valori specificati come elementi, la sua lunghezza è impostata al numero di elementi specificati.

Il seguente esempio crea un array tipiDiCaffe con tre elementi e una lunghezza di tre:

var tipiDiCaffe = ["French Roast", "Colombian", "Kona"];

Se un array viene creato usando un letterale in uno scrit top-level, JavaScript interpreta l'array ogni volta che valuta l'espressione che contiene l'array letterale. In aggiunta l'array letterale usato in una funzione viene creato ogni volta che la funzione viene chiamata.

Gli array letterali sono anche oggetti Array. Si veda Array e Collezione indicizzata per i dettagli sugli oggetti Array.

Virgole aggiuntive negli array letterali

Non è obbligatorio specificare tutti gli elementi in un array letterale. Mettendo due virgole in fila l'array viene creato con il valore undefined per gli elementi non specificati. Il seguente esempio crea l'array pesce:

var pesce = ["Leone", , "Angelo"];

Questo array ha due elementi con un valore e un elemento vuoto (pesce[0] is "Leone", pesce[1] è undefined, e pesce[2] è "Angelo").

Inserendo una virgola in fondo alla lista degli elementi la virgola stessa verrà ignorata. Nel seguente esempio la lunghezza dell'array è tre, non c'è un miaLista[3]. Tutte le altre virgole nell'elenco indicano un elemento nuovo.

var miaLista = ['casa', , 'scuola', ];

Nel seguente esempio la lunghezza dell'array è quattro e miaLista[0] e mialista[2] sono mancanti.

var miaLista = [ , 'casa', , 'scuola'];

Nel seguente esempio la lunghezza dell'array è quattro e mialista[1] e miaLista[3] sono mancanti. Soltanto l'ultima virgola viene ignorata.

var miaLista = ['casa', , 'scuola', , ];

Comprendere il comportamento delle virgole in più è importante per comprendere JavaScript come limguaggio, in ogni caso nella scrittura del codice: è buona norma dichiarare esplicitamente gli elementi mancanti come undefined, questo migliorerà la chiarezza e la manutenibilità del codice.

Letterali di booleani

Il tipo Boolean ha due valori letterali: true e false.

Non vanno confusi i valori primitivi Booleani true e false con i valori true e false dell'oggetto Boolean. L'oggetto Boolean è un involucro intorno al tipo primitivo Booleano. Vedi Boolean per maggiori informazioni.

Letterali di numeri Interi

Gli interi possono essere rappresentati in decimale (base 10), esadecimale (base 16), ottale (base 8) e binario (base 2).

• I letterali decimali interi sono formati da una sequenza di cifre senza uno 0 (zero) iniziale.
• 0 (zero) iniziali in un letterale intero, o un iniziale 0o (o 0O) indicano che il numero è in ottale. Gli interi ottali possono includere soltanto le cifre 0-7.
• Un iniziale 0x (o 0X) indica l'esadecimale. Interi esadecimali possono includere le cifre (0-9) e le lettere a-f e A-F.

• Un iniziale 0b (o 0B) indica il binario. Gli interi binari possono includere soltanto le cifre 0 e 1.

Alcuni esempi i di letterali di interi sono:

0, 117 and -345 (decimale, base 10)
015, 0001 and -0o77 (ottale, base 8) 
0x1123, 0x00111 and -0xF1A7 (esadecimale, "hex" o base 16)
0b11, 0b0011 and -0b11 (binario, base 2)

Per maggiori informazioni, vedi Numeric literals in the Lexical grammar reference.

Letterali di numeri in virgola-mobile

Un letterale per un numero in virgola mobile può avere le seguenti parti:

• Un intero in base dieci che può avere un segno (cioè può essere preceduto da "+" o "-"),
• Un punto decimale ("."),
• Una parte decimale (un altro numero in base dieci),
• Un esponente.

La parte esponente è una "e" o "E" seguita da un intero che può essere con segno (preceduto da "+" o "-"). Un numero in virgola mobile deve avere almeno una cifra e un punto oppure una "e" (o "E").

Più concisamente la sintassi è:

[(+|-)][cifre][.cifre][(E|e)[(+|-)]cifre]

Per esempio:

3.1415926
-.123456789
-3.1E+12
.1e-23

Letterali di oggeti

Un letterale di un oggetto è una lista di zero o più coppie di nomi di proprietà e valori associati di un oggetto racchiusi in parentesi graffe ({}). Non andrebbe usato un letterale di un oggetto all'inizio di una istruzione, questo porterà ad un errore o non si comporterà come ci si aspetta perché { sarà interpretata come l'inizio di un blocco.

Quello seguente è un esempio di un letterale di un oggetto. Il primo elemento dell'oggetto automobile definisce un proprietà, miaAutomobile, e gli assegna il testo "Saturn"; il secondo elemento, la proprietà getAutomobile, è immediatamente assegnata al valore risultante dall'invocazione della funzione (tipiDiAutomobile("Honda")); il terzo elemento, la proprietà speciale, usa una variabile esistente (saldi).

var saldi = "Toyota";

function tipiDiAutomobile(nome) {
  if (nome === "Honda") {
    return nome;
  } else {
    return "Spiacente, noi non vendiamo " + nome + ".";
  }
}

var automobile = { miaAutomobile: "Saturn", getAutomobile: tipiDiAutomobile("Honda"), speciale: saldi };

console.log(automobile.miaAutomobile);   // Saturn
console.log(automobile.getAutomobile);  // Honda
console.log(automobile.speciale); // Toyota 

In aggiunta si possono usare letterali di tipo numerico o testo come nome di una proprietà o annidare un oggetto dentro un altro. Il seguente esempio usa queste opzioni.

var automobile = { molteAutomobili: {a: "Saab", "b": "Jeep"}, 7: "Mazda" };

console.log(automobile.molteAutomobili.b); // Jeep
console.log(automobile[7]); // Mazda

I nomi delle proprietà degli oggetti possono essere un testo qualsiasi, incluso il testo vuoto. Se il nome della proprietà non è un identifier JavaScript valido o un numero dovrà essere racchiuso tra virgolette. I nomi di proprietà che non sono identificatori validi non possono neanche essere acceduti usando il punto (.), potranno però essere acceduti e impostati usando la notazione analoga a quella degli array ("[]").

var nomiDiProprietaInusuali = {
  "": "Una stringa vuota",
  "!": "Bang!"
}
console.log(nomiDiProprietaInusuali."");   // SyntaxError: Unexpected string
console.log(nomiDiProprietaInusuali[""]);  // Una stringa vuota
console.log(nomiDiProprietaInusuali.!);    // SyntaxError: Unexpected token !
console.log(nomiDiProprietaInusuali["!"]); // Bang!

In ES2015, i letterali di oggetti sono estesi per supportare l'impostazione del prototipo al momento della costruzione, forme abbreviate per le assegnazioni tipo foo: foo, definizioni di metodi, eseguire chiamate a super e calcolare il nome di proprietà con espressioni. Nel'insieme queste aggiunte avvicinano i letterali di oggetti e le dichiarazioni delle classi permettendo quindi di beneficiare di alcune delle stesse comodità della progettazione orientata agli oggetti.

var obj = {
    // __proto__
    __proto__: theProtoObj,
    // Abbreviazione per ‘handler: handler’
    handler,
    // Metodi
    toString() {
     // Super calls
     return "d " + super.toString();
    },
    // Nomi di proprietà calcolati (dinamici)
    [ 'prop_' + (() => 42)() ]: 42
};

Nota che:

var foo = {a: "alpha", 2: "two"};
console.log(foo.a);    // alpha
console.log(foo[2]);   // two
//console.log(foo.2);  // Error: missing ) after argument list
//console.log(foo[a]); // Error: a is not defined
console.log(foo["a"]); // alpha
console.log(foo["2"]); // two

Letterali di RegExp

Un letterale di espressione regolare (RegExp) è un modello (pattern) racchiuso tra barre. il seguente è un esempio di un letterale di una espressione regolare.

var re = /ab+c/;

Letterali di stringhe

Un letterale di testo (stringa nel preguo del testo) è formato da zero o più caratteri racchiusi tra virgolette doppie  (") o singole (').  Una stringa deve essere delimitata da virgolette dello stesso tipo; cioè o entrambe singole o entrambe doppie. I seguenti sono esempi di leterali di testo:

"foo"
'bar'
"1234"
"una linea \n altra linea"
"prima dell'una"

È possibile chiamare qualsiasi metodo dell'oggetto String su una stringa —JavaScript converte automaticamente la stringa in un oggetto temporaneo di tipo String, chiama il metodo, poi elimina l'oggetto temporaneo. È anche possibile usare la proprietà String.length con una stringa letterale:

console.log("John's cat".length) 
// Stamperà il numero di simboli nel testo inclusi gli spazi. 
// In questo caso 10.

In ES2015 sono disponibili i letterali dei modelli. I modelli di testo fornisco dello "zucchero sintattico" per la costruzione delle stringhe. È simile all'interpolazione delle stringhe di Perl, Python e altri. Opzionalmente, un'etichetta può essere aggiunta per permettere la personalizzazione nella costruzione della stringa, evitare gli attacchi per injection o costruire strutture dati di livello più alto dal contenuto di una stringa.

// Creazione di un letteral estring di base
`In JavaScript '\n' is a line-feed.`

// Stringa multilinea
`In JavaScript this is
 not legal.`

// Interpolazione di stringhe
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

// La costruzione di un prefisso di richiesta HTTP è usata per interpretare le sostituzioni e le costruzioni 
POST`https://foo.org/bar?a=${a}&b=${b}
     Content-Type: application/json
     X-Credentials: ${credentials}
     { "foo": ${foo},
       "bar": ${bar}}`(myOnReadyStateChangeHandler);

Si dovrebbero usare i letterali stringa a meno che non ci sia specifico bisogno di usare un oggetto String. Si veda String per dettagli sull'oggetto String.

Uso di caratteri speciali nelle stringhe

Oltre ai caratteri ordinari si possono includere anche dei caratteri speciali nelle stringhe come mostrato nel seguente esempio.

"prima linea \n seconda linea"

La seguente tabella elenca i caratteri speciali che possono essere usati nelle stringhe JavaScript.

Caratteri a cui aggiungere il backslash (Escaping)

Per i caratteri non elencati nella tabella un backslash (\) prefisso viene ignorato, questo uso è deprecato e devrebbe essere evitato.

Le virgolette possono essere inserite in una stringa precedendole da un backslash. Questo è noto come escaping delle virgolette. Per esempio:

var quote = "Lui legge \"The Cremation of Sam McGee\" by R.W. Service.";
console.log(quote);

Il risultato sarebbe:

Lui legge "The Cremation of Sam McGee" by R.W. Service.

Per includere un backslash in una stringa va fatto l'esape del carattere backslash. Per esempio, per assegnare il percorso c:\temp ad una stringa, usare il seguente:

var home = "c:\\temp";

Si può anche fare l'escape delle interruzioni di linea precedendole con un backslash. Sia il backslash che l'interruzione di linea saranno rimosse dal valore della stringa.

var str = "questa stringa \
è spezzata \
attraverso multiple\
linee."
console.log(str);   // questa stringa è spezzata attraverso multiple linee.

Sebbene JavaScript non abbia una sintassi tipo "heredoc", è possibile fare qualcosa di simile aggiungendo una sequenza di escape per "a capo" e facendo l'escape dell'a capo alla fine della linea:

var poem = 
"Roses are red,\n\
Violets are blue.\n\
I'm schizophrenic,\n\
And so am I."

Ulteriori informazioni

Questo capitolo si concentra sulla sintassi di base per i tipi e le dichiarazioni. Per imparare di più riguardo i costrutti del linguaggio JavaScript vedi anche i seguenti capitoli in questa guida:

• Controllo del flusso e gestione errori
• Cicli e iterazioni
• Funzioni
• Espresioni e operatori

Nel prossimo capitolo, tratteremo i costrutti del controllo del flusso e la gestione degli errori.