Come dichiarare le variabili in JavaScript

di dichiarazione-variabili-javascript

Lavorare con le variabili è una delle prime cose che impari come programmatore JavaScript. JavaScript è ampiamente utilizzato nello sviluppo web, quindi è importante costruire una buona base di conoscenza.

Dichiarare una variabile in JavaScript è facile perché è un linguaggio adatto agli sviluppatori. La sfida arriva con le parole chiave utilizzate per creare variabili. Esistono tre di queste parole chiave e ognuna ti darà un risultato diverso.

Se conosci tutti e tre i modi per dichiarare una variabile, puoi prendere le giuste decisioni per la tua app. Esaminiamo queste tre parole chiave, come funzionano e quando vengono utilizzate.

Tre modi per dichiarare una variabile JavaScript

Esistono tre parole chiave utilizzate per dichiarare una variabile in JavaScript:

  • var
  • permettere
  • const

È facile codificare una variabile in JavaScript. Ad esempio, ecco come farlo usando la parola chiave var :

 var myVariable = 15;

Questi nuovi metodi sono stati stabiliti con JavaScript ES6 . Prima di sapere come funzionano, è utile avere un background su alcuni termini di programmazione comuni.

Parole chiave

Scopo

L'ambito della variabile è ciò che parti del programma possono vedere la variabile. Alcune variabili avranno una portata limitata, altre sono disponibili per l'intero programma. Le variabili disponibili per l'intero programma hanno un ambito globale .

È necessario conoscere le regole dell'ambito. Man mano che i programmi diventano più grandi userete più variabili. La perdita della traccia dell'ambito può causare errori nei programmi.

Bloccare

Le funzioni create in JavaScript utilizzano parentesi graffe. Il codice all'interno delle parentesi graffe è noto come blocco e puoi annidare tutti i blocchi che vuoi all'interno di una funzione.

Conoscere i blocchi di codice è la chiave per capire come funziona ogni tipo di variabile. Ecco un esempio visivo di blocchi che utilizzano una funzione JavaScript .

 function blockTest(){ //This is a block { //This is a nested block } };

Con questo in mente, impariamo le variabili JavaScript!

1. Variabile JavaScript: var

Quando si dichiara una variabile con var , l'ambito della variabile è:

  • Se dichiarato all'interno di una funzione: la funzione che racchiude
  • Se dichiarato al di fuori di una funzione: ambito globale

Questa è una dichiarazione variabile di base con var . Ci sono alcuni commenti nel codice per aiutarti a guidarti attraverso queste definizioni.

 var test = 5; //Variable declaration function varTest(){ console.log(test); //This prints the variable }; varTest(); >> 5

In questo esempio, il test variabile è stato dichiarato con var e assegnato il valore di 5. La funzione varTest () stampa la variabile nella console. L'output della funzione è 5.

La variabile è stata dichiarata esterna alla funzione, quindi ha un ambito globale. Anche se il test variabile non è stato dichiarato all'interno della funzione, funziona perfettamente.

Se si modifica la variabile all'interno della funzione, il programma produce un risultato diverso.

 var test = 5; function varTest(){ var test = 10; console.log(test); }; varTest(); >> 10

La funzione aggiornata dichiara un test variabile all'interno della funzione e la console legge il nuovo valore (10). La variabile è stata dichiarata all'interno di una funzione, quindi l'ambito del blocco ha la precedenza sull'ambito globale.

Se si stampa la variabile da sola senza eseguire la funzione:

 console.log(test); >> 5

Ottieni il risultato della variabile globale.

2. Variabile JavaScript: Let

L'uso di let per dichiarare le variabili offre loro un ambito più specifico. Le variabili dichiarate usando let sono incluse nel blocco in cui sono dichiarate.

Questa è una funzione con più blocchi e aiuterà a mostrare la differenza tra var e let .

Ecco una funzione che utilizza var all'interno di più blocchi. Dai un'occhiata al codice e vedi se riesci a capire cosa sta succedendo.

 function varTest(){ var test = 5; { var test = 10; console.log(test); } console.log(test); }; 
 varTest(); >> 10 >> 10

Entrambe le uscite sono 10.

Le variabili dichiarate con var sono disponibili per l'intera funzione. Il test variabile è stato dichiarato come 5 nel primo blocco. Nel secondo blocco, la variabile è stata cambiata in 10.

Ciò ha cambiato la variabile per l'intera funzione. Quando il programma arriva al secondo console.log () la variabile è stata cambiata.

Ecco lo stesso esempio con i commenti per seguire la variabile:

 function varTest(){ var test = 5; // Variable created { var test = 10; //Variable changed, 5 is overriden console.log(test); // 10 } console.log(test); // 10, The variable is now 10 for the entire function };

Ecco lo stesso esempio con let , guarda cosa succede all'interno dei blocchi.

 function letTest(){ let test = 5; { let test = 10; console.log(test); } console.log(test); }; 
 letTest(); >> 10 >> 5

Il risultato è cambiato Ecco lo stesso codice con i commenti. Chiamiamo il primo blocco "Blocco A" e il secondo "Blocco B".

 function letTest(){ let test = 5; // Variable created in Block A { let test = 10; // Variable created in Block B, this is a new variable console.log(test); // Prints 10 } console.log(test); // Prints 5, since we're back to Block A }; 
 letTest(); >> 10 >> 5

3. Variabile JavaScript: Cost

L'uso di const per dichiarare una variabile è a blocchi di blocchi proprio come let .

Quando si utilizza const per dichiarare una variabile, non è possibile riassegnare il valore. Inoltre, la variabile non può essere nuovamente dichiarata. Questo dovrebbe essere riservato a variabili importanti nel tuo programma che non cambiano mai.

Pensa a const come abbreviazione di costante. È permanente e non cambia. Se vieni da un altro linguaggio di programmazione come Java, potresti già avere familiarità con questo concetto.

Dichiariamo una variabile const e proviamola.

 const permanent = 10;

Ora proviamo ad apportare alcune modifiche alla variabile e vediamo cosa succede. Prova e modifica il valore della variabile:

 const permanent = 20; >> Uncaught SyntaxError: Identifier 
9;permanent' has already been declared

Il valore non può essere modificato, JavaScript genera un errore nella console. Siamo intelligenti e proviamo a usare una nuova parola chiave variabile per modificare il valore:

 let permanent = 20; >> Uncaught SyntaxError: Identifier 'permanent' has already been declared

Tuttavia, nessuna fortuna a cambiare la variabile. Che ne dici dello stesso valore, con una nuova parola chiave?

 let permanent = 10; >> Uncaught SyntaxError: Identifier 'permanent' has already been declared

Questo non funziona ancora. Anche se il valore è lo stesso, provare a modificare la parola chiave genererà un errore.

Questo è tutto ciò che serve per usare la parola chiave const . Salvalo per le variabili speciali che devi proteggere nel programma.

Diventare un esperto JavaScript

Questo tutorial ha suddiviso le tre parole chiave utilizzate per dichiarare le variabili JavaScript. Vedrai tutti e tre questi tipi durante la tua carriera di sviluppo web, quindi è importante familiarizzare.

C'è molto altro da imparare. Imparare cos'è JavaScript e come funziona ti preparerà per lo sviluppo web moderno. Ora che hai dimestichezza con le variabili, scopri di più su come JavaScript interagisce con il Document Object Model e prova un progetto pratico come la creazione di una presentazione JavaScript .

Leggi l'articolo completo: come dichiarare le variabili in JavaScript