Var, Let og Const - Hva er forskjellen?

Mange skinnende nye funksjoner kom ut med ES2015 (ES6). Og nå, siden det er 2020, antas det at mange JavaScript-utviklere har blitt kjent med og har begynt å bruke disse funksjonene.

Selv om denne antagelsen kan være delvis sant, er det fortsatt mulig at noen av disse funksjonene forblir et mysterium for noen devs.

En av funksjonene som fulgte med ES6 er tillegg letog constsom kan brukes til variabel deklarasjon. Spørsmålet er hva som skiller dem fra god olje varsom vi har brukt? Hvis du fremdeles ikke er klar over dette, er denne artikkelen noe for deg.

I denne artikkelen vil vi diskutere var, letog const  med hensyn til omfanget, bruken og heisen. Mens du leser, må du merke deg forskjellene mellom dem som jeg vil påpeke.

Var

Før adventen av ES6 varstyrte erklæringer. Det er imidlertid problemer knyttet til variabler som er erklært med var. Det var derfor det var nødvendig med nye måter å erklære at variabler skulle dukke opp. La oss først forstå varmer før vi diskuterer disse problemene.

Omfanget av var

Omfang betyr egentlig hvor disse variablene er tilgjengelige for bruk. varerklæringer er globalt omfang eller funksjon / lokalt omfang.

Omfanget er globalt når en varvariabel blir erklært utenfor en funksjon. Dette betyr at enhver variabel som er erklært varutenfor en funksjonsblokk, er tilgjengelig for bruk i hele vinduet.

varer funksjonsomfang når det er erklært innenfor en funksjon. Dette betyr at den er tilgjengelig og kun er tilgjengelig i den funksjonen.

For å forstå nærmere, se på eksemplet nedenfor.

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

Her greeterer verdensomfattende fordi det eksisterer utenfor en funksjon mens hellofunksjonen er omfanget. Så vi får ikke tilgang til variabelen helloutenfor en funksjon. Så hvis vi gjør dette:

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

Vi får en feil som er et resultat av at vi helloikke er tilgjengelige utenfor funksjonen.

var-variabler kan deklareres og oppdateres

Dette betyr at vi kan gjøre dette innenfor samme omfang og ikke får noen feil.

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

og dette også

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

Heising av var

Heising er en JavaScript-mekanisme der variabler og funksjonserklæringer flyttes til toppen av omfanget før kodeutførelse. Dette betyr at hvis vi gjør dette:

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

det tolkes slik:

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

varvariabler heises til toppen av omfanget og initialiseres med verdien undefined.

Problem med var

Det er en svakhet som følger med   var. Jeg bruker eksemplet nedenfor for å forklare:

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

Så, siden times > 3returnerer sant, greeterer omdefinert til "say Hello instead". Selv om dette ikke er et problem hvis du bevisst vil greeterbli omdefinert, blir det et problem når du ikke er klar over at en variabel greeterallerede er definert før.

Hvis du har brukt greeterandre deler av koden din, kan du bli overrasket over utdataene du kan få. Dette vil sannsynligvis føre til mange feil i koden din. Dette er hvorfor letog conster nødvendige.

La

leter nå foretrukket for variabel deklarasjon. Det er ingen overraskelse da det kommer som en forbedring av varerklæringer. Det løser også problemet med varat vi nettopp dekket det. La oss vurdere hvorfor dette er slik.

la oss blokkere

En blokk er et stykke kode begrenset av {}. En blokk lever i krøllete bukseseler. Alt innen krøllete bukseseler er en blokk.

Så en variabel erklært i en blokk med let  er bare tilgjengelig for bruk i den blokken. La meg 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 

Vi ser at bruk helloutenfor blokken (de krøllete bukseselene der den ble definert) returnerer en feil. Dette er fordi letvariabler er blokkomfanget.

la kan oppdateres, men ikke deklareres på nytt.

Akkurat som varen variabel som er erklært med, letkan oppdateres innenfor omfanget. I motsetning til var, kan en letvariabel ikke deklareres på nytt innenfor dens omfang. Så mens dette vil fungere:

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

dette vil gi en feil:

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

Imidlertid, hvis den samme variabelen er definert i forskjellige omfang, vil det ikke være noen feil:

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

Hvorfor er det ingen feil? Dette er fordi begge forekomster blir behandlet som forskjellige variabler siden de har forskjellige omfang.

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 uten å være initialisert, constmå den initialiseres under erklæringen.

Har du spørsmål eller tillegg? Vennligst la meg vite.

Takk for at du leser :)