Opas JavaScript-muuttuvaan nostamiseen lasku- ja jatko-osilla

Uusilla JavaScript-kehittäjillä on usein vaikea ymmärtää muuttujien / toimintojen nostamisen ainutlaatuista käyttäytymistä.

Koska aiomme myöhemmin puhua var, let and const -ilmoituksista, on tärkeää ymmärtää muuttuva nosto eikä funktion nosto. Sukellaan sisään!

Mitä muuttuva nosto on?

JavaScript-moottori käsittelee kaikkia muuttujien ilmoituksia käyttämällä “var” kuin ne, jotka julistetaan toiminnallisen laajuuden (jos ne on ilmoitettu toiminnon sisällä) tai kokonaislaajuuden (jos ne on ilmoitettu toiminnon ulkopuolella) yläpuolella riippumatta siitä, missä todellinen ilmoitus tapahtuu. Pohjimmiltaan tämä on "nostoa".

Joten muuttujat saattavat tosiasiallisesti olla saatavilla ennen niiden ilmoittamista.

Katsotaan se toiminnassa ..

// TULOS: määrittelemätön
console.log (muoto);
var muoto = "neliö";
// TULOS: "neliö"
console.log (muoto);

Jos olet kotoisin C-pohjaisista kielistä, olettaa, että virhe heitetään, kun ensimmäistä console.log kutsutaan, koska muuttujan muotoa ei ollut määritetty tuolloin. Mutta JavaScript-tulkki näyttää eteenpäin ja “nostaa” kaikki muuttujien ilmoitukset ylöspäin, ja alustus pysyy samassa paikassa.

Tässä on mitä kulissien takana tapahtuu:

// ilmoituksen nostaminen yläosassa
Var muoto;
// TULOS: määrittelemätön
console.log (muoto);
muoto = "neliö";
// TULOS: "neliö"
console.log (muoto);

Tässä on toinen esimerkki tällä kertaa toiminnallisesta laajuudesta selventää asioita:

toiminto getShape (ehto) {
    // muoto on täällä, arvo on määrittelemätön
    // TULOS: määrittelemätön
    console.log (muoto);
    if (ehto) {
        var muoto = "neliö";
        // jokin muu koodi
        palata muoto;
    } muuta {
        // muoto on täällä, arvo on määrittelemätön
        palauta väärä;
    }
}

Yllä olevasta esimerkistä näet, kuinka muodon ilmoitus on nostettu getShape () -toiminnon yläosassa. Tämä johtuu siitä, että jos / muut esteet, älä luo paikallista laajuutta, kuten muilla kielillä näytetään. Paikallinen laajuus on pääosin JavaScriptin toiminnan laajuus. Siksi muoto on käytettävissä kaikkialla if-lohkon ulkopuolella ja funktion sisällä 'määrittelemättömällä' arvolla.

Tällä JavaScriptin oletuskäyttäytymisellä on kohtuullinen osuus eduista ja haitoista. Näiden ymmärtämättä jättäminen voi johtaa pieniin, mutta vaarallisiin virheisiin koodissamme.

Anna ryhmätason ilmoitukset!

ES6 esitteli lohkotason määritysvaihtoehdot tarjoamaan kehittäjille parempaa hallintaa ja joustavuutta muuttujan elinkaaren aikana.

Lohkotason ilmoitukset tehdään lohko / leksinen laajuus, joka luodaan lohkon {} sisälle.

anna ilmoitukset

Tämä syntaksi on samanlainen kuin var. Korvaa var vain annella muuttujan julistaminen muuttujan laajuuden ollessa vain kyseinen koodilohko.

Sijoita vuokra-ilmoitukset yläosaan lohkoon, jotta ne ovat saatavilla koko kyseisessä lohkossa.

Esimerkiksi:

toiminto getShape (ehto) {
// muotoa ei ole täällä
// konsoli.logi (muoto); => ReferenceError: muotoa ei ole määritelty
if (ehto) {
        anna muoto = "neliö";
        // jokin muu koodi
        palata muoto;
    } muuta {
        // muotoa ei ole myöskään täällä
        palauta väärä;
    }
}

Huomaa, kuinka muoto esiintyy vain if-lohkon sisällä, ja heittää virheen, kun sitä käytetään sen ulkopuolelle sen sijaan, että tulostettaisiin määrittelemätöntä kuten aiemmassa tapauksessa var-ilmoituksilla.

HUOMAUTUS: Jos tunniste on jo määritelty laajuusalueella var kanssa, saman tunnisteen käyttäminen saman laajuuden sisällä olevassa päästöilmoituksessa aiheuttaa virheen.
Myöskään virhettä ei heitetä, jos laskuilmoitus luo muuttujan, jolla on sama nimi kuin muuttujan ulkoisessa laajuudessa. (Tämä tapaus on sama const-ilmoituksissa, joista puhumme pian.)

Esimerkiksi:

var muoto = "neliö";

anna muoto = "suorakulmio";
// SyntaxError: Tunniste 'muoto' on jo ilmoitettu

ja:

var muoto = "neliö";
if (ehto) {
    // ei heitä virhettä
    anna muoto = "suorakulmio";
    // lisää koodia
}
// Ei virhettä

const-julistukset

Ilmoituksen syntaksi on samanlainen kuin let & var, elinkaari on sama kuin anna. Mutta sinun on noudatettava joitain sääntöjä.

Vakion avulla ilmoitetut sidokset käsitellään vakioina, joten niille ei voida antaa uusia arvoja määritettyään. Tämän vuoksi jokainen const-ilmoitus on alustettava ilmoituksen tekohetkellä.

Esimerkiksi:

// pätevä
muodon muoto = "kolmio";
// syntaksivirhe: alustus puuttuu
väri;
// TypeError: Määritys vakiomuuttujalle
muoto = "neliö"

Objektin ominaisuuksia voidaan kuitenkin muokata!

const-muoto = {
    nimi: "kolmio",
    sivut: 3
}
// TYÖT
muoto.nimi = "neliö";
muoto sivut = 4;
// SyntaxError: Virheellinen oikotie-ominaisuuden alustus
muoto = {
    nimi: "kuusikulmio",
    sivut: 6
}

Yllä olevassa esimerkissä voimme nähdä, että vain muotoobjektin ominaisuuksia voitaisiin muuttaa, koska muutamme vain sitä, mitä muoto sisältää, ei sitä, mihin se on sidottu.

Voimme tehdä yhteenvedon sanomalla, että const estää sidoksen kokonaisuuden muuttamista - ei arvoa, johon se on sitoutunut.

Huomaa: Ominaisuudet voidaan muuttaa. Joten todellinen muuttumattomuus, käytä Immvable.js tai Mori.

Ajallinen kuollut alue

Tiedämme nyt, että pääsy muuttujiin tai muuttujiin ennen niiden ilmoittamista heittää ReferenceError-tiedoston. Tätä ajankohtaa pääsyn ja ilmoittamisen välillä, jolle niihin ei voida päästä, kutsutaan Temporal Dead Zone -alueeksi.

Huomaa, että ”Temporal Dead Zone” ei ole muodollisesti mainittu ECMAScript-eritelmässä. Se on vain suosittu termi ohjelmoijien keskuudessa.

Suosittelen, että käytät aina const-tiedostoa, koska se johtaa vähemmän virheisiin. Minun ei ole vielä kohdattu tilannetta, jossa minun piti käyttää var.

Käytä päästöoikeutta vain silmukkalaskurissa tai vain, jos todella tarvitset uudelleenmääritystä. Kaikkialla muualla, käytä const. Henkilökohtaisesti olen ojottanut silmukat suodattimelle (), kartalle () ja pienentää (). Sinunkin pitäisi.

Muista tutustua tähän kohtaan 2 toiminnon nostamisesta ja tärkeistä haastattelukysymyksistä, jotka liittyvät nostamiseen JS: ssä.

Napsauttamalla tätä saat artikkelini joihinkin ES6: n hyödyllisiin toimintoihin liittyvistä hyödyllisistä ominaisuuksista.

Nähdään ensi kerralla. Rauha! ️️