Memory Management Basics

Learning objectives#

• Explain garbage collection and reachability
• Recognise common memory leaks
• Remove listeners and timers
• Bound caches so they cannot grow forever

Explanation#

The garbage collector frees objects that are no longer reachable — nothing in your program can get to them any more.

A leak happens when something you no longer need is still reachable: a forgotten event listener, a running interval, or a cache that only ever grows.

Clean up: removeEventListener (or an AbortController signal), clearInterval/clearTimeout, and limit cache sizes.

In single-page apps (React, Angular), always clean up in unmount/destroy hooks.

Code example: Cleaning up and bounding a cache#

1// 1. Listeners you can remove in one go
2const controller = new AbortController();
3window.addEventListener('resize', () => {}, { signal: controller.signal });
4controller.abort();                       // removes the listener
5

6// 2. Timers you stop when done
7const timer = setInterval(() => {}, 1000);
8clearInterval(timer);
9

10// 3. A bounded cache (least-recently-used)
11class LruCache {
12  constructor(limit) { this.limit = limit; this.map = new Map(); }
13  get(key) {
14    if (!this.map.has(key)) return undefined;
15    const value = this.map.get(key);
16    this.map.delete(key); this.map.set(key, value);   // mark as recently used
17    return value;
18  }
19  set(key, value) {
20    this.map.delete(key);
21    this.map.set(key, value);
22    if (this.map.size > this.limit) this.map.delete(this.map.keys().next().value);
23  }
24}
25const cache = new LruCache(2);
26cache.set('a', 1); cache.set('b', 2); cache.get('a'); cache.set('c', 3);
27console.log([...cache.map.keys()]);
28console.log('listener removed:', controller.signal.aborted);

[ 'a', 'c' ]
listener removed: true

Step-by-step explanation#

1. Passing an AbortSignal lets you remove the listener later with abort().
2. clearInterval stops the timer so its callback (and anything it references) can be freed.
3. The LRU cache keeps at most two entries.
4. Reading "a" made it recent, so adding "c" evicted "b".

Real-world use case#

Common mistakes#

Best practices#

• Pair every addEventListener with a removal path
• Clear timers and intervals you no longer need
• Cap caches (LRU) or use WeakMap
• Use DevTools Memory → heap snapshots to find leaks

Remember this#

Practice exercise#

1function startClock() {
2  const id = setInterval(() => console.log(new Date().toLocaleTimeString()), 1000);
3  return () => clearInterval(id);
4}
5const stop = startClock();
6setTimeout(stop, 3500); // logs 3 times, then stops

Mini quiz#

Want more? Practise all JavaScript MCQs · JavaScript interview questions

Related topics#

My notes#

Saved in this browser.