JavaScript จัดการหน่วยความจำอย่างไร และ memory leak เกิดขึ้นได้อย่างไร?

Question

Accepted Answer

JavaScript ใช้ **garbage collection อัตโนมัติ** ตัวเก็บขยะใช้อัลกอริทึมแบบ **mark-and-sweep**: เริ่มจาก root (global object และ call stack ปัจจุบัน) มันจะมาร์กทุกอย่างที่ **เข้าถึงได้ (reachable)** แล้วคืนหน่วยความจำของทุกอย่างที่เข้าถึงไม่ได้ คุณไม่ต้องเรียก `free()` เองเลย — แต่คุณ *อาจ* เผลอทำให้ reference ยังคงมีชีวิตอยู่โดยไม่ตั้งใจ ซึ่งทำให้เกิด leak

## แหล่งที่มาของ leak แบบคลาสสิกทั้งสี่

```js
// 1. Unbounded globals / caches that never shrink
window.cache = window.cache || {};
window.cache[id] = bigObject; // grows forever

// 2. Forgotten event listeners
el.addEventListener("click", handler);
// must call el.removeEventListener("click", handler) when done

// 3. Forgotten timers
const id = setInterval(tick, 1000);
// must clearInterval(id)

// 4. Closures capturing large objects longer than needed
function outer() {
  const huge = new Array(1e6);
  return () => huge.length; // keeps `huge` alive as long as the closure lives
}
```

reference จากที่ใดก็ตามที่เข้าถึงได้ (global, listener ที่ยังทำงานอยู่, closure, หรือ DOM node ที่หลุดออกไปแล้วแต่ยังถูกอ้างอิงใน JS) จะทำให้อ็อบเจกต์ไม่ถูกเก็บกวาด

## การวินิจฉัย leak

```js
performance.memory; // rough heap size (Chrome)
// Chrome DevTools → Memory → take heap snapshots at two points and compare
```

ถ่าย heap snapshot ก่อน/หลังการกระทำใดการกระทำหนึ่ง ถ้า "retained size" เพิ่มขึ้นเรื่อย ๆ จะเผยให้เห็นว่าอะไรที่ไม่ถูกคืนหน่วยความจำ

## เครื่องมือที่ช่วยหลีกเลี่ยงการตรึงอ็อบเจกต์ไว้

```js
const meta = new WeakMap(); // keys are weakly held — GC can collect them
meta.set(domNode, data);    // doesn't prevent domNode from being garbage-collected
```

## ทำไมจึงสำคัญ

แอปที่ทำงานยาวนาน (SPA, Node server) จะแครชหรือทำงานช้าลงเพราะ leak

วิธีแก้คือการทำความสะอาดอย่างมีวินัย — ถอด listener/timer ออก, จำกัดขนาดแคช (LRU), หลีกเลี่ยง reference ที่ค้างอยู่ และใช้ `WeakMap`/`WeakSet` สำหรับ metadata ที่ไม่ควรทำให้อ็อบเจกต์ยังมีชีวิตอยู่