Javascript closures uitgelegd – deel I

Geschreven door: op zondag 3 april 2016

Leestijd: 2 minuten

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

  • Overeenkomsten tussen Growth Hacking en UX design

    Geschreven door: op zondag 13 september 2020

    Laten we beginnen met wat Growth hacking is, Growth hacking zijn experimenten voor oplossingen die groeiproblemen moeten oplossen. Dit is een nieuwe marketing aanpak die met name wordt gedreven door d ...

    Bekijk het artikel »
  • B2B SEO en Geoptimaliseerde Afbeeldingen

    Geschreven door: op woensdag 12 augustus 2020

    In een tijd waarin 27% van het koopproces van B2B kopers met eigen online research wordt doorgebracht is het essentieel om een goed vindbare website te hebben. Afbeeldingen kunnen, indien geoptimalise ...

    Bekijk het artikel »
  • Prospects zoeken B2B

    Geschreven door: op woensdag 12 augustus 2020

    Het zoeken van B2B prospects is een uitdaging voor elk bedrijf. Met name kwalitatieve B2B prospects.Door vooraf onderzoek te doen naar bedrijven die voldoen aan je criteria en je marketing hierop aan ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
AOC is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
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