Closure คืออะไร?

Question

Closure คืออะไร?

Accepted Answer

**closure** คือ ฟังก์ชันที่มัดไว้ด้วยกับการอ้างอิงตัวแปรจากขอบเขต (lexical) รอบข้าง เนื่องจากการมีอยู่ของ closures ฟังก์ชันภายในจึงยังคงสามารถเข้าถึงตัวแปรของฟังก์ชันภายนอก **แม้ว่าฟังก์ชันภายนอกจะ return แล้วก็ตาม** ```js function makeCounter() { let count = 0; // private variable, captured by the closure return { inc: () => ++count, // each closure "remembers" its own count get: () => count, }; } const a = makeCounter(); const b = makeCounter(); // independent closure — separate count a.inc(); a.inc(); // a.get() → 2 b.inc(); // b.get() → 1 (a is untouched) ``` `count` ไม่สามารถเข้าถึงได้จากภายนอก — เฉพาะ `inc`/`get` เท่านั้นที่มองเห็นได้ นี่คือ **ความเป็นส่วนตัวของข้อมูล** ที่สร้างจาก closure และการเรียก `makeCounter()` แต่ละครั้งจะสร้างขอบเขตใหม่ที่แยกออกมา ## バグ loop คลาสสิก ```js for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 0); // prints 3, 3, 3 — all share one `i` } for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 0); // prints 0, 1, 2 — `let` is per-iteration } ``` กับ `var` ทุก callback จะปิดบน **เดียวกัน** `i` (ซึ่งเป็น 3 เมื่อใช้งาน) `let` สร้างการผูกมัดใหม่ในแต่ละ iteration ## ทำไมจึงสำคัญ Closures ให้พลังแก่ **ความเป็นส่วนตัวของโมดูล**, **memoization**, **currying**, event handlers/callbacks ที่จำได้ว่าสถานะคืออะไร และเป็นวิธีที่ React hooks (`useState`) ยังคงค่าไว้ระหว่างการ render อย่างแน่นอน