ขอบเขตของตัวแปรใน if-else ใน JavaScript

เพื่อให้ง่าย สมมติว่าเรามีเงื่อนไขที่เป็นจริงเสมอ:

javascriptif (true) {
  
}

ลองดูโค้ดต่อไปนี้:

javascriptif (true) {
  let res = '!';
}

console.log(res);

อย่างที่คุณเห็น ค่า '!' ควรถูกกำหนดให้กับตัวแปร res อย่างไรก็ตาม ถ้ารันโค้ดนี้ จะเกิดข้อผิดพลาดในคอนโซล!

ประเด็นคือ ตัวแปรที่ ประกาศภายในวงเล็บปีกกา จะมองเห็นได้เฉพาะภายใน วงเล็บปีกกานั้นเท่านั้น และไม่สามารถมองเห็นจากภายนอกได้ ในทางวิทยาศาสตร์ เรากำลังพูดถึง ขอบเขตของตัวแปร

เราสามารถพูดได้ว่าขอบเขตของตัวแปร ที่ประกาศภายในวงเล็บปีกกา คือภายในวงเล็บปีกกานั้นเท่านั้น อย่างไรก็ตาม ถ้าตัวแปรถูกประกาศไว้นอกวงเล็บปีกกา มันจะสามารถมองเห็นได้ทั้งภายในและภายนอก:

javascriptlet res; // ประกาศตัวแปรไว้นอกวงเล็บ

if (true) {
  res = '!';
}

console.log(res); // แสดงผล '!'

ในตัวอย่างถัดไป ตัวแปร res จะถูกกำหนดค่าเป็น 1 หรือ 2 ขึ้นอยู่กับเงื่อนไข:

javascriptlet num = 5;

if (num >= 0) {
  let res = 1;
} else {
  let res = 2;
}

console.log(res);

อย่างไรก็ตาม ถ้ารันโค้ดนี้ จะเกิดข้อผิดพลาดในคอนโซล ตอนนี้คุณคงเข้าใจแล้วว่า สาเหตุทั้งหมดคือเรื่องการมองเห็นของตัวแปร ในการแก้ปัญหา มาประกาศตัวแปรไว้นอกเงื่อนไขกัน:

javascriptlet test = true;
let res; // ประกาศตัวแปรไว้นอกเงื่อนไข

if (test) {
  res = 1;
} else {
  res = 2;
}

console.log(res); // แสดงผล 1

javascriptlet age = 17;

if (age >= 18) {
  let adult = true;
} else {
  let adult = false;
}

console.log(adult);