Průvodce JavaScript variabilní zvedání s let a const

Noví vývojáři JavaScriptu mají často potíže pochopit jedinečné chování zvedání proměnných / funkcí.

Vzhledem k tomu, že se chystáme mluvit o var, nechat a prohlášení o prohlášení později, je důležité pochopit variabilní zvedání, nikoli funkční zvedání. Pojďme se ponořit!

Co je variabilní zvedání?

Stroj JavaScript zpracovává všechna deklarace proměnných pomocí proměnné „var“, jako by byla deklarována v horní části funkčního rozsahu (pokud je deklarována uvnitř funkce) nebo globálního rozsahu (pokud je deklarována mimo funkci), bez ohledu na to, kde se skutečné deklarace objeví. To je v zásadě „zvedání“.

Proměnné tedy mohou být skutečně k dispozici před jejich deklarací.

Podívejme se na to v akci ..

// VÝSTUP: nedefinováno
console.log (tvar);
var shape = "square";
// OUTPUT: "square"
console.log (tvar);

Pokud přicházíte z jazyků založených na C, očekáváte, že při vyvolání první konzole bude vyvolána chyba, protože proměnný tvar nebyl v tomto okamžiku definován. Interpret jazyka JavaScript se však dívá dopředu a „zvedá“ všechny proměnné deklarace nahoru a inicializace zůstává na stejném místě.

Co se děje v zákulisí:

// deklarace zvednutá nahoře
var tvar;
// VÝSTUP: nedefinováno
console.log (tvar);
shape = "square";
// OUTPUT: "square"
console.log (tvar);

Tady je další příklad tentokrát ve funkčním rozsahu, aby věci byly jasnější:

funkce getShape (podmínka) {
    // zde existuje tvar s hodnotou undefined
    // VÝSTUP: nedefinováno
    console.log (tvar);
    if (podmínka) {
        var shape = "square";
        // nějaký další kód
        návratový tvar;
    } jinde {
        // tvar zde existuje s hodnotou undefined
        návrat false;
    }
}

Ve výše uvedeném příkladu můžete vidět, jak je deklarace tvaru zvednuta v horní části funkce getShape (). Důvodem je, že pokud / else bloky nevytvářejí místní rozsah, jak je vidět v jiných jazycích. Lokální obor je v podstatě funkční rozsah v JavaScriptu. Tvar je proto přístupný všude mimo blok if a uvnitř funkce s hodnotou „undefined“.

Toto výchozí chování JavaScriptu má spravedlivý podíl na výhodách a nevýhodách. Ne plné pochopení může vést k drobným, ale nebezpečným chybám v našem kódu.

Zadejte prohlášení na úrovni bloku!

ES6 zavedl možnosti škálování na úrovni bloků, aby poskytoval vývojářům větší kontrolu a flexibilitu v průběhu životního cyklu proměnné.

Prohlášení na úrovni bloku se provádějí v blokových / lexikálních rozsahech, které jsou vytvářeny uvnitř bloku „{}“.

nechat prohlášení

Tato syntaxe je podobná variantě var, stačí nahradit var s nechat deklarovat proměnnou, jejíž rozsah je pouze tento kódový blok.

Umístěte vaše letová prohlášení nahoře v bloku tak, aby byla dostupná v rámci celého tohoto bloku.

Například:

funkce getShape (podmínka) {
// tvar zde neexistuje
// console.log (tvar); => ReferenceError: tvar není definován
if (podmínka) {
        let shape = "square";
        // nějaký další kód
        návratový tvar;
    } jinde {
        // tvar zde také neexistuje
        návrat false;
    }
}

Všimněte si, jak tvar existuje pouze uvnitř bloku if, a vyvolá chybu při přístupu mimo něj namísto výstupu nedefinovaného jako náš předchozí případ s deklaracemi var.

POZNÁMKA: Pokud již byl identifikátor identifikován uvnitř oboru s var, použití stejného identifikátoru v deklaraci let uvnitř stejného oboru vyvolá chybu.
Rovněž není vyvolána žádná chyba, pokud deklarace let vytvoří proměnnou se stejným názvem jako proměnná ve vnějším oboru. (Tento případ je stejný s prohlášeními o ústavě, o kterých budeme brzy mluvit.)

Například:

var shape = "square";

let shape = "rectangle";
// SyntaxError: Identifikátor 'tvar' již byl deklarován

a:

var shape = "square";
if (podmínka) {
    // nevyhodí chybu
    let shape = "rectangle";
    // další kód
}
// Žádná chyba

const Prohlášení

Syntaxe deklarace je podobná let & var, životní cyklus je stejný jako let. Musíte ale dodržovat některá pravidla.

Vazby deklarované pomocí const jsou považovány za konstanty, a proto nemohou být znovu přiřazeny hodnoty, jakmile jsou definovány. Z tohoto důvodu musí být každé prohlášení ústavy inicializováno v době prohlášení.

Například:

// platné
const shape = "triangle";
// syntaktická chyba: chybí inicializace
konstantní barva;
// TypeError: Přiřazení konstantní proměnné
shape = "square"

Vlastnosti objektu však lze upravit!

const shape = {
    název: "trojúhelník",
    strany: 3
}
// PRÁCE
shape.name = "square";
shape.sides = 4;
// SyntaxError: Neplatný inicializátor vlastnosti zkratky
shape = {
    název: "hexagon",
    strany: 6
}

Ve výše uvedeném příkladu vidíme, že pouze vlastnosti objektu tvaru bylo možné změnit, protože měníme pouze to, co tvar obsahuje, nikoli to, k čemu je vázán.

Můžeme to shrnout říkáním, že const zabraňuje modifikaci vazby jako celku - ne hodnotě, k níž je vázána.

Poznámka: Vlastnosti lze mutovat. Takže pro skutečnou nezměnitelnost použijte Immitable.js nebo Mori.

Časová mrtvá zóna

Nyní víme, že přístup k proměnným let nebo const před jejich deklarací vyvolá ReferenceError. Toto období mezi zadáním rozsahu a vyhlášením v případě, že k nim nelze získat přístup, se nazývá dočasná mrtvá zóna.

Všimněte si, že „dočasná mrtvá zóna“ není ve specifikaci ECMAScript formálně uvedena. Je to jen populární výraz mezi programátory.

Osobně doporučuji, abyste vždy používali const, protože to vede k menšímu počtu chyb. Ještě jsem se nesetkal se situací, kdy jsem potřeboval použít var.

Obecně platí, že let nechte použít pouze pro počitadla smyček nebo pouze v případě, že opravdu potřebujete nové přiřazení. Všude jinde, použijte const. Osobně jsem prošil smyčky pro filtr (), mapu () a redukovat (). Měl bys také.

Nezapomeňte si prohlédnout část 2 týkající se funkce Zdvihání funkcí a důležité otázky týkající se rozhovoru týkající se tématu zvedání v JS.

Klikněte zde pro můj článek o některých užitečných nových funkcích v ES6 souvisejících s funkcemi.

Uvidíme se příště. Mír! ️️