Juhend JavaScripti muutuva tõstmise jaoks let laskmise ja tõmbumisega

Uutel JavaScripti arendajatel on sageli keeruline mõista muutuva / funktsionaalse tõstefunktsiooni unikaalset käitumist.

Kuna me räägime hiljem varia, let ja const deklaratsioonidest, on oluline mõista muutuvat, mitte funktsionaalset heiskamist. Sukeldugem sisse!

Mis on muutuv tõstmine?

JavaScripti mootor kohtleb kõiki muutuja deklaratsioone, kasutades „var”, justkui oleks need deklareeritud funktsionaalse ulatuse ülaosas (kui see on deklareeritud funktsiooni sees) või üldises ulatuses (kui see on deklareeritud funktsiooni sees), sõltumata sellest, kus tegelik deklaratsioon toimub. Põhimõtteliselt on see "tõstmine".

Nii et muutujad võivad olla tegelikult enne nende deklareerimist saadaval.

Vaatame seda tegevuses ..

// VÄLJUND: määratlemata
console.log (kuju);
var kuju = "ruut";
// VÄLJUND: "ruut"
console.log (kuju);

Kui tulete C-põhistest keeltest, siis eeldatakse, et esimese console.log'i kutsumisel kuvatakse tõrge, kuna muutuja kuju polnud sel hetkel veel määratletud. Kuid JavaScripti tõlk vaatab ette ja “tõstab” kõik muutuja deklaratsioonid üles ja initsialiseerimine jääb samasse kohta.

Kulisside taga toimub järgmine:

// deklaratsioon tõstetakse ülaossa
var kuju;
// VÄLJUND: määratlemata
console.log (kuju);
kuju = "ruut";
// VÄLJUND: "ruut"
console.log (kuju);

Siin on veel üks näide funktsionaalsest ulatusest, et asjad selgemaks teha:

funktsioon getShape (tingimus) {
    // kuju on siin väärtusega määratlemata
    // VÄLJUND: määratlemata
    console.log (kuju);
    if (tingimus) {
        var kuju = "ruut";
        // mõni muu kood
        tagasivoolu kuju;
    } veel {
        // kuju on siin väärtusega määratlemata
        tagastama vale;
    }
}

Ülaltoodud näites näete, kuidas kuju deklaratsioon on funktsiooni getShape () ülaosas üles tõstetud. Selle põhjuseks on asjaolu, et kui plokid / muud blokeerivad, ei looge kohalikku ulatust, nagu teistes keeltes näha. Kohalik ulatus on JavaScriptis põhimõtteliselt funktsiooni ulatus. Seetõttu on kuju juurdepääsetav kõikjal väljaspool if-plokki ja funktsioonis, mille väärtus on määratlemata.

Sellel JavaScripti vaikekäitumisel on õiglane osa eelistest ja puudustest. Nende mittetäielik mõistmine võib meie koodis põhjustada peent, kuid ohtlikke vigu.

Sisestage plokkideklaratsioonid!

ES6 tutvustas ploki tasemel ulatuse määramise võimalusi, et pakkuda arendajatele muutuja elutsükli jooksul rohkem kontrolli ja paindlikkust.

Plokitaseme deklaratsioonid tehakse ploki / leksikaalse ulatusega, mis luuakse ploki „{}“ sees.

las deklaratsioonid

See süntaks sarnaneb var-iga, asendage var lihtsalt muutuja deklareerimisega, mille ulatus on ainult see koodiplokk.

Paigutage lubade deklaratsioonid ploki ülaossa, nii et need oleksid kogu bloki ulatuses saadaval.

Näiteks:

funktsioon getShape (tingimus) {
// kuju siin ei eksisteeri
// konsool.logi (kuju); => ReferenceError: kuju pole määratletud
if (tingimus) {
        lase kuju = "ruut";
        // mõni muu kood
        tagasivoolu kuju;
    } veel {
        // kuju ei eksisteeri ka siin
        tagastama vale;
    }
}

Pange tähele, kuidas kuju eksisteerib ainult if-ploki sees, ja viskab väljast sisenemisel vea, selle asemel, et väljastada määratlemata, nagu meie eelmine juhtum var deklaratsioonidega.

MÄRKUS. Kui identifikaator on juba määratletud ulatusega var-vormingus, põhjustab sama identifikaatori kasutamine sama ulatuse sees asuvas lasedeklaratsioonis tõrke.
Samuti ei heideta ühtegi viga, kui laskmise deklaratsioon loob muutuja sama nimega muutuja selle välimises ulatuses. (See juhtum on sama const deklaratsioonidega, millest me lähiajal räägime.)

Näiteks:

var kuju = "ruut";

lase kuju = "ristkülik";
// SyntaxError: Identifikaatori kuju on juba deklareeritud

ja:

var kuju = "ruut";
if (tingimus) {
    // ei viska viga
    lase kuju = "ristkülik";
    // rohkem koodi
}
// Viga pole

const deklaratsioonid

Deklaratsiooni süntaks sarnaneb lase & var-ga, olelustsükkel on sama, mis lasta. Kuid peate järgima mõnda reeglit.

Konstandi abil deklareeritud köiteid käsitletakse konstantidena ja seetõttu ei saa neid pärast määratletud määramist väärtusi uuesti omistada. Seetõttu tuleb iga const-deklaratsioon deklareerimise ajal initsialiseerida.

Näiteks:

// kehtiv
const kuju = "kolmnurk";
// süntaksiviga: puudub lähtestamine
const värv;
// TypeError: püsivale muutujale omistamine
kuju = "ruut"

Objekti atribuute saab aga muuta!

const kuju = {
    nimi: "kolmnurk",
    küljed: 3
}
// TÖÖD
kuju.nimi = "ruut";
kuju.küljed = 4;
// SyntaxError: kehtetu otsetee omaduste initsiaator
kuju = {
    nimi: "kuusnurk",
    küljed: 6
}

Ülaltoodud näites näeme, et muuta saab ainult kujuobjekti omadusi, kuna muudame ainult seda, mida kuju sisaldab, mitte seda, milleks see on seotud.

Võime kokkuvõtvalt öelda, et const takistab köite muutmist tervikuna - mitte seda väärtust, millega see seotud on.

Märkus: atribuute saab muteerida. Nii et kasutage tõelist muutmatust, kasutage Immvable.js või Mori.

Ajaline surnud tsoon

Nüüd teame, et muutujatele juurdepääsu saamisel või muutmisel enne nende kuulutamist heidetakse viide viga. Seda ajavahemikku, mis jääb vahemikku sisenemisest kuni teatamiseni, kuhu neile ei pääse, nimetatakse ajutiseks surnud tsooniks.

Pange tähele, et ajalist surnud tsooni ei ole ECMAScripti spetsifikatsioonis ametlikult nimetatud. See on programmeerijate seas lihtsalt populaarne termin.

Isiklikult soovitan teil alati kasutada const, kuna see põhjustab vähem vigu. Ma pole veel kohanud olukorda, kus mul oli vaja kasutada var.

Üldreeglina kasutage laskmist ainult silmusloendurites või ainult siis, kui vajate uuesti ümberpaigutamist. Kõikjal mujal kasutage const. Isiklikult olen filtri (), kaardi () (vähenda) ja vähendamise () jaoks loopinud. Ka sina peaksid.

Vaadake kindlasti 2. osa sellest, mis käsitleb funktsiooni tõstmine ja olulisi intervjuuküsimusi, mis on seotud tõsteteemaga JS-is.

Klõpsake siin oma artikli saamiseks mõne ES6 funktsioonide kasuliku uue funktsiooni kohta.

Näeme järgmine kord. Rahu! ️️