Variabili

Le variabili sono una struttura di dati che assegna un nome rappresentativo a un valore. Possono contenere dati di qualsiasi tipo.

Il nome di una variabile è chiamato identificatore. È necessario specificare un identificatore valido queste regole:

• Gli identificatori possono contenere lettere Unicode, simboli del dollaro ($), trattino basso caratteri (_), cifre (0-9) e persino alcuni caratteri Unicode.
• Gli identificatori non possono contenere spazi vuoti, perché l'analizzatore sintattico utilizza spazi vuoti per elementi di input separati. Ad esempio, se provi a chiamare una variabile my Variable anziché myVariable, l'analizzatore sintattico vede due identificatori, my e Variable e genera un errore di sintassi ("token imprevisto: ").

• Gli identificatori devono iniziare con una lettera, un trattino basso (_) o il simbolo del dollaro ($). Non possono iniziare con numeri, per evitare confusione tra numeri e identificatori:

  let 1a = true;
  
  > Uncaught SyntaxError: Invalid or unexpected token
  

  Se JavaScript consentiva l'inserimento di numeri all'inizio di un identificatore, costituiti da solo numeri, causando conflitti tra i numeri utilizzati come numeri e numeri utilizzati come identificatori:

  let 10 = 20
  
  10 + 5
  > ?
  

• "Parole riservate" che sono già sintatticamente significativi non possono essere utilizzati come identificatori.

• Gli identificatori non possono contenere caratteri speciali (! . , / \ + - * =).

Le seguenti non sono regole rigide per la creazione di identificatori, ma best practice del settore che semplificano la gestione del codice. Se la tua specifica ha standard diversi, seguili per coerenza.

Seguendo l'esempio impostato dai metodi e dalle proprietà integrati di JavaScript, casa cammello (anche stilizzata come "camelCase") è una convenzione molto comune per costituiti da più parole. La custodia Camel è la pratica uso dell'iniziale maiuscola per ogni parola, tranne la prima per migliorare la leggibilità senza spazi.

let camelCasedIdentifier = true;

Alcuni progetti utilizzano altre convenzioni di denominazione a seconda del contesto e della natura dei dati. Ad esempio, la prima lettera di una classe. in genere è in maiuscolo, quindi i nomi delle classi con più parole spesso usano una variante del cammello caso comunemente chiamato "minuscolo camel case" o Richiesta Pascal.

class MyClass {

}

Gli identificatori devono descrivere brevemente la natura dei dati che contengono (ad esempio, currentMonthDays è un nome migliore di theNumberOfDaysInTheCurrentMonth) e leggi chiaramente a colpo d'occhio (originalValue è meglio di val). La Gli identificatori myVariable utilizzati in questo modulo funzionano nel contesto di isolati, ma sarebbe molto inutile nel codice di produzione perché non forniscono informazioni sui dati contenuti.

Gli identificatori non dovrebbero essere troppo specifici sui dati che contengono perché i loro valori possono variare a seconda di come gli script agiscono sui dati oppure le decisioni prese dai futuri gestori. Ad esempio, una variabile inizialmente considerata potrebbe essere necessario modificare l'identificatore miles in un valore in chilometri più avanti progetto, richiedendo ai responsabili della manutenzione di modificare qualsiasi riferimento a quella variabile per evitare confusione in futuro. Per evitare che questo accada, usa distance come identificatore .

JavaScript non assegna privilegi o significati speciali agli identificatori che iniziano con il trattino basso (_), ma in genere vengono utilizzati per indicare che una variabile, un metodo o una proprietà è "privato", il che significa che è destinato per l'utilizzo nel contesto dell'oggetto che lo contiene e non deve essere consultati o modificati al di fuori di questo contesto. Questa è una convenzione riportata da altri linguaggi di programmazione ed è precedente all'aggiunta del linguaggio JavaScript proprietà private.

Dichiarazione delle variabili

Esistono diversi modi per far rilevare a JavaScript un identificatore, un processo chiamato "dichiarazione" una variabile. Una variabile viene dichiarata utilizzando gli attributi let, const, o var parole chiave.

let myVariable;

Utilizza let o var per dichiarare una variabile che può essere modificata in qualsiasi momento. Questi parole chiave indicano all'interprete JavaScript che una stringa di caratteri è identificatore che potrebbe contenere un valore.

Quando lavori in un codebase moderno, usa let anziché var. var funziona ancora nei browser moderni, ma presenta alcuni comportamenti non intuitivi definiti in le prime versioni di JavaScript e poi non può essere modificato in un secondo momento preserva la compatibilità con le versioni precedenti. let è stato aggiunto in ES6 per risolvere alcuni problemi con il design di var.

Una variabile dichiarata viene inizializzata assegnando un valore alla variabile. Utilizza un singolo segno di uguale (=) per assegnare o riassegnare un valore a una variabile. Cosa puoi fare questo come parte della stessa istruzione che lo dichiara:

let myVariable = 5;

myVariable + myVariable
> 10

Puoi anche dichiarare una variabile con let (o var) senza inizializzarla immediatamente. In questo caso, il valore iniziale della variabile è undefined fino a quando gli viene assegnato un valore.

let myVariable;

myVariable;
> undefined

myVariable = 5;

myVariable + myVariable
> 10

Una variabile con un valore undefined è diversa da una variabile non definita il cui identificatore non è stato ancora dichiarato. Fare riferimento a una variabile che non hai dichiarate, causano un errore.

myVariable
> Uncaught ReferenceError: myVariable is not defined

let myVariable;

myVariable
> undefined

L'associazione di un identificatore a un valore viene generalmente chiamata "associazione". La sintassi che segue le parole chiave let, var o const è denominata "binding list" e consente di inserire più dichiarazioni di variabili separate da virgole (che termina con il punto e virgola previsto). In questo modo, i seguenti snippet di codice funzionalmente identico:

let firstVariable,
     secondVariable,
     thirdVariable;

let firstVariable;
let secondVariable;
let thirdVariable;

La riassegnazione del valore di una variabile non utilizza let (o var), perché JavaScript sa già che la variabile esiste:

let myVariable = true;

myVariable
> true

myVariable = false;

myVariable
> false

Puoi riassegnare alle variabili nuovi valori in base ai valori esistenti:

let myVariable = 10;

myVariable
> 10

myVariable = myVariable * myVariable;

myVariable
> 100

Se provi a dichiarare nuovamente una variabile utilizzando let in un ambiente di produzione, viene visualizzato un errore di sintassi:

let myVariable = true;
let myVariable = false;
> Uncaught SyntaxError: redeclaration of let myVariable

Browser strumenti per sviluppatori sono più permissive riguardo alla ridichiarazione di let (e class), pertanto potresti non lo stesso errore verrà visualizzato nella console per gli sviluppatori.

Per preservare la compatibilità dei browser precedenti, var consente una nuova dichiarazione non necessaria senza errori in nessun contesto:

var myVariable = true;
var myVariable = false;

myVariable\
> false

const

Utilizza la parola chiave const per dichiarare una costante, un tipo di variabile che deve essere viene subito inizializzato e non può più essere modificato. Identificatori per le costanti segui le stesse regole delle variabili dichiarate utilizzando let (e var):

const myConstant = true;

myConstant
> true

Non puoi dichiarare una costante senza assegnarle immediatamente un valore, le costanti non possono essere riassegnate dopo essere state create, pertanto qualsiasi costante rimarrebbe undefined per sempre. Se provi a dichiarare una costante senza inizializzarlo, viene visualizzato un errore di sintassi:

const myConstant;
Uncaught SyntaxError: missing = in const declaration

Stai tentando di modificare il valore di una variabile dichiarata con const come potresti se modifichi il valore di una variabile dichiarata wit con let (o var), viene generato un tipo errore:

const myConstant = true;

myConstant = false;
> Uncaught TypeError: invalid assignment to const 'myConstant'

Tuttavia, quando una costante è associata a un oggetto, le sue proprietà può essere modificato.

const constantObject = { "firstvalue" : true };

constantObject
> Object { firstvalue: true }

constantObject.secondvalue = false;

constantObject
> Object { firstvalue: true, secondvalue: false }

Una costante che contiene un oggetto è immutabile riferimento a un valore di dati modificabile. Sebbene la costante stessa non possa essere modificata, le proprietà della variabile l'oggetto può essere modificato, aggiunto o rimosso:

const constantObject = { "firstvalue" : true };

constantObject = false
> Uncaught TypeError: invalid assignment to const 'constantObject'

Quando non prevedi che una variabile venga riassegnata, la best practice prevede di renderla una costante. L'utilizzo di const consente al tuo team di sviluppo o a chi gestisce il futuro di una di non modificare quel valore, per evitare di infrangere i presupposti del codice viene usato, ad esempio, che una variabile alla fine viene valutato in base a un tipo di dati previsto.

Ambito variabile

L'ambito di una variabile è la parte di uno script in cui la variabile è disponibile. Al di fuori dell'ambito di una variabile, questa non sarà definita e non come identificatore contenente un valore undefined, ma come se non fosse stato dichiarato.

A seconda della parola chiave che utilizzi per dichiarare una variabile e del contesto in cui la definisci, puoi definire l'ambito delle variabili per bloccare le istruzioni (ambito del blocco), singole funzioni (ambito della funzione) o l'intera applicazione JavaScript (ambito globale).

Ambito del blocco

Qualsiasi variabile dichiarata utilizzando let o const è limitata all'ambito contenente l'istruzione di blocco, il che significa che è possibile accedere alla variabile solo all'interno di quel blocco. Stai tentando di se si accede a una variabile con ambito a blocchi al di fuori del blocco contenitore, la stessa causa è la stessa come tentativo di accedere a una variabile che non esiste:

{
    let scopedVariable = true;
    console.log( scopedVariable );
}
> true

scopedVariable
> ReferenceError: scopedVariable is not defined

Per quanto riguarda JavaScript, non esiste una variabile con ambito a blocchi. all'esterno del blocco che lo contiene. Ad esempio, puoi dichiarare una costante all'interno di un blocco e poi dichiarare un'altra costante esterna a quel blocco che utilizza lo stesso identificatore:

{
  const myConstant = false;
}
const myConstant = true;

scopedConstant;
> true

Anche se una variabile dichiarata non può estendersi nel proprio blocco padre, è disponibili per tutti i blocchi discendenti:

{
    let scopedVariable = true;
    {
    console.log( scopedVariable );
    }
}
> true

Il valore di una variabile dichiarata può essere modificato dall'interno di un blocco discendente:

{
    let scopedVariable = false;
    {
    scopedVariable = true;
    }
    console.log( scopedVariable );
}
> true

Una nuova variabile può essere inizializzata con let o const all'interno di un discendente blocco senza errori, anche se utilizza lo stesso identificatore di una variabile in un blocco padre:

{
    let scopedVariable = false;
    {
    let scopedVariable = true;
    }
    console.log( scopedVariable );
}
> false

Ambito della funzione

Le variabili dichiarate utilizzando var hanno come ambito la funzione contenitore più vicina (o un blocco di inizializzazione statico all'interno di una classe).

function myFunction() {
    var scopedVariable = true;

    return scopedVariable;
}

scopedVariable;
> ReferenceError: scopedVariable is not defined

Questo è ancora il caso dopo che è stata chiamata una funzione. Anche se viene inizializzata mentre la funzione viene eseguita, è ancora non disponibile al di fuori dell'ambito della funzione:

function myFunction() {
    var scopedVariable = true;

    return scopedVariable;
}

scopedVariable;
> ReferenceError: scopedVariable is not defined

myFunction();
> true

scopedVariable;
> ReferenceError: scopedVariable is not defined

Ambito globale

Una variabile globale è disponibile in un'intera applicazione JavaScript, all'interno di qualsiasi blocco e funzione, a qualsiasi script sulla pagina.

Anche se può sembrare un'impostazione predefinita auspicabile, le variabili che qualsiasi parte di un l'applicazione può accedere e modificare, può causare un sovraccarico non necessario o persino collisioni con variabili altrove in un'applicazione con lo stesso identificatore. Questo vale per tutto il codice JavaScript coinvolto nel rendering di una pagina, come librerie e analisi utente. Pertanto, best practice per evitare di inquinare l'ambito globale, se possibile.

Qualsiasi variabile dichiarata utilizzando var al di fuori di una funzione padre oppure utilizzando let o const al di fuori di un blocco padre, è globale:

var functionGlobal = true; // Global
let blockGlobal = true; // Global

{
    console.log( blockGlobal );
    console.log( functionGlobal );
}
> true
> true

(function() {
    console.log( blockGlobal );
    console.log( functionGlobal );
}());
> true
> true

Assegnare un valore a una variabile senza dichiararlo esplicitamente (ovvero, non usa mai var, let o const per crearla) eleva una variabile al in un ambito globale, anche se inizializzato all'interno di una funzione o di un blocco. Una variabile creato utilizzando questo pattern a volte è chiamato "globale implicito".

function myFunction() {
    globalVariable = "global";

    return globalVariable
}

myFunction()\
> "global"

globalVariable\
> "global"

Sollevamento variabile

Le variabili e le dichiarazioni di funzione vengono elevate nella parte superiore del relativo ambito. il che significa che l'interprete JavaScript elabora tutte le variabili dichiarate punta in uno script e lo sposta efficacemente nella prima riga del testo che lo contiene l'ambito prima di eseguire lo script. Ciò significa che una variabile dichiarata utilizzando È possibile fare riferimento a var prima che la variabile venga dichiarata senza rilevare un errore:

hoistedVariable
> undefined

var hoistedVariable;

Poiché è ospitata solo la dichiarazione delle variabili, non l'inizializzazione, variabili che non sono state dichiarate esplicitamente con var, let o const non vengono sollevate:

unhoistedVariable;
> Uncaught ReferenceError: unhoistedVariable is not defined

unhoistedVariable = true;

Come accennato in precedenza, una variabile dichiarata ma non inizializzata viene assegnato il valore undefined. Questo comportamento si applica alle variabili sollevate dichiarazioni, ma solo a quelle dichiarate utilizzando var.

hoistedVariable
> undefined

var hoistedVariable = 2 + 2;

hoistedVariable\
> 4

Questo comportamento non intuitivo è in gran parte un deflusso delle decisioni di progettazione prese in le prime versioni di JavaScript e non può essere modificata senza il rischio di che danneggiano i siti esistenti.

let e const risolvono questo comportamento generando un errore quando un prima della creazione:

{
    hoistedVariable;

    let hoistedVariable;
}
> Uncaught ReferenceError: can't access lexical declaration 'hoistedVariable' before initialization

Questo errore è diverso da "hoistedVariable non definito" errore tu che potrebbe aspettarsi quando si tenta di accedere a una variabile non dichiarata. Poiché JavaScript ha sollevato la variabile, è consapevole che la variabile verrà creata per l'ambito specificato. Tuttavia, invece di rendere disponibile la variabile prima con il valore undefined, l'interprete genera un errore. Le variabili dichiarate con let o const (o class) dovrebbero esistere in un "zona morta temporale" ("TDZ") dall'inizio del blocco che lo contiene fino alla punto nel codice in cui viene dichiarata la variabile.

La zona morta temporale rende il comportamento di let più intuitivo di var per autori. È fondamentale anche per la progettazione di const. Poiché le costanti non possono essere modificata, una costante issata fino all'inizio dell'ambito e gli viene assegnato un valore implicito di undefined non è stato quindi inizializzato con un valore significativo.

Verifica le tue conoscenze