Var, Let a Const - Aký je rozdiel?
S produktom ES2015 (ES6) vyšlo veľa lesklých nových funkcií. A teraz, od roku 2020, sa predpokladá, že veľa vývojárov JavaScriptu oboznámilo s týmito funkciami a začalo ich používať.
Aj keď tento predpoklad môže byť čiastočne pravdivý, je stále možné, že niektoré z týchto funkcií zostávajú pre niektorých vývojárov záhadou.
Jednou z funkcií ES6 je pridanie let
a const
, ktoré je možné použiť na deklaráciu premennej. Otázkou je, v čom sa líšia od dobrého oleja, var
ktorý používame? Ak v tom stále nemáte jasno, potom je tento článok určený práve pre vás.
V tomto článku sa budeme diskutovať var
, let
a const
vzhľadom na ich rozsah, použitia a zdvíhacie. Pri čítaní si všimnite rozdiely medzi nimi, na ktoré budem poukazovať.
Var
Pred príchodom ES6 var
vládli vyhlásenia. S premennými deklarovanými pomocou sú však problémy var
. Preto bolo nevyhnutné, aby sa objavili nové spôsoby deklarovania premenných. Po prvé, poďme pochopiť var
viac, skôr ako o týchto problémoch diskutujeme.
Rozsah var
Rozsah v podstate znamená, kde sú tieto premenné k dispozícii na použitie. var
deklarácie sú globálne alebo funkčne / lokálne.
Ak je var
premenná deklarovaná mimo funkcie, rozsah je globálny . To znamená, že akákoľvek premenná, ktorá je deklarovaná var
mimo funkčného bloku, je k dispozícii na použitie v celom okne.
var
je funkcia s rozsahom, keď je deklarovaná v rámci funkcie. To znamená, že je k dispozícii a je k dispozícii iba v rámci tejto funkcie.
Ak chcete lepšie porozumieť, pozrite si príklad uvedený nižšie.
var greeter = "hey hi"; function newFunction() { var hello = "hello"; }
Tu greeter
je globálne rozsah, pretože existuje mimo funkcie, zatiaľ čo hello
rozsah funkcií. Nemôžeme teda získať prístup k premennej hello
mimo funkcie. Takže ak to urobíme:
var tester = "hey hi"; function newFunction() { var hello = "hello"; } console.log(hello); // error: hello is not defined
Dostaneme chybu, ktorá bude výsledkom toho, že hello
nebudeme k dispozícii mimo funkcie.
premenné var môžu byť opätovne deklarované a aktualizované
To znamená, že to môžeme urobiť v rovnakom rozsahu a nedostaneme chybu.
var greeter = "hey hi"; var greeter = "say Hello instead";
a toto tiež
var greeter = "hey hi"; greeter = "say Hello instead";
Zdvíhanie var
Zdvíhanie je mechanizmus JavaScriptu, pri ktorom sa premenné a vyhlásenia funkcií posúvajú pred vykonaním kódu na vrchol ich rozsahu. To znamená, že ak to urobíme:
console.log (greeter); var greeter = "say hello"
interpretuje sa to takto:
var greeter; console.log(greeter); // greeter is undefined greeter = "say hello"
Takže var
premenné sú zdvihnuté na vrchol svojho rozsahu a inicializované s hodnotou undefined
.
Problém s var
Je tu slabosť, ktorá prichádza var
. Nasledujúci príklad použijem na vysvetlenie:
var greeter = "hey hi"; var times = 4; if (times > 3) { var greeter = "say Hello instead"; } console.log(greeter) // "say Hello instead"
Pretože times > 3
návraty sú pravdivé, greeter
je predefinovaný na "say Hello instead"
. Aj keď to nie je problém, ak chcete vedome greeter
byť predefinovaní, stane sa to problémom, keď si neuvedomíte, že premenná greeter
už bola predtým definovaná.
Ak ste použili greeter
v iných častiach svojho kódu, mohli by ste byť prekvapení, aký výstup by vás mohol dostať. To pravdepodobne spôsobí veľa chýb vo vašom kóde. To je dôvod let
a const
sú potrebné.
Poďme
let
sa teraz uprednostňuje pre deklaráciu premennej. Nie je žiadnym prekvapením, pretože ide o vylepšenie var
vyhlásení. Vyrieši to tiež problém, var
ktorý sme práve pokryli. Zvážme, prečo je to tak.
nech je blok s rozsahom
Blok je kus kódu ohraničený znakom {}. Blok žije v zložených zátvorkách. Čokoľvek v zložených zátvorkách je blok.
Premenná deklarovaná v bloku s let
je teda k dispozícii iba na použitie v rámci tohto bloku. Vysvetlím to na príklade:
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
Vidíme, že použitie hello
mimo jeho bloku (zložené zátvorky, kde boli definované) vráti chybu. Je to tak preto, lebo let
premenné majú blokovaný rozsah.
let sa dá aktualizovať, ale nie znova deklarovať.
Rovnako ako var
premennú deklarovanú ako let
možno aktualizovať v rámci jej rozsahu. Na rozdiel od var
toho let
nemožno premennú v rámci jej rozsahu znova deklarovať. Takže zatiaľ čo to bude fungovať:
let greeting = "say Hi"; greeting = "say Hello instead";
toto vráti chybu:
let greeting = "say Hi"; let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared
Ak je však rovnaká premenná definovaná v rôznych rozsahoch, nebude tam žiadna chyba:
let greeting = "say Hi"; if (true) { let greeting = "say Hello instead"; console.log(greeting); // "say Hello instead" } console.log(greeting); // "say Hi"
Prečo nie je chyba? Je to tak preto, lebo s obidvomi inštanciami sa zaobchádza ako s rôznymi premennými, pretože majú rôzny rozsah.
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. - Kým
var
alet
je možné deklarovať bez inicializácie,const
musí sa inicializovať počas deklarácie.
Máte nejaké otázky alebo doplnky? Prosím daj mi vedieť.
Ďakujem za čítanie :)