ตัวแปร JavaScript: ควรประกาศนอกลูปหรือในลูป?

ภาษา ECMAScript/JavaScript จะยก (hoist) ตัวแปรที่ประกาศด้วย var ไปอยู่ด้านบนสุดของฟังก์ชันเสมอ เนื่องจากภาษานี้มี Function Scope ไม่มี Block Scope เหมือนภาษา C-like อื่นๆ

ตัวอย่างการ Hoisting ของ var

function() {
  for(var a = 0; a < 7; a ++) {
    var b = 100;
  }
}

โค้ดด้านบนเทียบเท่ากับ:

function() {
  var b; // ถูก hoist มาด้านบน
  for(var a = 0; a < 7; a ++) {
    b = 100;
  }
}

ความแตกต่างกับ let และ const

แตกต่างกับ let และ const ที่มี Lexical Scoping (Block Scope) ตัวแปรจะมีขอบเขตอยู่ภายในบล็อก { ... } ที่ประกาศเท่านั้น

// ✅ แนะนำ: ใช้ const/let ในบล็อกลูป
for (let i = 0; i < 10; i++) {
  const item = items[i];
  // item และ i มีขอบเขตอยู่ในลูปเท่านั้น
}

// ❌ ไม่แนะนำ: ใช้ var (function-scoped, hoisting)
for (var i = 0; i < 10; i++) {
  var item = items[i];
  // item และ i "ลीक" ออกมานอกลูป
}