ภาพหน้าปก: ตัวแปร (Variables) กล่องเก็บข้อมูลในโลก JS

1. 🎯 ตอนที่ 3: ตัวแปร (Variables) กล่องเก็บข้อมูลในโลก JS

สวัสดีครับน้องๆ นักพัฒนาทุกคน! ชงกาแฟกันมาให้พร้อม เพราะวันนี้พี่จะพาดำดิ่งลงสู่แก่นรากฐานของการเขียนโปรแกรม นั่นคือเรื่องของ “ตัวแปร” (Variables)

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

2. 📖 เปิดฉาก (The Hook)

น้องๆ ลองจินตนาการดูว่า เรามีกล่องเก็บของชื่อ “รหัสผ่าน” อยู่ในห้องส่วนตัว (เสมือนเป็น Scope ในโค้ด) วันดีคืนดี มีใครก็ไม่รู้จากนอกห้องสามารถมองเห็นและดึงรหัสผ่านนี้ไปใช้ได้หน้าตาเฉย! หรือหนักกว่านั้น เรายังไม่ได้สร้างกล่องขึ้นมาเลย แต่ระบบดันเสกกล่องเปล่าๆ มาให้เราใช้ซะงั้น อาการ “กล่องทะลุมิติ” หรือ “กล่องเกิดก่อนกำหนด” แบบนี้แหละครับ คือความน่าปวดหัวของ JavaScript ยุคเก่าที่ใช้คีย์เวิร์ด var

จนกระทั่งในปี 2015 เมื่อมาตรฐาน ES6 ถือกำเนิดขึ้น JavaScript ก็ได้รับการอัปเกรดครั้งใหญ่ โดยการเพิ่มคีย์เวิร์ดอย่าง let และ const เข้ามาเป็นอัศวินขี่ม้าขาว เพื่อจัดระเบียบกล่องข้อมูลเหล่านี้ให้เป็นไปตามหลักการเขียนโปรแกรมที่ควรจะเป็น

3. 🧠 แก่นวิชา (Core Concepts)

ก่อนอื่นต้องเข้าใจก่อนว่า JavaScript เป็นภาษาแบบ Loosely Typed คือเราไม่ต้องบอกระบบว่ากล่องนี้ต้องเก็บตัวเลขหรือข้อความเท่านั้น กล่อง 1 ใบสามารถเก็บข้อมูลเปลี่ยนประเภทไปมาได้อิสระครับ

ทีนี้เรามาดู “3 รูปแบบ” ในการประกาศตัวแปรกัน:

1. var (The Legacy Box - รุ่นเก๋าจอมทะลุมิติ)

  • Scope: ทำงานแบบ Function Scope หมายความว่าถ้าเราประกาศ var ไว้ในฟังก์ชัน มันจะถูกกักขังไว้ในฟังก์ชันนั้นก็จริง แต่ถ้าเราประกาศไว้ในบล็อกคำสั่งย่อยๆ อย่าง if หรือ for ลูป ตัวแปรมันจะ “ทะลุ” (Leak) ออกมาให้ใช้ข้างนอกบล็อกได้สบายๆ!
  • Hoisting: มีพฤติกรรมที่เรียกว่า Hoisting คือระบบจะดึงการประกาศตัวแปรไปไว้ “บนสุด” ของ Scope เสมอ ทำให้เราสามารถเรียกใช้ตัวแปร var ได้ตั้งแต่บรรทัดที่ยังไม่ได้ประกาศโค้ด โดยจะได้ค่าเป็น undefined ออกมา

2. let (The Modern Box - รุ่นใหม่ ไฉไล เป็นระเบียบ)

  • Scope: ทำงานแบบ Block Scope เหมือนภาษาโปรแกรมมิ่งสากลทั่วไป กล่องจะถูกจำกัดบริเวณอยู่แค่ในปีกกา { ... } ที่มันเกิดมาเท่านั้น ไม่มีอาการทะลุบล็อกอีกต่อไป
  • TDZ (Temporal Dead Zone): แม้ let จะมี Hoisting เหมือนกัน แต่มันฉลาดกว่าตรงที่ มันจะกักตัวแปรนั้นไว้ในโซนต้องห้าม (TDZ) จนกว่าโค้ดจะรันมาถึงบรรทัดที่ประกาศจริงๆ หากเราเผลอไปเรียกใช้ก่อน มันจะไม่ยอมให้ค่า undefined แต่จะฟ้องพังด้วย ReferenceError ทันที! ซึ่งช่วยให้เราหาบั๊กได้ง่ายขึ้นมาก
  • No Redeclaration: ไม่อนุญาตให้ประกาศตัวแปรชื่อซ้ำกันใน Scope เดียวกัน

3. const (The Immutable Box - กล่องปิดตาย)

  • Behavior: ย่อมาจาก Constant ใช้ประกาศค่าคงที่ มีคุณสมบัติ Block Scope และ TDZ เหมือน let ทุกประการ
  • Immutable Reference: เมื่อสร้างแล้ว “ต้องกำหนดค่าเริ่มต้นทันที” และ “ห้ามนำกล่องนี้ไปชี้ที่ของชิ้นใหม่” เด็ดขาด (Reassignment is not allowed)
แผนภาพเปรียบเทียบ Function Scope ของ var และ Block Scope ของ let/const

4. 💻 ร่ายมนต์โค้ด (Show me the Code)

มาดูความแตกต่างของการทำงานจริงในระดับโค้ดกันครับ:

// ❌ 1. ปัญหาของ var (Scope Leak & Hoisting)
console.log(oldBox); // ไม่ Error นะ! แต่ได้ค่า "undefined" เพราะ Hoisting
var oldBox = "Old Data";

if (true) {
    var secret = "1234"; // ประกาศในบล็อก if
}
console.log(secret); // "1234" อ้าว! ทะลุออกมานอก if เฉยเลย


// ✅ 2. ความปลอดภัยของ let (Block Scope & TDZ)
// console.log(newBox); // ถ้าเปิดคอมเมนต์บรรทัดนี้ จะ Error ทันที (TDZ)
let newBox = "New Data";

if (true) {
    let blockData = "Safe inside";
    console.log(blockData); // ใช้งานได้ปกติ
}
// console.log(blockData); // Error: blockData is not defined! ปลอดภัยมาก ไม่ทะลุออกมา


// 🔒 3. ข้อพึงระวังของ const (Constant)
const PI = 3.14159;
// PI = 3.14; // TypeError: Assignment to constant variable. เปลี่ยนค่าไม่ได้!

// ⚠️ Trick ของคนเขียน JS: const กับ Object/Array
const myProfile = { name: "Wisit" };
// แม้จะเป็น const แต่เราแก้ "ไส้ใน" ของมันได้นะ!
myProfile.name = "Tony"; 
console.log(myProfile.name); // "Tony" 
// ที่ทำได้เพราะเราไม่ได้เปลี่ยนตัวกล่อง myProfile แต่เราแค่หยิบของข้างในกล่องมาเปลี่ยน

5. 🛡️ เคล็ดลับจากคัมภีร์ลับ (Under the Hood / Pro-Tips)

ในฐานะโปรแกรมเมอร์ที่มีประสบการณ์ พี่ขอแชร์กฎเหล็กทองคำ (Golden Rules) ที่ใช้กันในวงการ Industry ปัจจุบันครับ:

  1. 🚫 บอกลา var ไปได้เลย: ในยุค Modern JavaScript (ES6+) เราแทบจะไม่มีความจำเป็นต้องใช้ var อีกต่อไป การเลิกใช้ var จะช่วยลดบั๊กแปลกๆ ที่เกิดจาก Hoisting และ Global Namespace Pollution ได้มหาศาล
  2. 👑 ยกให้ const เป็นพระเอก: จงใช้ const เป็นค่าเริ่มต้น (Default) เสมอเวลาสร้างตัวแปรใหม่ เพราะเมื่อคุณและเพื่อนร่วมทีมอ่านโค้ด การเห็นคำว่า const เป็นการสื่อสารที่ชัดเจนว่า “ตัวแปรนี้จะไม่มีวันถูกเปลี่ยนค่าใหม่” มันช่วยลดภาระสมองในการไล่ตามอ่านการทำงานของโค้ดได้อย่างดีเยี่ยม
  3. 🔄 ใช้ let เฉพาะเมื่อต้องเปลี่ยนค่า: เราจะสลับมาใช้ let ก็ต่อเมื่อเราแน่ใจว่าตัวแปรนั้นๆ ต้องมีการบวกเพิ่ม หรือกำหนดค่าใหม่ในภายหลังเท่านั้น (เช่น ตัวแปร i ในการวนลูป for หรือสวิตช์เปิดปิดสถานะต่างๆ)

6. 🏁 บทสรุป (To be continued…)

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

จำง่ายๆ ครับ: เลิกใช้ var, เริ่มด้วย const, และใช้ let เมื่อต้องเปลี่ยนค่า!

ในตอนหน้า เราจะมาดูกันต่อว่า นอกจากตัวแปรแล้ว ข้อมูล (Data Types) แบบลึกๆ ใน JavaScript มีอะไรให้เราต้องระวังอีกบ้าง เตรียมตัวให้พร้อม แล้วเจอกันใหม่ครับ!

ต้องการที่ปรึกษาและพัฒนาระบบ Automation หรือ Web Application ให้กับโรงงานของคุณ? ทีมงาน WP Solution พร้อมให้บริการออกแบบและติดตั้งระบบแบบครบวงจร ดูรายละเอียดบริการของเราได้ที่: www.wpsolution2017.com หรือพูดคุยปรึกษาเบื้องต้นได้ที่ Line: wisit.p