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

ตัวแปร: let const var และขอบเขต

ประกาศตัวแปรด้วย let, const และ var ทำความเข้าใจขอบเขตบล็อก ขอบเขตฟังก์ชัน และเหตุใดจึงควรใช้ const กับค่าส่วนใหญ่

ตัวแปร: let const var และขอบเขต เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงต้องใช้ตัวแปร

ตัวแปรใช้จัดเก็บค่า เพื่อให้คุณนำค่ากลับมาใช้ใหม่ อัปเดตค่า และตั้งชื่อที่สื่อความหมายได้ JavaScript มีสามวิธีในการประกาศตัวแปร ได้แก่ var (แบบเก่า), let (แบบสมัยใหม่และกำหนดค่าใหม่ได้) และ const (แบบสมัยใหม่และการผูกค่าคงที่)

const — ตัวเลือกเริ่มต้น

ประกาศด้วย const เมื่อคุณจะไม่กำหนดค่าใหม่ให้ตัวแปร วิธีนี้สื่อเจตนาและป้องกันการกำหนดค่าใหม่โดยไม่ตั้งใจ โปรดทราบว่า const ป้องกันการผูกค่าใหม่ แต่ไม่ได้ทำให้ออบเจ็กต์หรืออาร์เรย์เปลี่ยนแปลงไม่ได้

const name = 'Alice';        // can't reassign
const PI = 3.14159;

const user = { age: 25 };    // object is mutable
user.age = 26;               // OK — property change, not rebinding
// user = {};               // Error — can't reassign const

let — เมื่อจำเป็นต้องกำหนดค่าใหม่

ใช้ let เมื่อค่าจะเปลี่ยนแปลง เช่น ตัวนับลูป ผลรวมสะสม และตัวแปรสถานะ let มีขอบเขตระดับบล็อก จึงมีอยู่เฉพาะภายใน { } ที่ครอบอยู่ใกล้ที่สุด

let score = 0;
score = score + 10;  // OK

for (let i = 0; i < 3; i++) {
  console.log(i);     // 0, 1, 2
}
// console.log(i);   // ReferenceError — i is out of scope

var — การประกาศแบบเดิม

var มีขอบเขตระดับฟังก์ชัน (ไม่ใช่ขอบเขตระดับบล็อก) และถูกยกการประกาศขึ้นไปไว้ด้านบนสุดของฟังก์ชัน การทำงานนี้ทำให้เกิดข้อผิดพลาดที่สังเกตได้ยาก หลีกเลี่ยง var ใน JavaScript สมัยใหม่ และเลือกใช้ const กับ let แทน

function example() {
  if (true) {
    var x = 5;   // function-scoped, not block-scoped
  }
  console.log(x); // 5 — still accessible here!
}

ขอบเขต: ตัวแปรมีอยู่ที่ใด

ขอบเขตส่วนกลาง: ประกาศไว้นอกฟังก์ชันหรือบล็อกใด ๆ และเข้าถึงได้จากทุกที่ ขอบเขตระดับฟังก์ชัน: ประกาศภายในฟังก์ชัน และเข้าถึงได้เฉพาะภายในฟังก์ชันนั้น ขอบเขตระดับบล็อก: let/const ที่อยู่ภายใน { } และเข้าถึงได้เฉพาะภายในบล็อกนั้น

การยกการประกาศ

การยกการประกาศจะย้ายการประกาศไปไว้ด้านบนสุดของขอบเขตในระหว่างการคอมไพล์ การประกาศ var จะถูกยกขึ้นและกำหนดค่าเริ่มต้นเป็น undefined ส่วน let และ const จะถูกยกขึ้นแต่ยังไม่กำหนดค่า การเข้าถึงก่อนการประกาศจะทำให้เกิดข้อผิดพลาดจากเขตเวลาห้ามเข้าถึง

การตั้งชื่อตัวแปร

ใช้ชื่อที่สื่อความหมาย ใช้ camelCase สำหรับตัวแปรและฟังก์ชัน (userName) ใช้ UPPER_SNAKE_CASE สำหรับค่าคงที่ (MAX_RETRIES) และใช้ PascalCase สำหรับคลาส (UserProfile) หลีกเลี่ยงอักษรเดี่ยว ยกเว้นในลูป (i, j)

การประกาศตัวแปรหลายตัว

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

// Less clear:
let a = 1, b = 2, c = 3;

// Preferred:
const MAX = 10;
let count = 0;
const label = 'Score';

เขตเวลาห้ามเข้าถึง (TDZ)

การเข้าถึงตัวแปร let หรือ const ก่อนการประกาศในโค้ดจะทำให้เกิด ReferenceError ช่วงระหว่างจุดเริ่มต้นของบล็อกกับการประกาศเรียกว่า TDZ

console.log(value); // ReferenceError: Cannot access 'value' before initialization
const value = 42;

const กับอาร์เรย์และออบเจ็กต์

const ป้องกันการกำหนดค่าใหม่ให้ตัวแปร แต่ค่าที่ตัวแปรอ้างอิงยังคงเปลี่ยนแปลงได้ ใช้ Object.freeze() เพื่อสร้างออบเจ็กต์ที่เปลี่ยนแปลงไม่ได้แบบตื้น หรือใช้รูปแบบที่ไม่เปลี่ยนแปลงค่าเพื่อให้ไม่เปลี่ยนแปลงแบบลึก

const items = [1, 2, 3];
items.push(4);       // OK — mutates the array
items = [];          // Error — can't reassign const

const config = Object.freeze({ maxAge: 30 });
config.maxAge = 99;  // Silently fails in non-strict mode

เหตุใดจึงควรเลือกใช้ const แทน let

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

ตรวจสอบอย่างรวดเร็ว

ความแตกต่างสำคัญระหว่าง let กับ var คืออะไร

ทบทวน: ตัวแปรและขอบเขต

เลือกใช้ const สำหรับค่าที่จะไม่ถูกกำหนดใหม่ ใช้ let สำหรับค่าที่เปลี่ยนแปลงได้ หลีกเลี่ยง var ขอบเขตระดับบล็อก (let/const) ช่วยจำกัดขอบเขตของตัวแปร การยกการประกาศ: var จะกำหนดค่าเริ่มต้นเป็น undefined ส่วน let/const จะทำให้เกิดข้อผิดพลาดจาก TDZ หากเข้าถึงเร็วเกินไป

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

บทเรียน “ตัวแปร: let const var และขอบเขต” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ตัวแปร: let const var และขอบเขต”

ประกาศตัวแปรด้วย let, const และ var ทำความเข้าใจขอบเขตบล็อก ขอบเขตฟังก์ชัน และเหตุใดจึงควรใช้ const กับค่าส่วนใหญ่ คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “ตัวแปร: let const var และขอบเขต” ใช้เวลานานแค่ไหน

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

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

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

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

  1. ตัวแปร: let const var และขอบเขต
  2. ชนิดข้อมูล: string number boolean null undefined
  3. ฟังก์ชัน: การประกาศ นิพจน์ และฟังก์ชันลูกศร
  4. ลำดับการควบคุม: if else switch for while
← กลับไปที่ Frontend Academy