Frontend week 4 - Marlenevanerp/blok-tech GitHub Wiki

Een Closure is de combinatie van een (functie) die is gebundeld (omsloten) met verwijzingen naar de omringende toestand (de lexicale omgeving). Met andere woorden, een Closure geeft je toegang tot de reikwijdte van een uiterlijke (functie) vanuit een innerlijke (functie).

Closure heeft 3 scopechains:

• Heeft bereik tot zijn eigen scope
• Heeft toegang tot de variabelen van de buitenste functie
• Heeft toegang tot globale variabelen

De onderstaande code is een voorbeeld van closure:

function outer() { var b = 10; function inner() {

     var a = 20; 
     console.log(a+b);
}

return inner; }

In het voorbeeld zie je twee functies.

• een outerfucntie "outer" die een variabele "b" bevat en die de "inner" function retourneert.
• een innerfunctie "inner" die een variabele "a" oproept en toegang heeft tot de outer variabele "b" binnen zijn functie body.

De scope van de variabele "b" heeft alleen toegang tot de "outer" functie en de scope van de variabele "a" heeft alleen toegang tot de "inner" functie.

De "inner" functie heeft toegang tot de variabelen van de omsluitende functies vanwege closueres in Javascript. Met andere woorden, de innerlijke functie behoudt de scoopketen van de omsluitende functie op het moment dat de omsluitende functie werd uitgevoerd, en heeft dus toegang tot de variabelen van de omsluitende functie.

In het voorbeeld had de inner functie de waarde van b=10 behouden toen de outer() functie werd uitgevoerd, en bleef deze behouden (sluiten). Het verwijst nu naar zijn scope-keten en merkt op dat het de waarde van variabele b binnen zijn scope-keten heeft, aangezien het de waarde van b in een afsluiting had omsloten op het punt waarop de buitenste functie was uitgevoerd. JavaScript kent dus a=20 en b=10 en kan a+b berekenen.

Je kan dit checken door de volgende regel code toe te voegen aan het bovenstaande voorbeeld:

function outer() { var b = 10; function inner() {

     var a = 20; 
     console.log(a+b);
}

return inner; } var X = outer(); console.dir(X); //use console.dir() instead of console.log()

Als je dit checkt in je Inspect dan krijg je dit te zien: Foto:

Het gedrag van Javascript wordt veranderd, de declaraties worden bovenaan gezet (indien gedeclareerd binnen een functie) of naar de top van hun globale bereik (indien gedeclareerd buiten een functie). Dit noem je ook wel hoisting. Houd er rekening mee dat wanneer we aan “hoisting” denken, we ons visueel kunnen voorstellen dat wat er wordt gehesen naar de top wordt verplaatst, maar in theorie beweegt er geen code letterlijk rond.

Functieverklaringen worden ook gehoist, maar deze gaan helemaal naar boven, dus komen boven alle variabelenverklaringen te staan.

De volgende code is een voorbeeld van een code die undefined is.

console.log(myName); var myName = ‘Sunil’;

Zoals ik al had vermeld, worden variabelen naar de bovenkant van hun Scope verplaatst wanneer uw JavaScript tijdens runtime compileert (wat - als we het gebruik van NodeJS uitsluiten - op een heel basaal niveau gewoon betekent dat uw webpagina wordt geladen). Een belangrijk ding om op te merken is echter dat het enige dat naar de top wordt verplaatst, de variabeledeclaraties zijn, niet de werkelijke waarde die aan de variabele wordt gegeven.

Om een beter beeld te krijgen wat ik bedoel, leg ik het nog even extra uit. Als we een stuk code hadden en laten we zeggen dat we op regel 10 var myName = 'Sunil' hadden, wanneer het JavaScript wordt gecompileerd, zou var myName naar de top van zijn bereik worden verplaatst, terwijl myName = 'Sunil' zou op regel 10 blijven (of mogelijk nu op regel 11 als var myName naar regel 1 werd gehoist).

var myName; console.log(myName); myName = ‘Sunil’;

Dit is de reden waarom de console.log in staat is om ‘undefined’ uit te voeren, omdat het herkent dat de variabele myName bestaat, maar dat myName pas op de derde regel een waarde heeft gekregen.

De functies worden ook naar boven gehoist.

function hey() { console.log('hey ' + myName); }; hey(); var myName = 'Sunil';

De hey () functieaanroep retourneert nog steeds ongedefinieerd, omdat de JavaScript-interpreter in feite tijdens runtime compileert naar het volgende:

function hey() { console.log('hey ' + myName); }; var myName; hey(); myName = 'Sunil';

Dus tegen de tijd dat de functie wordt aangeroepen, weet deze dat er een variabele is met de naam myName, maar de variabele heeft geen waarde gekregen.

Het concept van hoisting is de reden waarom je soms de code van andere mensen tegenkomt waarbij variabelen helemaal bovenaan worden gedeclareerd en vervolgens later waarden krijgen. Deze mensen proberen gewoon om hun code sterk te laten lijken om zo mogelijke fouten te minimaliseren.

De declaraties let, var, const en function zijn ook hoisted. Het verschil tussen var-, let- en const-declaraties is hun initialisatie - in duidelijke bewoordingen betekent dit simpelweg de waarde die ze in het begin hebben gekregen.

Instanties van var en let kunnen worden geïnitialiseerd zonder een waarde, terwijl const een referentiefout genereert als u probeert er een te declareren zonder er tegelijkertijd een waarde aan toe te kennen. Dus const myName = 'Sunil' zou werken, maar const myName; myName = 'Sunil'; zou niet werken. Met var en let kunt u proberen een var-waarde te gebruiken voordat deze is toegewezen en deze zou ongedefinieerd retourneren. Als u echter hetzelfde deed met let, zou u een referentiefout krijgen.

Tussen let en const zijn er wel verschillen als we praten over Hoisting. Als je een var op het hoogste niveau (globaal niveau) maakt, zou het een eigenschap op het globale object creëren - in het geval van een browser is dit waarschijnlijk het window-object. Dus het maken van var myName = 'Sunil'; kan ook worden geraadpleegd door window.myName aan te roepen. Als je echter hebt geschreven let newName = 'Sunny'; dit zou niet toegankelijk zijn in het globale window-object - daarom zou je window.newName niet kunnen gebruiken als een verwijzing naar 'Sunny'.

Declaraties gemaakt met var zijn toegankelijk van buiten hun oorspronkelijke bereik, terwijl declaraties gemaakt met let en const dat niet zijn. Zoals we in het onderstaande voorbeeld kunnen zien, retourneren declaraties gemaakt met var ongedefinieerd, terwijl declaraties gemaakt met let en const fouten retourneren. Zie het voorbeeld hieronder:

console.log(‘1a’, myName1); // undefined if (1) { console.log(‘1b’, myName1); // undefined var myName1 = ‘Sunil’; } console.log('2a', myName2); // error: myName2 is not defined if (1) { console.log('2b', myName2); // undefined let myName2 = 'Sunil'; } console.log('3a', myName3); // error: myName3 is not defined if (1) { console.log('3b', myName3); // undefined const myName3 = 'Sunil'; }

Ram, P. (2019, 29 augustus). A simple guide to help you understand closures in JavaScript. Medium. https://medium.com/@prashantramnyc/javascript-closures-simplified-d0d23fa06ba4

Sandhu, S. (2021, 18 maart). What is Hoisting in JavaScript? - JavaScript in Plain English. Medium. https://javascript.plainenglish.io/https-medium-com-javascript-in-plain-english-what-is-hoisting-in-javascript-a63c1b2267a1

Wakio, M. (2021, 25 april). Understanding Hoisting in JavaScript. DigitalOcean. https://www.digitalocean.com/community/tutorials/understanding-hoisting-in-javascript