Var, Let és Const - Mi a különbség?

Sok fényes új funkció jelent meg az ES2015 (ES6) esetében. És most, 2020 óta, feltételezzük, hogy sok JavaScript-fejlesztő megismerte és elkezdte használni ezeket a funkciókat.

Bár ez a feltételezés részben igaz lehet, mégis lehetséges, hogy ezek a tulajdonságok némelyik fejlesztő számára rejtélyek maradnak.

Az ES6 egyik jellemzője a letés hozzáadása const, amely használható a változó deklarálásához. A kérdés az, hogy miben különböznek a jó ol-tól, varamelyet már használtunk? Ha még mindig nem világos ebben a kérdésben, akkor ez a cikk az Ön számára szól.

Ebben a cikkben, megbeszéljük var, letés const  tekintve, hogy azok körét, használatát, és csörlő. Olvasás közben vegye figyelembe a köztük lévő különbségeket, amelyekre rámutatok.

Var

Az ES6 megjelenése előtt a varnyilatkozatok uralkodtak. A (z) -vel deklarált változókkal kapcsolatban vannak problémák var. Ezért volt szükség a változók deklarálásának új módjainak megjelenésére. Először ismerkedjünk meg varjobban, mielőtt megvitatnánk ezeket a kérdéseket.

A var

A hatókör lényegében azt jelenti, hogy ezek a változók használhatók-e. vara deklarációk globális hatókörűek vagy függvények / lokális hatókörűek.

A hatókör globális, ha egy varváltozót egy függvényen kívül deklarálunk. Ez azt jelenti, hogy bármely változó, amelyet varegy funkcióblokkon kívül deklarálnak, elérhető az egész ablakban.

vara függvény hatóköre, ha azt egy függvényen belül deklarálják. Ez azt jelenti, hogy elérhető és csak ezen a funkción belül érhető el.

A további megértéshez nézze meg az alábbi példát.

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

Itt greeterglobálisan hatókörbe tartozik, mert egy függvényen kívül létezik, míg helloa függvény hatóköre. Tehát a függvényen hellokívül nem férhetünk hozzá a változóhoz . Tehát ha ezt tesszük:

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

Hibát kapunk, ami abból adódik, hogy hellonem érhető el a funkción kívül.

a változók újra deklarálhatók és frissíthetők

Ez azt jelenti, hogy ezt megtehetjük ugyanabban a körben, és nem kapunk hibát.

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

és ez is

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

Var. Emelése

Az emelés egy olyan JavaScript mechanizmus, ahol a változókat és a függvénydeklarációkat a hatókörük tetejére helyezik a kód végrehajtása előtt. Ez azt jelenti, hogy ha ezt tesszük:

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

ezt így értelmezik:

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

Tehát a varváltozókat a hatókörük tetejére emelik és inicializálják undefined.

Probléma a var

Van egy gyengeség, ami ezzel jár   var. Az alábbi példával magyarázom:

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

Tehát, mivel a times > 3true igaz, greeterújradefiniálva van "say Hello instead". Bár ez nem jelent problémát, ha tudatosan greeterújradefiniálni akarod , problémává válik, ha nem veszed észre, hogy egy változót greetermár korábban definiáltak.

Ha greetera kód más részeiben is használta , meglepetést okozhat az esetlegesen kapott kimenet. Ez valószínűleg sok hibát fog okozni a kódban. Ezért letés constszükségesek.

Hagyd

letmost a változó deklarálásnál előnyösebb. Nem meglepő, mivel a varnyilatkozatok javításával jár . Megoldja a problémát azzal is var, hogy az imént kitértünk rá. Vizsgáljuk meg, miért van ez így.

let blokkolják

A blokk egy kódrészlet, amelyet a {} határol. Egy tömb göndör nadrágtartóban él. A göndör zárójelben bármi blokk.

Tehát a -vel egy blokkban deklarált változó let  csak abban a blokkban használható. Hadd magyarázzam el ezt egy példával:

 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 

Látjuk, hogy helloa blokkon kívüli használat (a göndör zárójelek, ahol meghatározták) hibát eredményez. Ez azért van, mert a letváltozók blokk hatókörűek.

let frissíthető, de nem deklarálható újra.

Csakúgy, mint varegy, a deklarált változó leta hatókörén belül frissíthető. Ellentétben vara letváltozó nem deklarálható újra a hatókörében. Tehát bár ez működni fog:

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

ez hibát eredményez:

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

Ha azonban ugyanazt a változót különböző hatókörökben definiálják, akkor nem lesz hiba:

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

Miért nincs hiba? Ez azért van, mert mindkét példányt különböző változóként kezelik, mivel eltérő hatókörrel rendelkeznek.

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.
• While var and let can be declared without being initialized, const must be initialized during declaration.

Got any question or additions? Please let me know.

Thank you for reading :)