Var, Let ja Const - mis vahe on?
ES2015 (ES6) puhul tuli välja palju säravaid uusi funktsioone. Ja nüüd, alates 2020. aastast, eeldatakse, et paljud JavaScripti arendajad on neid funktsioone tundma õppinud ja hakanud kasutama.
Kuigi see eeldus võib olla osaliselt tõsi, on siiski võimalik, et mõned neist funktsioonidest jäävad mõne arendaja jaoks saladuseks.
Üks omadusi, mis oli ES6 on lisaks let
ja const
mida saab kasutada muutuja deklaratsiooni. Küsimus on, mis eristab neid heast olust, var
mida oleme kasutanud? Kui teil pole selles osas veel selge, siis see artikkel on mõeldud teile.
Selles artiklis me arutada var
, let
ja const
seoses nende ulatust, kasutamine ja heiskamise. Lugedes pange tähele nende vahelisi erinevusi, millele ma tähelepanu juhin.
Var
Enne ES6 tulekut var
valitsesid deklaratsioonid. Domeeniga deklareeritud muutujatega on seotud probleeme var
. Seepärast oli vaja muutujate deklareerimiseks uusi võimalusi. Esmalt var
õpime enne nende küsimuste arutamist rohkem aru saama .
Var. Ulatus
Ulatus tähendab sisuliselt seda, kus need muutujad on kasutamiseks saadaval. var
deklaratsioonid on globaalse ulatusega või funktsioneerivad / lokaliseeritakse.
Reguleerimisala on globaalne, kui var
muutuja deklareeritakse väljaspool funktsiooni. See tähendab, et kõik muutujad, mis on deklareeritud var
väljaspool funktsiooniplokki, on saadaval kasutamiseks kogu aknas.
var
on funktsiooni ulatus, kui see deklareeritakse funktsiooni sees. See tähendab, et see on saadaval ja sellele pääseb juurde ainult selles funktsioonis.
Edasiseks mõistmiseks vaadake allpool toodud näidet.
var greeter = "hey hi"; function newFunction() { var hello = "hello"; }
Siin greeter
on globaalne ulatus, kuna see eksisteerib väljaspool funktsiooni, samal ajal kui funktsioon hello
on reguleeritud. Seega ei saa me muutujale juurde pääseda hello
väljaspool funktsiooni. Nii et kui me seda teeme:
var tester = "hey hi"; function newFunction() { var hello = "hello"; } console.log(hello); // error: hello is not defined
Saame vea, mis on tingitud sellest, et hello
pole saadaval väljaspool funktsiooni.
muutujaid saab uuesti deklareerida ja uuendada
See tähendab, et saame seda teha samas ulatuses ja viga ei saa.
var greeter = "hey hi"; var greeter = "say Hello instead";
ja seda ka
var greeter = "hey hi"; greeter = "say Hello instead";
Var. Tõstmine
Tõstmine on JavaScripti mehhanism, kus muutujad ja funktsioonideklaratsioonid viiakse enne koodi täitmist oma ulatuse tippu. See tähendab, et kui me seda teeme:
console.log (greeter); var greeter = "say hello"
seda tõlgendatakse järgmiselt:
var greeter; console.log(greeter); // greeter is undefined greeter = "say hello"
Seega var
tõstetakse muutujaid oma ulatuse tippu ja lähtestatakse väärtusega undefined
.
Probleem var
Sellega kaasneb nõrkus var
. Kasutan selgitamiseks allpool toodud näidet:
var greeter = "hey hi"; var times = 4; if (times > 3) { var greeter = "say Hello instead"; } console.log(greeter) // "say Hello instead"
Niisiis, kuna tulemus on times > 3
tõene, greeter
määratletakse uuesti "say Hello instead"
. Kuigi see pole probleem, kui soovite teadlikult greeter
ümber määratleda, muutub see probleemiks, kui te ei saa aru, et muutuja greeter
on juba varem määratletud.
Kui olete greeter
oma koodi teistes osades kasutanud , võite üllatunud saada oleva väljundi üle. Tõenäoliselt põhjustab see teie koodis palju vigu. Sellepärast let
ja const
on vaja.
Lase
let
on nüüd eelistatav muutujadeklaratsiooni jaoks. See pole üllatav, sest see tuleb var
deklaratsioonide täiustamisena . See lahendab ka probleemi sellega, var
mida me just käsitlesime. Mõelgem, miks see nii on.
laske blokeerida
Blokk on koodiosa, mida piirab {}. Plokk elab lokkis traksidega. Kõik lokkis traksidega on blokk.
Nii et muutuja, mis on deklareeritud plokis koos, let
on saadaval kasutamiseks ainult selles plokis. Lubage mul seda selgitada ühe näitega:
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
Näeme, et hello
väljaspool selle plokki (lokkis traksid, kus see oli määratletud) kasutamine annab vea. Seda seetõttu, et let
muutujad on blokeeritud.
Let saab uuendada, kuid mitte uuesti deklareerida.
Täpselt nagu saab var
deklareeritud muutujat let
selle ulatuse piires värskendada. Erinevalt var
, et let
muutuja ei saa uuesti deklareerida oma ulatuses. Ehkki see töötab:
let greeting = "say Hi"; greeting = "say Hello instead";
see tagastab vea:
let greeting = "say Hi"; let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared
Kuid kui sama muutuja on määratletud erinevates ulatuses, pole viga:
let greeting = "say Hi"; if (true) { let greeting = "say Hello instead"; console.log(greeting); // "say Hello instead" } console.log(greeting); // "say Hi"
Miks pole viga? Seda seetõttu, et mõlemat eksemplari käsitletakse erinevate muutujatena, kuna nende ulatus on erinev.
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. - Kuigi
var
jalet
võib kuulutada ilma initsialiseerimiseniconst
tuleb initsialiseerida ajal deklaratsiooni.
Kas teil on küsimusi või täiendusi? Palun anna mulle teada.
Aitäh, et lugesid :)