0Pricing
JavaScript Academy · บทเรียน

ขอบเขตบล็อก ฟังก์ชัน โมดูล และ TDZ

ทำความเข้าใจขอบเขตบล็อก ฟังก์ชัน และโมดูล ดู TDZ ในการทำงานจริง และหลีกเลี่ยงการทำให้ตัวแปรรั่วไหล

ขอบเขตบล็อก ฟังก์ชัน โมดูล และ TDZ เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 3 บทเรียน

บทนำ

เป้าหมาย: รู้ว่าตัวแปรอยู่ที่ใดและเริ่มใช้งานได้เมื่อใด

  • ขอบเขตบล็อก (การประกาศแบบเปลี่ยนค่าได้/แบบค่าคงที่)
  • ขอบเขตฟังก์ชัน (การประกาศแบบเก่า)
  • ขอบเขตโมดูล
  • ความปลอดภัยของ TDZ
ขอบเขตบล็อก ฟังก์ชัน โมดูล และ TDZ — ภาพประกอบ 1

ตัวอย่างขอบเขตบล็อก

ขอบเขตบล็อกจำกัดตัวแปรให้อยู่ภายในวงเล็บปีกกาคู่หนึ่ง

// Block scope: let/const exist only inside the braces
let lives = 3;

if (true) {
  const bonus = 5;
  let level = 1;
  console.log("Inside block:", bonus, level);
}

console.log("Lives:", lives);
// Uncommenting next line would fail (not in scope):
// console.log(bonus, level);
ขอบเขตบล็อก ฟังก์ชัน โมดูล และ TDZ — ภาพประกอบ 2

ขอบเขตฟังก์ชันด้วยการประกาศแบบเก่า

การประกาศแบบเก่ามีขอบเขตระดับฟังก์ชัน ไม่ใช่ระดับบล็อก ควรใช้การประกาศแบบเปลี่ยนค่าได้หรือแบบค่าคงที่ใน JS สมัยใหม่

// Function scope: var is visible across the whole function
function demo() {
  if (true) {
    var x = 10; // function-scoped
  }
  console.log("x is visible here:", x); // 10
}
demo();
ขอบเขตบล็อก ฟังก์ชัน โมดูล และ TDZ — ภาพประกอบ 3

พื้นฐานขอบเขตโมดูล

ขอบเขตโมดูล: การผูกค่าระดับบนสุดจะอยู่ภายใน file (โมดูล ES)

// Module scope: top-level variables are local to the module file
const appName = "CoddyKit";
console.log("App name:", appName);

// In a real project, this would be its own file/module.
// Other files must import to access appName.
ขอบเขตบล็อก ฟังก์ชัน โมดูล และ TDZ — ภาพประกอบ 4

เขตปลอดภัยจากการเข้าถึงก่อนประกาศ

TDZป้องกันการอ่านค่าก่อนเวลาโดยไม่ตั้งใจ โปรดประกาศก่อน แล้วจึงใช้งาน

// TDZ: using let/const before declaration throws ReferenceError
try {
  // Uncommenting would trigger TDZ:
  // console.log(mode); // ReferenceError
  let mode = "dark";
  console.log("Mode after declare:", mode);
} catch (e) {
  console.log("Caught:", e.message);
}
ขอบเขตบล็อก ฟังก์ชัน โมดูล และ TDZ — ภาพประกอบ 5

ข้อควรระวังเกี่ยวกับขอบเขต

ข้อควรระวัง:

  • อย่าใช้การประกาศแบบเก่าปะปนกับการประกาศแบบเปลี่ยนค่าได้หรือแบบค่าคงที่ในขอบเขตเดียวกัน
  • ประกาศใกล้จุดใช้งาน
  • หลีกเลี่ยงการอ่านค่าก่อนบรรทัดประกาศ (TDZ)
ขอบเขตบล็อก ฟังก์ชัน โมดูล และ TDZ — ภาพประกอบ 6

แบบทดสอบ TDZ

ตรวจสอบอย่างรวดเร็ว: พฤติกรรมของ TDZ

ขอบเขตบล็อก ฟังก์ชัน โมดูล และ TDZ — ภาพประกอบ 7

สรุปทบทวน

สรุปทบทวน: การประกาศแบบเปลี่ยนค่าได้และแบบค่าคงที่มีขอบเขตระดับบล็อก การประกาศแบบเก่ามีขอบเขตระดับฟังก์ชัน โมดูลมีขอบเขตของ file เป็นของตนเอง และ TDZ ป้องกันการเข้าถึงก่อนเวลา

ขอบเขตบล็อก ฟังก์ชัน โมดูล และ TDZ — ภาพประกอบ 8

คำถามที่พบบ่อย

บทเรียน “ขอบเขตบล็อก ฟังก์ชัน โมดูล และ TDZ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ขอบเขตบล็อก ฟังก์ชัน โมดูล และ TDZ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ขอบเขตบล็อก ฟังก์ชัน โมดูล และ TDZ”

ทำความเข้าใจขอบเขตบล็อก ฟังก์ชัน และโมดูล ดู TDZ ในการทำงานจริง และหลีกเลี่ยงการทำให้ตัวแปรรั่วไหล คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน

บทเรียน “ขอบเขตบล็อก ฟังก์ชัน โมดูล และ TDZ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. let, const และการหลีกเลี่ยง var
  2. ขอบเขตบล็อก ฟังก์ชัน โมดูล และ TDZ
  3. การตั้งชื่อ ความอ่านง่าย และข้อผิดพลาดที่พบบ่อย
← กลับไปที่ JavaScript Academy