Fundamentals

1. Block Scope คือขอบเขตของโค้ดใน { }

Block คือโค้ดที่อยู่ภายในวงเล็บปีกกา { } Scope คือขอบเขตที่ตัวแปรถูกมองเห็นและเรียกใช้ได้ ดังนั้น Block Scope คือขอบเขตของตัวแปรที่อยู่ใน block หนึ่ง ๆ ถ้าตัวแปรถูกประกาศไว้ใน { } บางตัวแปรจะใช้ได้เฉพาะใน { } นั้นเท่านั้น

{
  const message = "อยู่ใน block";
  console.log(message); // "อยู่ใน block"
}

// console.log(message); // ReferenceError: message is not defined

ตัวอย่างนี้ตั้งใจให้เห็นหลักการก่อน: `message` ถูกประกาศใน { } จึงใช้ได้ใน { } เท่านั้น เมื่อนอก block แล้ว JavaScript หา `message` ไม่เจอ

2. let และ const อยู่ใน block

ตัวแปรที่ประกาศด้วย let หรือ const มี Block Scope หมายความว่า JavaScript จะไม่ปล่อยให้ตัวแปรหลุดออกไปใช้นอก block ที่ประกาศไว้ พฤติกรรมนี้ช่วยลด bug จากการใช้ชื่อตัวแปรผิดที่

{
  let score = 10;
  const label = "คะแนน";

  console.log(label);
  console.log(score);
}

// ใช้นอก block ไม่ได้
// console.log(label); // ReferenceError
// console.log(score); // ReferenceError

• `let` เหมาะกับค่าที่ต้องเปลี่ยนภายใน block นั้น
• `const` เหมาะกับค่าที่ไม่ควร reassign ภายใน block นั้น
• เมื่อ block จบ ตัวแปร `let` และ `const` ที่ประกาศใน block นั้นจะไม่ถูกมองเห็นจากด้านนอก

3. var ไม่อยู่ใน block แบบเดียวกัน

var เป็นคีย์เวิร์ดเก่า ตัวแปรที่ประกาศด้วย var ไม่ถูกจำกัดด้วย standalone block ถ้าใช้ var ใน block ระดับเดียวกัน ตัวแปรยังถูกมองเห็นจากด้านนอก block ได้ นี่เป็นเหตุผลหนึ่งที่โค้ดสมัยใหม่หลีกเลี่ยง var

{
  var oldMessage = "var หลุดออกมาได้";
}

console.log(oldMessage); // "var หลุดออกมาได้"

4. Shadowing คือชื่อเดียวกันแต่คนละ scope

Shadowing คือการประกาศตัวแปรชื่อเดียวกับตัวแปรด้านนอก แต่ประกาศใน block ด้านใน ตัวแปรด้านในจะบังชื่อตัวแปรด้านนอกชั่วคราวเฉพาะใน block นั้น เมื่อนอก block แล้ว JavaScript จะกลับไปเห็นตัวแปรด้านนอกตามเดิม

const status = "ด้านนอก";

{
  const status = "ด้านใน";
  console.log(status); // "ด้านใน"
}

console.log(status); // "ด้านนอก"

Shadowing ใช้ได้ แต่ควรใช้เมื่อทำให้โค้ดชัดขึ้นจริง ๆ ถ้าชื่อซ้ำแล้วอ่านยาก ให้ตั้งชื่อใหม่ที่สื่อความหมายกว่า

5. จุดที่ควรระวังเมื่อใช้ Block Scope

• อย่าใช้ตัวแปร `let` หรือ `const` นอก block ที่ประกาศไว้
• อย่าใช้ `var` เพื่อหวังให้ตัวแปรหลุดออกมานอก block เพราะทำให้โค้ดคาดเดายาก
• ถ้าต้องใช้ค่าหลัง block ให้ประกาศตัวแปรด้านนอกก่อน แล้วกำหนดค่าภายใน block อย่างตั้งใจ
• ระวังการตั้งชื่อตัวแปรซ้ำใน block ซ้อนกัน ถ้าอ่านแล้วงงให้เปลี่ยนชื่อ

let result = "ยังไม่มีค่า";

{
  result = "พร้อมใช้งาน";
}

console.log(result); // "พร้อมใช้งาน"

Lab 1: พิสูจน์ว่า block แยกตัวแปรออกจากกัน

เป้าหมาย: ใช้ Block Scope เพื่อให้ตัวแปรชื่อเดียวกันด้านในและด้านนอกไม่ชนกัน โจทย์: 1. ประกาศ const message ด้านนอก มีค่าเป็น "นอก block" 2. สร้าง block ด้วย { } 3. ใน block ให้ประกาศ let หรือ const ชื่อ message มีค่าเป็น "ใน block" 4. แสดงผล message ใน block ก่อน 5. แสดงผล message ด้านนอกหลัง block ผลลัพธ์ที่ควรเห็นคือ "ใน block" ก่อน แล้วตามด้วย "นอก block"