Javascript closures uitgelegd – deel I

Geschreven door: op zondag 3 april 2016

Leestijd:

Toen ik een aantal jaar geleden voor het eerst las over het concept “Closures” snapte ik er nog weinig van. Veel artikelen op internet probeerde dit op allerlei moeilijk manieren om dit uit te leggen. In dit artikel proberen wij op een simpele manier uitleg te geven aan het principe “Closures”.  

Een simpel probleem

We beginnen met simpel probleem, wat eenvoudig opgelost kan worden met behulp van Closures.

Laten we als voorbeeld nemen dat je bepaalde events wilt tellen. Dit kan bijvoorbeeld gebruikt worden om te bepalen hoe vaak bepaalde code wordt uitgevoerd. Dit zou er als volgt uit kunnen zien:

javascript closures - 1

Bovenstaande code zou bijvoorbeeld elke keer als het is aangeroepen een bericht kunnen geven met: “Number of events: N”. Deze code zou er als volgt uit kunnen zien:

javascript closures 2

Bovenstaande voorbeeld is vrij simpel, maar als je twee waardes wilt bijhouden, dan kom je  al snel in de problemen. Je zou het op kunnen lossen door twee losse functies te schrijven voor beide waardes.

javascript closures 3

Maar bovenstaande voorbeeld bevat veel dubbele code die eenvoudig vervangen kan worden. Ook als er nog een andere waarde bij komt, dan heb je een nog grotere uitdaging.

Een closure gebruiken

Laten we bovenstaande voorbeeld gebruiken en hier een closure voor gaan gebruiken. De code zal er dan ongeveer als volgt uit komen te zien:

javascript closures 4

Bovenstaande code kun je dan als volgt gebruiken:

javascript closures 5

Dit ziet er allemaal ingewikkeld uit, maar dat is het niet. Laten we eerst de functie stap voor stap doorlopen.

  • Als eerste wordt er een lokale variable counter aangemaakt.
  • Als tweede wordt er een lokale functie aangemaakt met naam increment die de lokale variable counter kan verhogen. Dit ziet er misschien vreemd uit, maar in een functionele programmeertaal zoals JavaScript is dit heel normaal.

Zoals je misschien kunt zien, ziet het laatste voorbeeld er bijna hetzelfde uit als het allereerste voorbeeld. Alleen nu staat er om de functie een andere functie, of in het Engels: enclosed. Daarom ook de naam: closures.

Nu de lastigste stap:

  • Als laatste in de createCounter  functie wordt de lokale functie increment teruggeven. Dit zorgt ervoor dat de lokale functie wordt aangeroepen.

Dit alles betekend dat als de createCounter functie wordt aangeroepen, er een nieuwe instantie wordt gemaakt met elk een eigen counter. Elke variable die deze functie dus aanroept krijgt een eigen waarde van de lokale variable counter.

Closures verder uitgelegd

In de volgende delen gaan we het gebruik van closures nog verder uitleggen. Hierin laten we onder andere zien hoe de counters een naam kunt geven en hoe je extra functionaliteit kunt geven aan de closure.


Andere blogartikelen

  • SQL: Geclusterde en niet-geclusterde index

    Geschreven door: op zondag 30 juni 2019

    Het kan soms voorkomen dat het veel tijd kost voordat een bepaalde query resultaten teruggeeft. Dit kan liggen aan een scala aan problemen, zoals het gebruik van veel joins. Wat de query kan helpen ve ...

    Bekijk het artikel »
  • Hoe werkt OAuth 2.0

    Geschreven door: op zondag 30 juni 2019

    In de huidige samenleving is iedereen bijna altijd online, zo ook de applicaties waarvan de mensen gebruik maken. Als je jouw applicatie niet goed afschermt, kan dit allemaal veiligheidsrisico’s met z ...

    Bekijk het artikel »
  • OAuth 2.0: JWT token en claims

    Geschreven door: op zondag 30 juni 2019

    In mijn vorige blog heb ik uitgelegd hoe OAuth 2.0 ervoor kan zorgen dat derde partijen op een veilige manier gebruik kunnen maken van jouw applicatie met behulp van tokens. In deze blog gaan we wat m ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd-gazellen-2018.jpg
Google analytics
partners-logo.jpg
Op de hoogte blijven?

Meld u aan voor de gratis nieuwsbrief om op de hoogte te blijven van onze activiteiten