Az ES6 2015-ös véglegesítése új módszereket hozott a JavaScript-változók meghatározására. A let kulcsszó létrehoz egy blokk hatókörű változót, míg const megváltoztathatatlan értéket határoz meg. Az alábbiakban bemutatjuk, hogyan különböznek ezek a modern változó típusok a klasszikustól var.
Var
ES6 előtt, var volt az egyetlen lehetőséged a változó definiálásakor. A segítségével létrehozott változók értékeit szabadon megváltoztathatja var. Visszaadhatja magát a változót is.
var demo = "first value"; var demo = "second value"; demo = "third value"; example = "this throws an error - variable not declared";
Használata var létrehoz egy változót, amely az aktuális függvényre terjed ki. Abban az esetben, ha egy függvényen kívül használja, a kapott változó globális hatókörbe kerül.
A változó „hatóköre” leírja, hogy hol használható. A függvény hatókörű változó kóddal érhető el az azt meghatározó függvényben. A globális változó az egész kódjában elérhető.
var myGlobal = "global"; function testA() { var myFunctionScope = "testA"; console.log(myFunctionScope); console.log(myGlobal); } function testB() { myGlobal = "overwritten!"; console.log(myGlobal); // console.log(myFunctionScope); // ERROR } testA(); testB(); testA();
Ebben a példában a globális hatókörű és a függvényre ható változók közötti különbséget mutatjuk be. myGlobal mindkettő olvashatja (és megírhatja) testA és testB. myFunctionScope csak a testA, így testB hibát dob, amikor megpróbálja elérni. Íme, amit ez a példa adna ki:
testA global overwritten! testA overwritten!
Az értéke myFunctionScope az egyes funkciókon belül külön-külön tartják fenn. Az értéke myGlobal mindkét funkcióban frissül, amikor testB felülírja.
Hagyd
Az újabb let kulcsszó a modern alternatívája a var. Gyakran fogadhat örökbe let minden olyan helyen, ahol régen írtál var. Fontos különbségeket kell azonban megjegyezni.
A legjelentősebb let jellemzője a hatóköre. A változókat a teljes függvény helyett egyedi kódblokkokra kell felvenni. A JavaScript-ben a blokk egy kódrész, amely göndör zárójelbe van tekerve. Minden egyes let változó csak a blokkjában lévő kódhoz érhető el.
function letTest(x) { let demo = "hello world"; if (x > 10) { let y = 9000; demo = "foobar"; } console.log(demo); // "foobar" console.log(y); // ERROR }
Ebben a példában a if utasítás új kódblokkot hoz létre. A blokkok öröklik a szülőblokk hatókörét, így a demo változó elérhető marad. A y változó a if nyilatkozat. Megpróbál hozzáférni y kívül if blokk meghatározatlan változó hibát eredményez.
Tetszik var, változóval létrehozva let bármikor megváltoztathatják értékeiket. Bár nem lehet újból bejelenteni – felhasználva let kétszer ugyanazon névvel egyetlen blokkban hibát okoz.
let demo = "test"; demo = "example"; let demo = "test"; // ERROR
Kivételt képez egy változó beágyazott hatókörben történő újbóli deklarálása. A blokkszintű hatókör szabályai azt jelentik, hogy ez megengedett – végül kettővel jár különálló változók, amelyek véletlenül azonos azonosítóval rendelkeznek.
let foo = "bar"; if (true) { let foo = "foobar"; console.log(foo); } console.log(foo);
A fenti példa kibocsátaná foobar bar. A foo változó újból deklarálva van a if blokk, anélkül, hogy befolyásolná a foo a külső hatókör változója. Elveszíti azt a képességet, hogy a külső változóra hivatkozhasson a belső blokkon belül.
Const
A const kulcsszó volt egy másik ES6 kiegészítés. Blokk-hatókörű let. const rövidítése az „állandó”, és változhatatlan értékek esetén használatos, amelyek soha nem változnak. Megpróbálja frissíteni az a értékét const változó mindig hibát fog eredményezni.
const foo = "bar"; const foo = "foobar"; // ERROR
Ennek következtében mindig inicializálnia kell const értékű változók. Az a meghatározása nem megengedett const és később állítsa be az értékét.
let demoLet; // OK var demoVar; // OK const demoConst; // ERROR const demoConst = "value"; // OK
Technikailag, const nem határoz meg állandó értéket. Valójában létrehoz egy állandó referencia értékre. Ennek az a hatása, hogy továbbra is frissítheti az a-hoz rendelt objektumok tulajdonságait const. Hibák csak akkor fordulnak elő, ha a const magát a megbízás bal oldalán.
Melyik változótípust használjam?
Örökbe kellene fogadnod let a legtöbb általános célú változóhoz a JavaScript-kódban. A blokk szintű hatókör és a tiltott újrabejelentés segít elkapni a hibákat és elkerülni a nem szándékos felülírást.
Használata let megállítja a változó „szivárgást”, ahol a változók olyan hatókörökben érhetők el, amelyekre nem szánják őket. Klasszikus példa a ciklusokban történő iterátorok:
for (var i = 0; i <= 10; i++) { // do something } console.log(i);
Ez azt eredményezné 10 kijön a konzolba. Használata let ehelyett kibocsátaná undefined, mint a i változó elérhetetlen lenne a if. hatálya. Ilyen esetekben általában ez a kívánt eredmény.
A hurkok is bemutatják a veszélyeit var áthelyezés:
for (var i = 0; i <= 10; i++) { setTimeout(() => console.log(i), 1000); }
Első pillantásra úgy néz ki ez a kód kellene adja ki az 1-10 számokat. Ehelyett 10 tízszer lesz naplózva. setTimeout() aszinkron és i a visszahívásban van lexikailag kötött hatálya alá. Mint var i a hurokban használatos, a i változó minden egyes iterációnál új értéket kap. Amikor az időzítő visszahívása fut, mind a tíz iteráció már befejeződött és i mindig a végső értékig oldódik meg – 10, ebben az esetben.
Használata let i ehelyett kijelentené a új nevű változó i a hurok minden iterációjához. Minden változó megtartja saját értékét az iteráció befejezése után, ami a várt napló kimenetet eredményezi.
Mikor nem szabad használni Let
Vannak olyan esetek, amikor nem szabad használni let. Használnia kell const amikor olyan változót hoz létre, amelyről tudja, hogy soha nem fog változni. A csomagolók és a statikus elemző eszközök ezután képesek lesznek figyelmeztetni Önt, ha ön akaratlanul is megpróbálja hozzárendelni az értékét.
Általában célszerű változókat változatlanul tartani, ahol csak lehetséges. Ez segít felszámolni a nem szándékos felülírás okozta hibákat. Használata const segít abban is, hogy a kódbázisban jelezze szándékát, egyértelművé téve, hogy az érték nem változik.
Az ES6 jellemzői, mint pl let és const ma már általánosan támogatják a modern böngészők. Néhány régebbi, teljes ES6 támogatás nélküli böngésző, nevezetesen az Internet Explorer 11 is kínálja őket. Csak akkor kell aggódnia, hogy rendelkezésre állnak-e, hacsak nem egy nagyon dátumozott platformot céloz meg. Használat let és const hogy tisztább legyen a kódja és csökkentse a rejtett hibák kockázatát.
