𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗖𝗹𝗼𝘀𝘂𝗿𝗲𝘀 𝗨𝗶𝘁𝗴𝗲𝗹𝗲𝗴𝗱

Je gebruikt closures elke dag in JavaScript. Je gebruikt ze waarschijnlijk in React hooks, event listeners en Node.js callbacks. Veel ontwikkelaars worstelen met de theorie, maar het concept is eenvoudig zodra je het patroon ziet.

Om closures te begrijpen, moet je lexicale scope begrijpen.

Lexicale scope betekent dat een functie toegang heeft tot variabelen uit zijn eigen scope en elke externe scope waarin hij is gedefinieerd. Het hangt af van waar je de code schrijft, niet van waar je deze aanroept.

Een closure is een functie die variabelen uit zijn oorspronkelijke scope onthoudt, zelfs nadat die scope is afgelopen.

Zie een functie als iets dat een rugzak bij zich draagt. Wanneer de functie wordt aangemaakt, stopt hij elke variabele die hij nodig heeft uit zijn omgeving in die rugzak. De functie neemt die rugzak overal mee naartoe.

Dit is hoe closures in de praktijk werken:

  • Private variabelen: Je kunt gegevens verbergen voor de buitenwereld. In een voorbeeld van een bankrekening blijft een saldo-variabele privé. Je kunt deze alleen wijzigen via specifieke methoden zoals storten of opnemen. Dit voorkomt directe toegang tot gevoelige gegevens.

  • Function Factories: Je kunt functies maken die andere functies produceren. Een multiplier factory kan een 'double' functie of een 'triple' functie maken. Elke nieuwe functie houdt zijn eigen specifieke multiplier in zijn rugzak.

  • Event Listeners: Wanneer je een click event aan een knop koppelt, onthoudt de handler de gegevens van de setup-functie. Zelfs nadat de setup-functie is afgelopen, houdt de listener die gegevens vast.

  • React Hooks: Elke keer dat je useState of useEffect gebruikt, gebruik je closures. Een veelvoorkomende bug in React ontstaat wanneer een closure een oude waarde van de state vastlegt. Dit wordt een 'stale closure' genoemd.

Let op het geheugengebruik. Omdat een closure een actieve referentie naar variabelen vasthoudt, kan de engine deze niet opruimen via garbage collection zolang de closure bestaat. Vermijd het vasthouden van enorme objecten in een closure als je ze niet voor een lange tijd nodig hebt.

Samenvatting:

  • Lexicale scope bepaalt de toegang.
  • Closures maken die toegang persistent.
  • Een functie draagt zijn omgeving in een rugzak.
  • Gebruik let in plaats van var in loops om scoping-bugs te voorkomen.

Bron: https://dev.to/digitalunicon/javascript-closures-explained-with-examples-339f