Ceļvedis JavaScript mainīgajai celšanai ar atlaidi un konst

Jaunajiem JavaScript izstrādātājiem bieži ir grūti saprast mainīgo / funkciju pacelšanas unikālo izturēšanos.

Tā kā mēs vēlāk runāsim par var, let un const deklarācijām, ir svarīgi saprast mainīgo celšanu, nevis funkciju celšanu. Ienirsim iekšā!

Kas ir mainīgā celšana?

JavaScript motors apstrādā visas mainīgās deklarācijas, izmantojot “var”, it kā tās būtu deklarētas funkcionālās darbības jomas (ja deklarētas funkcijas iekšpusē) vai vispārējās darbības jomas (ja deklarētas ārpus funkcijas) augšpusē neatkarīgi no tā, kur notiek faktiskā deklarācija. Tas būtībā ir “pacelšana”.

Tātad mainīgie faktiski varētu būt pieejami pirms to deklarēšanas.

Let 's redzēt to darbībā ..

// REZULTĀTS: nav noteikts
console.log (forma);
var forma = "kvadrāts";
// REZULTĀTS: "kvadrāts"
console.log (forma);

Ja jūs izmantojat C valodas, jūs domājat, ka tiek izsaukta kļūda, kad tiek izsaukts pirmais console.log, jo mainīgā forma tajā brīdī vēl nebija definēta. Bet JavaScript tulks skatās uz priekšu un “paceļ” visas mainīgās deklarācijas uz augšu, un inicializācija paliek tajā pašā vietā.

Šeit redzams, kas notiek aizkulisēs:

// deklarācija tiek pacelta augšpusē
var forma;
// REZULTĀTS: nav noteikts
console.log (forma);
forma = "kvadrāts";
// REZULTĀTS: "kvadrāts"
console.log (forma);

Šis ir vēl viens piemērs šoreiz funkcionālā mērogā, lai padarītu lietas skaidrākas:

funkcija getShape (nosacījums) {
    // forma pastāv šeit ar vērtību, kas nav definēta
    // REZULTĀTS: nav noteikts
    console.log (forma);
    ja (nosacījums) {
        var forma = "kvadrāts";
        // kāds cits kods
        atgriešanās forma;
    } cits {
        // forma pastāv šeit ar vērtību, kas nav definēta
        atgriezties nepatiess;
    }
}

Iepriekš minētajā piemērā varat redzēt, kā formas deklarācija tiek pacelta funkcijas getShape () augšpusē. Tas ir tāpēc, ka, ja / vai citi bloķējumi, neveidojiet lokālu tvērumu, kā redzams citās valodās. Vietējā tvērums būtībā ir JavaScript darbības joma. Tāpēc forma ir pieejama visur ārpus if bloka un funkcijā ar “nenoteiktu” vērtību.

Šai JavaScript noklusējuma rīcībai ir taisnīga priekšrocību un trūkumu daļa. To nepilnīga izpratne mūsu kodā var izraisīt smalkas, bet bīstamas kļūdas.

Ievadiet bloka līmeņa deklarācijas!

ES6 ieviesa bloka līmeņa noteikšanas iespējas, lai izstrādātājiem nodrošinātu lielāku kontroli un elastīgumu mainīgā dzīves cikla laikā.

Bloku līmeņa deklarācijas tiek sagatavotas bloka / leksiskā mērogā, kas izveidotas bloka “{}” iekšpusē.

ļaujiet deklarācijām

Šī sintakse ir līdzīga var, vienkārši aizstājiet var ar let, lai deklarētu mainīgo, tā darbības joma ir tikai šis koda bloks.

Ievietojiet iznomāšanas deklarācijas bloka augšpusē, lai tās būtu pieejamas visā blokā.

Piemēram:

funkcija getShape (nosacījums) {
// forma šeit neeksistē
// console.log (forma); => ReferenceError: forma nav definēta
ja (nosacījums) {
        let forma = "kvadrāts";
        // kāds cits kods
        atgriešanās forma;
    } cits {
        // forma arī šeit neeksistē
        atgriezties nepatiess;
    }
}

Ievērojiet, kā forma pastāv tikai if blokā, un ievada kļūdu, kad tai piekļūst ārpus tā, nevis izvada tādu nenoteiktu kā mūsu iepriekšējais gadījums ar var deklarācijām.

PIEZĪME. Ja identifikators jau ir definēts joma ar var, tā paša identifikatora izmantošana kļūdas deklarācijā tajā pašā tvērumā.
Tāpat netiek pieļauta kļūda, ja let deklarācija izveido mainīgo ar tādu pašu nosaukumu kā mainīgā mainīgajam tā ārējā tvērumā. (Šis gadījums ir tāds pats ar const deklarācijām, par kurām drīz runāsim.)

Piemēram:

var forma = "kvadrāts";

let forma = "taisnstūris";
// SyntaxError: identifikators “forma” jau ir deklarēts

un:

var forma = "kvadrāts";
ja (nosacījums) {
    // nemet kļūdu
    let forma = "taisnstūris";
    // vairāk koda
}
// Nav kļūdu

const deklarācijas

Deklarācijas sintakse ir līdzīga let & var, dzīves cikls ir tāds pats kā let. Bet jums ir jāievēro daži noteikumi.

Saistības, kas deklarētas, izmantojot konstanti, tiek uzskatītas par konstantes, un tāpēc tās pēc definīcijas nevar atkārtoti piešķirt. Tādēļ katra const deklarācija ir jāinicializē deklarēšanas laikā.

Piemēram:

// derīgs
const forma = "trīsstūris";
// sintakse kļūda: trūkst inicializācijas
const krāsa;
// TypeError: piešķiršana nemainīgam mainīgajam
forma = "kvadrāts"

Tomēr objekta īpašības var mainīt!

const forma = {
    nosaukums: "trīsstūris",
    malas: 3
}
// DARBI
forma.nosaukums = "kvadrāts";
forma.puses = 4;
// SyntaxError: nederīgs saīsinātu īpašumu inicializētājs
forma = {
    nosaukums: "sešstūris",
    malas: 6
}

Iepriekš minētajā piemērā mēs redzam, ka varēja mainīt tikai formas objekta īpašības, jo mēs mainām tikai to, ko forma satur, nevis to, kam tā ir piesaistīta.

Mēs varam rezumēt, sakot, ka const neļauj mainīt saistošo elementu kopumā - nevis vērtību, kurai tas ir piesaistīts.

Piezīme: rekvizītus var mutēt. Tātad, lai iegūtu patiesu negrozāmību, izmantojiet Immvable.js vai Mori.

Laika mirušo zona

Tagad mēs zinām, ka, piekļūstot mainīgajiem vai mainīgajiem mainīgajiem, pirms tie tiek deklarēti, tiks izdzēsta atsauces kļūda. Šo laika posmu starp iekļūšanu darbības jomā un deklarēšanu tur, kur viņiem nevar piekļūt, sauc par mirušo laika zonu.

Ņemiet vērā, ka “Temporal Dead Zone” formāli nav minēts ECMAScript specifikācijā. Tas ir tikai iecienīts termins programmētāju vidū.

Es personīgi iesaku vienmēr izmantot const, jo tas rada mazāk kļūdu. Man vēl nav nācies saskarties ar situāciju, kad man vajadzēja izmantot var.

Parasti izmantojiet atļauju tikai cilpu skaitītājiem vai tikai tad, ja jums patiešām nepieciešama atkārtota piešķiršana. Visur citur izmantojiet const. Personīgi es esmu izraudzījis cilpas filtram (), kartei () un reducēšanai (). Arī jums vajadzētu.

Noteikti izlasiet šīs sadaļas 2. daļu par funkciju pacelšanu un svarīgiem interviju jautājumiem, kas saistīti ar pacelšanas tēmu JS.

Noklikšķiniet šeit, lai skatītu manu rakstu par dažām noderīgām ES6 funkcijām, kas saistītas ar funkcijām.

Tiksimies nākamreiz. Mieru! ️️