Hoisting คืออะไร?

Question

Hoisting คืออะไร?

Accepted Answer

**Hoisting** เป็นพฤติกรรมของ JavaScript ที่ย้าย **declarations** ไปที่ด้านบนของ scope ของพวกมันในช่วง compile phase ก่อนที่โค้ดจะทำงาน แต่ *วิธี* ที่สิ่งต่าง ๆ ถูก hoisted นั้นแตกต่างกันไปตามประเภท declaration

```js
console.log(a); // undefined  — `var a` is hoisted & initialized to undefined
var a = 1;

foo();          // "works!" — function declarations are fully hoisted
function foo() { console.log("works!"); }

console.log(b); // ❌ ReferenceError — temporal dead zone
let b = 2;
```

## สิ่งที่ถูก hoisted และวิธีการ

- **`var`**: declaration ถูก hoisted และเริ่มต้นเป็น `undefined` ดังนั้นการอ่านในช่วงแรกจึงได้ `undefined` ไม่ใช่ข้อผิดพลาด
- **`function` declarations**: ถูก hoisted อย่างเต็มที่ — คุณสามารถเรียกใช้ได้ก่อนบรรทัดคำจำกัดความของมัน
- **`let` / `const`**: ถูก hoisted แต่ **ไม่ได้เริ่มต้น** พวกมันอยู่ใน *Temporal Dead Zone* (TDZ) ตั้งแต่ต้นของบล็อกจนถึงบรรทัดการประกาศของพวกมัน การเข้าถึงพวกมันใน TDZ จะโยน `ReferenceError`
- **Function expressions** (`const f = () => {}`) *ไม่สามารถ* เรียกใช้ได้ในช่วงแรก — เฉพาะ `const`/`var` binding เท่านั้นที่ถูก hoisted ไม่ใช่ฟังก์ชัน

## Neden önemli

Hoisting อธิบาย "ทำไมสิ่งนี้ถึงเป็น `undefined`?" และ "ทำไมการเรียกใช้ฟังก์ชันนี้ก่อนคำจำกัดความของมันจึงทำงาน?" TDZ สำหรับ `let`/`const` เป็น *feature* จริง ๆ — มันเปลี่ยน `undefined` bugs ที่เงียบ ๆ เป็นข้อผิดพลาดที่ดังกว่า ซึ่งสนับสนุนให้คุณประกาศก่อนใช้