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

  • Het gebruik van await in C#

    Geschreven door: op zaterdag 28 maart 2020

    Binnen applicaties kunnen soms functies voorkomen die lang nodig hebben om te voltooien. Denk bijvoorbeeld aan een call naar een API van een derde partij die veel data teruggeeft die verwerkt moet wor ...

    Bekijk het artikel »
  • Het gebruik van de SemaphoreSlim class in C#

    Geschreven door: op zaterdag 28 maart 2020

    Webapplicaties kunnen meerdere calls vanuit meerdere plekken verwerken zonder dat deze requests op elkaar moeten wachten. Maar soms heb je te maken met een usecase waar je helemaal niet wilt dat funct ...

    Bekijk het artikel »
  • SQL en het gebruik van JOIN

    Geschreven door: op zaterdag 28 maart 2020

    Binnen SQL heb je verschillende manieren om tabellen met elkaar te koppelen om zo data uit beide tabellen terug te krijgen in de resultaten. Maar wat houdt elk van deze joins in?Verschillende typenE ...

    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