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 let
og const
som kan bruges til variabel erklæring. Spørgsmålet er, hvad der adskiller dem fra god ol, var
som vi har brugt? Hvis du stadig ikke er klar over dette, er denne artikel noget for dig.
I denne artikel vil vi diskutere var
, let
og 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å var
mere, 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. var
erklæringer er globalt afgrænset eller funktion / lokalt afgrænset.
Omfanget er globalt, når en var
variabel erklæres uden for en funktion. Dette betyder, at enhver variabel, der er erklæret var
uden for en funktionsblok, er tilgængelig til brug i hele vinduet.
var
er 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 greeter
er globalt afgrænset, fordi det eksisterer uden for en funktion, mens det hello
er funktionsomfang. Så vi kan ikke få adgang til variablen hello
uden 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 hello
ikke 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å var
variabler 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 > 3
returnerer sandt, greeter
er omdefineret til "say Hello instead"
. Selvom dette ikke er et problem, hvis du bevidst ønsker greeter
at blive omdefineret, bliver det et problem, når du ikke er klar over, at en variabel greeter
allerede er defineret før.
Hvis du har brugt greeter
andre 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 let
og const
er nødvendige.
Lade
let
foretrækkes nu til variabel erklæring. Det er ingen overraskelse, da det kommer som en forbedring af var
erklæringerne. Det løser også problemet med, var
at 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 whilelet
andconst
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 withundefined
,let
andconst
variables are not initialized. - Mens
var
oglet
kan erklæres uden initialisering,const
skal initialiseres under erklæring.
Har du spørgsmål eller tilføjelser? Lad mig venligst vide.
Tak fordi du læste :)