JavaScript Academy · Les

Leaks voorkomen — closures, timers en referenties

Voorkom geheugenlekken door timers te wissen, closures te beperken en ongebruikte referenties los te laten; gebruik kleine patronen die beginners kunnen toepassen

Les 2 van 38 stappen

Leaks voorkomen — closures, timers en referenties is een gratis JavaScript Academy-les op CoddyKit. Dit is les 2 van 3. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 3 lessen.

Wat is een lek?

Doel: eenvoudige geheugenlekken voorkomen.

  • Wis timers altijd
  • Bewaar geen ongebruikte verwijzingen
  • Houd sluitingen klein
  • Geef de voorkeur aan kortlevende gegevens
Leaks voorkomen — closures, timers en referenties — illustratie 1

Intervallen wissen

Bewaar de id van het interval; roep tijdens het opruimen clearInterval aan, zodat de timer en de vastgelegde waarden ervan kunnen worden opgeruimd.

// Start an interval and then clear it to avoid leaks
function startTicker() {
  // store id so we can clear later
  const id = setInterval(function () {
    // work would run every X ms; omitted for demo
  }, 1000);

  // simulate screen close / cleanup
  clearInterval(id);
  console.log("interval cleared");
}

startTicker();
Leaks voorkomen — closures, timers en referenties — illustratie 2

Kleinere sluitingen

Sluitingen bewaren wat ze vastleggen. Leg waar mogelijk kleine waarden vast in plaats van hele objecten.

// Avoid capturing large objects when only small data is needed
function makeReporter(bigArray) {
  // BAD: store the whole array inside the closure
  const large = bigArray;

  return function reportLength() {
    // Only the length is used
    return large.length;
  };
}

// BETTER: capture only what you need
function makeReporterBetter(bigArray) {
  const count = bigArray.length; // small number
  return function reportLength() {
    return count;
  };
}

const arr = new Array(1000).fill(0);
const bad = makeReporter(arr);
const good = makeReporterBetter(arr);
console.log("bad:", bad(), "good:", good());
Leaks voorkomen — closures, timers en referenties — illustratie 3

Beperk je buffers

Langlevende arrays/maps kunnen geheugen lekken als ze onbeperkt groeien; kort ze regelmatig in of zet ze terug.

// A growing buffer can leak if never trimmed or reset
const buffer = []; // module-level array

function logItem(x) {
  buffer.push(x); // grows forever if not managed
}

// Simulate usage
logItem("a");
logItem("b");

// FIX: trim or reset when size is over a limit
function trimBuffer(limit) {
  if (buffer.length > limit) {
    buffer.length = limit; // drop old items
  }
}

trimBuffer(1);
console.log("buffer size:", buffer.length);
Leaks voorkomen — closures, timers en referenties — illustratie 4

Een voorproefje van WeakMap

WeakMap is handig om metagegevens aan een sleutelobject te koppelen zonder te voorkomen dat de garbagecollector het sleutelobject opruimt.

// WeakMap holds keys weakly: when the object is gone, the entry can be collected
const meta = new WeakMap();

function attachMeta(obj, info) {
  meta.set(obj, info);
}

function readMeta(obj) {
  return meta.get(obj); // undefined if not set or collected
}

let user = { name: "Ayla" };
attachMeta(user, { seen: true });
console.log("meta now:", readMeta(user));

// Later: drop the only strong reference
user = null; // after this, the object and its metadata can be GC'd at some point
console.log("object reference dropped (cannot show GC in console)");
Leaks voorkomen — closures, timers en referenties — illustratie 5

Gewoonten om lekken te voorkomen

Controlelijst:

  • Bewaar timer-id's; roep clearInterval/clearTimeout aan tijdens het opruimen.
  • Leg in sluitingen alleen benodigde waarden vast.
  • Kort langlevende arrays/maps regelmatig in of zet ze terug.
  • Geef de voorkeur aan kortlevende gegevens en verwijder verwijzingen wanneer je klaar bent.
Leaks voorkomen — closures, timers en referenties — illustratie 6

Quiz over het opruimen van timers

Snelle controle: timers en geheugenlekken.

Leaks voorkomen — closures, timers en referenties — illustratie 7

Samenvatting

Samenvatting: Wis timers, leg geen enorme objecten vast in sluitingen en kort langlevende verwijzingen in of verwijder ze. Kleine opruimacties voorkomen geheugenlekken in apps die geschikt zijn voor beginners.

Leaks voorkomen — closures, timers en referenties — illustratie 8
Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen
59
Lessen
200

Veelgestelde vragen

Is de les “Leaks voorkomen — closures, timers en referenties” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Leaks voorkomen — closures, timers en referenties”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 3 lessen.

Wat leer ik in “Leaks voorkomen — closures, timers en referenties”?

Voorkom geheugenlekken door timers te wissen, closures te beperken en ongebruikte referenties los te laten; gebruik kleine patronen die beginners kunnen toepassen Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met JavaScript Academy te beginnen?

Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 3.

Hoe lang duurt de les “Leaks voorkomen — closures, timers en referenties”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?

Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

  1. De basis van Big-O, hot versus cold paths (winst voor beginners)
  2. Leaks voorkomen — closures, timers en referenties
  3. Kennismaking met profileren (Node/DevTools) — kleine timinggewoonten
← Terug naar JavaScript Academy