Var, Let og Const - Hvad er forskellen?

Mange nye nye funktioner kom ud med ES2015 (ES6). Og nu, da det er 2020, antages det, at mange JavaScript-udviklere er blevet fortrolige med og er begyndt at bruge disse funktioner.

Selv om denne antagelse muligvis er delvis sand, er det stadig muligt, at nogle af disse funktioner forbliver et mysterium for nogle devs.

En af de funktioner, der fulgte med ES6, er tilføjelsen af letog constsom kan bruges til variabel erklæring. Spørgsmålet er, hvad der adskiller dem fra god ol, varsom vi har brugt? Hvis du stadig ikke er klar over dette, er denne artikel noget for dig.

I denne artikel vil vi diskutere var, letog const  med hensyn til deres omfang, anvendelse, og løft. Når du læser, skal du være opmærksom på forskellene mellem dem, som jeg vil påpege.

Var

Inden ES6 kom var, regerede erklæringerne. Der er dog problemer forbundet med variabler, der er erklæret med var. Derfor var det nødvendigt for nye måder at erklære variabler opstået på. Lad os først forstå varmere, før vi diskuterer disse spørgsmål.

Omfang af var

Omfang betyder i det væsentlige, hvor disse variabler er tilgængelige til brug. varerklæringer er globalt afgrænset eller funktion / lokalt afgrænset.

Omfanget er globalt, når en varvariabel erklæres uden for en funktion. Dette betyder, at enhver variabel, der er erklæret varuden for en funktionsblok, er tilgængelig til brug i hele vinduet.

varer funktionsomfang, når det erklæres inden for en funktion. Dette betyder, at den er tilgængelig og kun kan tilgås inden for denne funktion.

For at forstå yderligere, se på eksemplet nedenfor.

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

Her greeterer globalt afgrænset, fordi det eksisterer uden for en funktion, mens det helloer funktionsomfang. Så vi kan ikke få adgang til variablen hellouden for en funktion. Så hvis vi gør dette:

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

Vi får en fejl, der skyldes, at vi helloikke er tilgængelige uden for funktionen.

var-variabler kan blive deklareret og opdateret

Dette betyder, at vi kan gøre dette inden for samme omfang og ikke får en fejl.

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

og dette også

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

Hejsning af var

Hejsning er en JavaScript-mekanisme, hvor variabler og funktionserklæringer flyttes til toppen af ​​deres anvendelsesområde inden kodekørsel. Dette betyder, at hvis vi gør dette:

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

det fortolkes som dette:

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

Så varvariabler hejses til toppen af ​​deres omfang og initialiseres med en værdi på undefined.

Problem med var

Der er en svaghed, der følger med   var. Jeg bruger eksemplet nedenfor til at forklare:

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

Så, da times > 3returnerer sandt, greeterer omdefineret til "say Hello instead". Selvom dette ikke er et problem, hvis du bevidst ønsker greeterat blive omdefineret, bliver det et problem, når du ikke er klar over, at en variabel greeterallerede er defineret før.

Hvis du har brugt greeterandre dele af din kode, kan du blive overrasket over det output, du muligvis får. Dette vil sandsynligvis medføre mange fejl i din kode. Dette er grunden til letog conster nødvendige.

Lade

letforetrækkes nu til variabel erklæring. Det er ingen overraskelse, da det kommer som en forbedring af varerklæringerne. Det løser også problemet med, varat vi lige dækkede det. Lad os overveje, hvorfor det er sådan.

Lad os blokere

En blok er et stykke kode afgrænset af {}. En blok lever i krøllede seler. Alt inden for krøllede seler er en blok.

Så en variabel, der er deklareret i en blok med, let  er kun tilgængelig til brug inden for den blok. Lad mig forklare dette med et eksempel:

 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.
• Mens varog letkan erklæres uden initialisering, constskal initialiseres under erklæring.

Har du spørgsmål eller tilføjelser? Lad mig venligst vide.

Tak fordi du læste :)