Var, Let e ​​Const: qual è la differenza?

Con ES2015 (ES6) sono state rilasciate molte nuove brillanti funzionalità. E ora, poiché è il 2020, si presume che molti sviluppatori JavaScript abbiano acquisito familiarità e abbiano iniziato a utilizzare queste funzionalità.

Sebbene questa ipotesi possa essere parzialmente vera, è ancora possibile che alcune di queste funzionalità rimangano un mistero per alcuni sviluppatori.

Una delle funzionalità fornite con ES6 è l'aggiunta di lete const, che possono essere utilizzate per la dichiarazione delle variabili. La domanda è: cosa li rende diversi dal buon vecchio varche abbiamo usato? Se non sei ancora chiaro su questo, allora questo articolo è per te.

In questo articolo, vedremo var, lete const  per quanto riguarda il loro campo di applicazione, uso, e di sollevamento. Mentre leggi, prendi nota delle differenze tra loro che ti indicherò.

Var

Prima dell'avvento di ES6, le vardichiarazioni hanno governato. Tuttavia, ci sono problemi associati alle variabili dichiarate con var. Ecco perché era necessario che emergessero nuovi modi per dichiarare le variabili. Innanzitutto, capiamo di varpiù prima di discutere di questi problemi.

Portata della var

Scope significa essenzialmente dove queste variabili sono disponibili per l'uso. varle dichiarazioni hanno ambito globale o funzione / ambito locale.

L'ambito è globale quando una varvariabile viene dichiarata all'esterno di una funzione. Ciò significa che qualsiasi variabile dichiarata varall'esterno di un blocco funzione è disponibile per l'uso nell'intera finestra.

varha un ambito di funzione quando viene dichiarato all'interno di una funzione. Ciò significa che è disponibile ed è possibile accedervi solo all'interno di quella funzione.

Per capire ulteriormente, guarda l'esempio di seguito.

 var greeter = "hey hi"; function newFunction() { var hello = "hello"; } 

In questo caso, ha l' greeterambito globale perché esiste all'esterno di una funzione mentre helloè nell'ambito della funzione. Quindi non possiamo accedere alla variabile helloal di fuori di una funzione. Quindi, se lo facciamo:

 var tester = "hey hi"; function newFunction() { var hello = "hello"; } console.log(hello); // error: hello is not defined 

Otterremo un errore che è il risultato di hellonon essere disponibili al di fuori della funzione.

Le variabili var possono essere ri-dichiarate e aggiornate

Ciò significa che possiamo farlo nello stesso ambito e non riceveremo un errore.

 var greeter = "hey hi"; var greeter = "say Hello instead"; 

e anche questo

 var greeter = "hey hi"; greeter = "say Hello instead"; 

Sollevamento di var

Il sollevamento è un meccanismo JavaScript in cui le variabili e le dichiarazioni di funzione vengono spostate all'inizio del loro ambito prima dell'esecuzione del codice. Ciò significa che se facciamo questo:

 console.log (greeter); var greeter = "say hello" 

è interpretato come questo:

 var greeter; console.log(greeter); // greeter is undefined greeter = "say hello" 

Quindi le varvariabili vengono sollevate all'inizio del loro ambito e inizializzate con un valore di undefined.

Problema con var

C'è una debolezza che ne deriva   var. Userò l'esempio seguente per spiegare:

 var greeter = "hey hi"; var times = 4; if (times > 3) { var greeter = "say Hello instead"; } console.log(greeter) // "say Hello instead" 

Quindi, poiché times > 3restituisce true, greeterviene ridefinito in "say Hello instead". Anche se questo non è un problema se vuoi consapevolmente greeteressere ridefinito, diventa un problema quando non ti rendi conto che una variabile greeterè già stata definita prima.

Se hai usato greeteraltre parti del tuo codice, potresti essere sorpreso dall'output che potresti ottenere. Questo probabilmente causerà molti bug nel codice. Questo è il motivo lete constsono necessari.

Permettere

letè ora preferito per la dichiarazione delle variabili. Non è una sorpresa in quanto si tratta di un miglioramento delle vardichiarazioni. Risolve anche il problema varappena trattato. Consideriamo perché è così.

let è con ambito di blocco

Un blocco è un pezzo di codice delimitato da {}. Un blocco vive tra parentesi graffe. Qualsiasi cosa all'interno delle parentesi graffe è un blocco.

Quindi una variabile dichiarata in un blocco con let  è disponibile solo per l'uso all'interno di quel blocco. Lasciatemi spiegare questo con un esempio:

 let greeting = "say Hi"; let times = 4; if (times > 3) { let hello = "say Hello instead"; console.log(hello);// "say Hello instead" } console.log(hello) // hello is not defined 

We see that using hello outside its block (the curly braces where it was defined) returns an error. This is because let variables are block scoped .

let can be updated but not re-declared.

Just like var,  a variable declared with let can be updated within its scope. Unlike var, a let variable cannot be re-declared within its scope. So while this will work:

 let greeting = "say Hi"; greeting = "say Hello instead"; 

this will return an error:

 let greeting = "say Hi"; let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared 

However, if the same variable is defined in different scopes, there will be no error:

 let greeting = "say Hi"; if (true) { let greeting = "say Hello instead"; console.log(greeting); // "say Hello instead" } console.log(greeting); // "say Hi" 

Why is there no error? This is because both instances are treated as different variables since they have different scopes.

This fact makes let a better choice than var. When using let, you don't have to bother if you have used a name for a variable before as a variable exists only within its scope.

Also, since a variable cannot be declared more than once within a scope, then the problem discussed earlier that occurs with var does not happen.

Hoisting of let

Just like  var, let declarations are hoisted to the top. Unlike var which is initialized as undefined, the let keyword is not initialized. So if you try to use a let variable before declaration, you'll get a Reference Error.

Const

Variables declared with the const maintain constant values. const declarations share some similarities with let declarations.

const declarations are block scoped

Like let declarations, const declarations can only be accessed within the block they were declared.

const cannot be updated or re-declared

This means that the value of a variable declared with const remains the same within its scope. It cannot be updated or re-declared. So if we declare a variable with const, we can neither do this:

 const greeting = "say Hi"; greeting = "say Hello instead";// error: Assignment to constant variable. 

nor this:

 const greeting = "say Hi"; const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared 

Every const declaration, therefore, must be initialized at the time of declaration.

This behavior is somehow different when it comes to objects declared with const. While a const object cannot be updated, the properties of this objects can be updated. Therefore, if we declare a const object as this:

 const greeting = { message: "say Hi", times: 4 } 

while we cannot do this:

 const greeting = { words: "Hello", number: "five" } // error: Assignment to constant variable. 

we can do this:

 greeting.message = "say Hello instead"; 

This will update the value of greeting.message without returning errors.

Hoisting of const

Just like let, const declarations are hoisted to the top but are not initialized.

So just in case you missed the differences, here they are:

  • var declarations are globally scoped or function scoped while let and const are block scoped.
  • var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared.
  • They are all hoisted to the top of their scope. But while var variables are initialized with undefined, let and const variables are not initialized.
  • While var and let can be declared without being initialized, const must be initialized during declaration.

Got any question or additions? Please let me know.

Thank you for reading :)