Javascript closures uitgelegd – deel I

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:

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:

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.

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:

Bovenstaande code kun je dan als volgt gebruiken:

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.