JavaScript Variable Scope ทำงานอย่างไร?

ขอบเขต (scope) ของตัวแปรคือบริเวณของโปรแกรมที่ตัวแปรนั้นถูกกำหนด JavaScript มีขอบเขตตัวแปร 2 ระดับ:

• Global Variables — ตัวแปรระดับโลก มีขอบเขตทั่วทั้งโค้ด JavaScript
• Local Variables — ตัวแปรระดับท้องถิ่น 可見ได้เฉพาะภายในฟังก์ชันที่ประกาศไว้ พารามิเตอร์ของฟังก์ชันจะเป็น local ตลอด

ภายใน body ของฟังก์ชัน ตัวแปร local จะมีความสำคัญกว่า (take precedence over) ตัวแปร global ที่มีชื่อเดียวกัน หากประกาศตัวแปร local หรือพารามิเตอร์ชื่อเดียวกับ global จะปิดบัง (hide) ตัวแปร global นั้น

ตัวอย่าง

<html> 
  <body onload="checkscope()"> 
    <script> 
      <!-- 
        var myVar = "global"; // ประกาศ global variable 
        function checkscope() { 
          var myVar = "local"; // ประกาศ local variable 
          document.write(myVar); 
        } 
      //--> 
    </script> 
  </body> 
</html>

Block Scope (ES6+)

คีย์เวิร์ด let และ const ใช้ Block Scope (ขอบเขตบล็อก) แทน Function Scope — ตัวแปรจะอยู่ในบล็อก { ... } ที่ประกาศเท่านั้น

if (true) { 
  var a = 1; // function-scoped 
  let b = 2; // block-scoped 
} 
console.log(a); // 1 
console.log(b); // ReferenceError