Vadovas „JavaScript“ kintamajam kėlimui su „let and const“

Naujiems „JavaScript“ kūrėjams dažnai būna sunku suprasti unikalų kintamo / funkcijos kėlimo elgesį.

Kadangi mes vėliau kalbėsime apie var, let ir const deklaracijas, svarbu suprasti kintamąjį kėlimą, o ne funkcijų kėlimą. Pasinerkime!

Kas yra kintamasis kėlimas?

„JavaScript“ variklis traktuoja visas kintamųjų deklaracijas, naudodamas „var“, tarsi jos būtų deklaruotos funkcinės apimties viršuje (jei deklaruota funkcijos viduje) arba bendroje apimtyje (jei deklaruota funkcijos išorėje), neatsižvelgiant į tai, kur yra tikroji deklaracija. Iš esmės tai yra „kėlimas“.

Taigi kintamieji iš tikrųjų gali būti prieinami prieš jų deklaraciją.

Pažiūrėkime tai veikiantį ..

// IŠĖJIMAS: neapibrėžtas
console.log (forma);
var formos = "kvadratas";
// IŠĖJIMAS: „kvadratas“
console.log (forma);

Jei esate iš C kalbų, galite tikėtis, kad iškviečiant pirmąjį console.log bus padaryta klaida, nes kintama forma toje vietoje nebuvo apibrėžta. Bet „JavaScript“ interpretatorius žvelgia į priekį ir „pakelia“ visas kintamųjų deklaracijas į viršų, o paleidimas lieka toje pačioje vietoje.

Štai kas vyksta užkulisiuose:

// deklaracija keliama viršuje
var forma;
// IŠĖJIMAS: neapibrėžtas
console.log (forma);
forma = "kvadratas";
// IŠĖJIMAS: „kvadratas“
console.log (forma);

Tai dar vienas pavyzdys, šį kartą pateikiantis funkcinę sritį, kad viskas būtų aiškiau:

funkcija getShape (sąlyga) {
    // forma čia egzistuoja su neapibrėžta reikšme
    // IŠĖJIMAS: neapibrėžtas
    console.log (forma);
    if (sąlyga) {
        var formos = "kvadratas";
        // kitas kodas
        grąžinimo forma;
    } Kitas {
        // forma čia egzistuoja su neapibrėžta reikšme
        grąžinti klaidingą;
    }
}

Aukščiau pateiktame pavyzdyje galite pamatyti, kaip formos deklaracija yra pakeliama „getShape ()“ funkcijos viršuje. Taip yra todėl, kad jei blokai / kiti blokai nesukuria vietinės apimties, kaip matyti kitomis kalbomis. Vietos sritis iš esmės yra „JavaScript“ funkcijos apimtis. Todėl forma yra prieinama visur, kur nėra „if“ bloko, ir funkcijos viduje, kurios reikšmė „neapibrėžta“.

Šis „JavaScript“ numatytasis elgesys turi tam tikrą pranašumų ir trūkumų dalį. Tai nevisiškai suprantant, mūsų kodekse gali būti subtilių, bet pavojingų klaidų.

Įveskite blokų lygio deklaracijas!

ES6 pristatė bloko lygio taikymo sritis, kad kūrėjams būtų suteikta daugiau galimybių valdyti ir lanksčiau valdyti kintamojo gyvenimo ciklą.

Bloko lygio deklaracijos sudaromos bloko / leksinės apimties, sukurtos bloke „{}“, viduje.

tegul deklaracijos

Ši sintaksė yra panaši į var, tiesiog pakeiskite var su let, kad deklaruotumėte kintamąjį, o jo apimtis yra tik tas kodo blokas.

Įkelkite leidimų deklaracijas viršuje į bloką, kad jie būtų prieinami visame bloke.

Pavyzdžiui:

funkcija getShape (sąlyga) {
// formos čia nėra
// console.log (forma); => ReferenceError: forma nėra apibrėžta
if (sąlyga) {
        tegul forma = "kvadratas";
        // kitas kodas
        grąžinimo forma;
    } Kitas {
        // Forma neegzistuoja ir čia
        grąžinti klaidingą;
    }
}

Atkreipkite dėmesį, kaip forma egzistuoja tik „if“ bloko viduje, ir išmeta klaidą, kai pasiekiama už jos ribų, užuot išleidusi neapibrėžtą, kaip mūsų ankstesnis atvejis su var deklaracijomis.

PASTABA: Jei identifikatorius jau buvo apibrėžtas srities „var“ viduje, naudojant tą patį identifikatorių leidimo deklaracijoje toje pačioje taikymo srityje bus padaryta klaida.
Be to, nė viena klaida neišmetama, jei leidimo deklaracija sukuria kintamąjį tokiu pačiu pavadinimu kaip ir kintamasis išorinėje jo taikymo srityje. (Šis atvejis yra tas pats su const deklaracijomis, apie kurias netrukus kalbėsime.)

Pavyzdžiui:

var formos = "kvadratas";

tegul forma = "stačiakampis";
// SyntaxError: Identifikatoriaus „forma“ jau buvo deklaruota

ir:

var formos = "kvadratas";
if (sąlyga) {
    // neišmeta klaidos
    tegul forma = "stačiakampis";
    // daugiau kodo
}
// Jokios klaidos

const deklaracijos

Deklaracijos sintaksė panaši į let & var, gyvavimo ciklas toks pat kaip let. Bet jūs turite laikytis kai kurių taisyklių.

Ryšiai, deklaruojami naudojant const, yra traktuojami kaip konstantos, todėl jiems nebus galima priskirti reikšmių, kai jie bus apibrėžti. Dėl šios priežasties kiekviena const deklaracija turi būti inicijuota deklaravimo metu.

Pavyzdžiui:

// galiojantis
const formos = "trikampis";
// sintaksės klaida: trūksta iniciacijos
const spalva;
// TypeError: priskyrimas pastoviam kintamajam
forma = "kvadratas"

Tačiau objekto savybes galima modifikuoti!

const formos = {
    pavadinimas: "trikampis",
    šonai: 3
}
// DARBAI
forma.vardas = „kvadratas“;
forma.šonai = 4;
// „SyntaxError“: netinkamas sutrumpintos nuosavybės pradinis elementas
forma = {
    pavadinimas: "šešiakampis",
    šonai: 6
}

Aukščiau pateiktame pavyzdyje matome, kad gali būti pakeistos tik formos objekto savybės, nes keičiame tik tai, kas yra formos, o ne tai, kas jai privaloma.

Apibendrindami galime pasakyti, kad const neleidžia modifikuoti viso įrišimo, o ne vertė, kurią jis įpareigoja.

Pastaba: savybes galima pakeisti. Taigi, jei norite tikro nekintamumo, naudokite Immvable.js arba Mori.

Laikinoji negyvoji zona

Dabar mes žinome, kad pasiekus let arba const kintamuosius prieš juos paskelbiant, bus sunaikinta „ReferenceError“. Šis laikotarpis nuo patekimo į taikymo sritį iki paskelbimo ten, kur su jais negalima patekti, vadinamas laikine mirusiųjų zona.

Atminkite, kad „laikinoji negyvoji zona“ nėra oficialiai minima ECMAScript specifikacijoje. Tai tiesiog populiarus terminas tarp programuotojų.

Aš asmeniškai rekomenduoju visada naudoti const, nes tai lemia mažiau klaidų. Dar neteko susidurti su situacija, kai reikėjo naudoti var.

Paprastai naudokite tik „loop“ skaitikliams arba tik tuo atveju, jei jums tikrai reikia perskirstymo. Visur kitur naudokite const. Asmeniškai aš įpyliau filtrų (), žemėlapio () ir sumažinti () kilpų. Jūs taip pat turėtumėte.

Būtinai perskaitykite šios dalies 2 skyrių „Funkcinis kėlimas“ ir svarbius interviu klausimus, susijusius su kėlimo JS tema.

Spustelėkite čia, norėdami pamatyti mano straipsnį apie kai kurias naudingas ES6 funkcijas, susijusias su funkcijomis.

Pasimatysim kitą kartą. Ramybė! ️️