Block Scope: พื้นที่ระหว่าง { } (if, for, function, block ธรรมดา) ตัวแปร let และ const (ES2015) เป็น Block-Scoped
ตัวอย่าง
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Block Scoping</title>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.result { font-size: 20px; font-weight: 500; }
</style>
</head>
<body>
<h1>Block Scoping in JavaScript</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3> Click to access variable inside/outside block </h3>
<script>
let resEle = document.querySelector(".result");
document.querySelector(".Btn").addEventListener("click", () => {
let b = 44;
{ // Block ใหม่
let a = 22;
resEle.innerHTML += 'Inside block: a = ' + a + '<br>';
}
resEle.innerHTML += 'Outside block: b = ' + b + '<br>';
try {
a; // ReferenceError
} catch (err) {
resEle.innerHTML += 'Access a outside: ' + err.message;
}
});
</script>
</body>
</html>
คำอธิบาย
let a = 22ใน Block{ }→ เข้าถึงได้แค่ใน Block นั้นvarเป็น Function-Scoped (เลี้ยง Block) → ใช้ let/const แทน- Temporal Dead Zone (TDZ): เข้าถึงก่อน Declaration → ReferenceError
- Loop:
for (let i=0;...)สร้าง Binding ใหม่ทุก Iteration (Fix Closure ใน Loop)
ผลลัพธ์
Inside block: a = 22
Outside block: b = 44
Access a outside: Cannot access 'a' before initialization
