ตัวแปรระดับโลกในฟังก์ชัน JavaScript

ใน JavaScript (ในภาษาอื่นส่วนใหญ่มักไม่เป็นเช่นนี้) ตัวแปรที่กำหนดไว้นอกฟังก์ชันจะสามารถมองเห็นได้ภายในฟังก์ชันนั้น ตัวแปรดังกล่าวเรียกว่า ตัวแปรระดับโลก มาดูตัวอย่างกัน:

javascriptlet num = 1; // ตัวแปรที่อยู่ภายนอกฟังก์ชัน

function func() {
  console.log(num); // ตัวแปร num มองเห็นได้ภายในฟังก์ชัน
}

func(); // แสดงผล 1

ในความเป็นจริงแล้ว ตัวแปรควรถูกกำหนดก่อนการเรียกใช้ฟังก์ชัน ไม่ใช่ก่อนการนิยามฟังก์ชัน:

javascriptfunction func() {
  console.log(num);
}

let num = 1; // ตัวแปรที่อยู่ภายนอกฟังก์ชัน
func();      // แสดงผล 1

หากเปลี่ยนค่าตัวแปร และหลังจากนั้นเรียกใช้ฟังก์ชันทุกครั้ง - console.log จะแสดงผลลัพธ์ที่แตกต่างกันออกไปทุกครั้ง:

javascriptfunction func() {
  console.log(num);
}

let num; // ประกาศตัวแปร

num = 1; // กำหนดค่าเป็น 1
func();  // แสดงผล 1

num = 2; // กำหนดค่าเป็น 2
func();  // แสดงผล 2

หากเรามีหลายฟังก์ชัน ตัวแปรระดับโลกจะสามารถเข้าถึงได้ในแต่ละฟังก์ชันเหล่านี้:

javascriptfunction func1() {
  console.log(num);
}

function func2() {
  console.log(num);
}

let num = 1;

func1(); // แสดงผล 1
func2(); // แสดงผล 1

หากมีการเปลี่ยนแปลงตัวแปรระดับโลกในฟังก์ชันใดฟังก์ชันหนึ่ง ตัวแปรนั้นจะเปลี่ยนไปในทุกฟังก์ชันที่ใช้ตัวแปรนี้:

javascriptfunction func1() {
  console.log(num);
  num++; // เปลี่ยนตัวแปรระดับโลก
}

function func2() {
  console.log(num);
}

let num = 1;

func1(); // แสดงผล 1
func2(); // แสดงผล 2

เนื่องจากฟังก์ชันใด ๆ ก็ตามสามารถเปลี่ยนตัวแปรระดับโลกได้ง่าย การใช้ตัวแปรระดับโลกจึงเป็นแหล่งเพาะเชื้อของข้อผิดพลาดที่ตามจับได้ยาก ด้วยเหตุนี้ การใช้ตัวแปรระดับโลกในสคริปต์ควรลดลงให้เหลือน้อยที่สุด ควรจะไม่มีตัวแปรระดับโลกเลยหรือมีจำนวนน้อยที่สุดเท่าที่จะเป็นไปได้

javascriptlet num = 1;
    
function func() {
  console.log(num);
}

func();

javascriptlet num = 1;
    
function func() {
  console.log(num);
}

num = 2;
func();

javascriptfunction func() {
  console.log(num);
}

let num;

num = 1;
func();

num = 2;
func();