ภาพหน้าปก: ตอนที่ 15: Strict Mode

1. 🎯 ตอนที่ 15: Strict Mode เวทมนตร์ดัดนิสัย JavaScript

สวัสดีครับน้องๆ นักพัฒนาทุกคน! ชงกาแฟแก้วโปรดแล้วมานั่งล้อมวงกันครับ วันนี้พี่จะพาไปรู้จักกับ “คุณครูฝ่ายปกครอง” ประจำโลก JavaScript ที่จะมาช่วยดัดนิสัยการเขียนโค้ดของเราให้มีระเบียบวินัย ปลอดภัย และไร้บั๊กกวนใจ สิ่งนั้นก็คือ Strict Mode ครับ!

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

น้องๆ ทราบไหมครับว่า JavaScript ถูกออกแบบมาในยุคแรกเริ่มเพื่อให้เป็นภาษาที่ “ใจดี” และ “เป็นมิตรกับมือใหม่” สุดๆ ความใจดีนี้ทำให้มันยอมมองข้ามข้อผิดพลาดเล็กๆ น้อยๆ ไป (เราเรียกพฤติกรรมดั้งเดิมนี้ว่า Sloppy Mode หรือโหมดหละหลวม)

เช่น ถ้าเราลืมประกาศตัวแปรด้วย var, let, หรือ const แล้วดันไปพิมพ์ userName = "Wisit" ดื้อๆ ระบบก็จะไม่ด่าเราสักคำ แต่มันจะแอบเสกตัวแปรนี้ไปแปะไว้ที่ Global Object (window) ให้เราแบบเนียนๆ ดูเหมือนจะดีใช่ไหมครับ? แต่ในโปรเจกต์ขนาดใหญ่ ความใจดีพวกนี้แหละครับที่ก่อให้เกิด “บั๊กเงียบ” (Silent Errors) ที่ตามจับตัวยากมาก! กว่าจะรู้ตัว แอปพลิเคชันก็พังพินาศไปแล้ว

ด้วยเหตุนี้ ในมาตรฐาน ECMAScript 5 (ES5) คณะกรรมการผู้สร้างภาษาจึงได้เพิ่มโหมดใหม่ที่เรียกว่า Strict Mode ขึ้นมา เพื่อทำหน้าที่เป็นเหมือนคุณครูสุดเจ้าระเบียบ ที่จะคอยตีมือเราทันทีเมื่อเราเขียนโค้ดแบบมักง่าย ทำให้เราจับบั๊กได้ตั้งแต่ตอนเขียนโค้ด ไม่ต้องไปปวดหัวตอนรันจริงครับ!

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

Strict Mode คืออะไร? มันไม่ใช่ภาษาใหม่ครับ แต่มันคือ “ข้อบังคับ” (Restricted Variant) ที่จะเปลี่ยนกฎเกณฑ์การทำงานของ JavaScript ให้เข้มงวดขึ้น โดยมีเป้าหมายหลักคือ:

  1. เปลี่ยนข้อผิดพลาดที่เคยเงียบๆ ให้กลายเป็นการโยน Error (Throw Exception) ออกมาดังๆ
  2. ปิดการใช้งานฟีเจอร์แปลกๆ ที่อาจทำให้เกิดบั๊ก
  3. ช่วยให้ตัวประมวลผล (JavaScript Engine) สามารถรีดประสิทธิภาพ (Optimize) โค้ดให้ทำงานได้รวดเร็วขึ้น

การเปิดใช้งาน (How to invoke) วิธีเรียกคุณครูฝ่ายปกครองมาคุมโค้ดเรานั้นง่ายมากครับ แค่พิมพ์ข้อความ (String) ว่า "use strict"; หรือ 'use strict'; เอาไว้ที่บรรทัดบนสุดของไฟล์ หรือบรรทัดแรกสุดของฟังก์ชันที่เราต้องการ

หลายคนอาจสงสัยว่า ทำไมต้องเป็นแค่ String ธรรมดา? คำตอบคือ เพื่อให้เว็บบราวเซอร์ยุคเก่าๆ ที่ไม่รู้จัก Strict Mode มองว่ามันเป็นแค่ข้อความไร้สาระบรรทัดนึง แล้วข้ามมันไปโดยไม่พังนั่นเองครับ เป็นความเข้ากันได้แบบย้อนหลัง (Backward Compatibility) ที่ฉลาดมาก!

แผนภาพเปรียบเทียบการทำงานระหว่าง Sloppy Mode และ Strict Mode

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

เรามาดูความแตกต่างระหว่างการไม่มีและมี Strict Mode กันครับ:

// ❌ 1. ตัวอย่าง Sloppy Mode (ไม่ได้เปิด use strict)
function sloppyLogger() {
    missingVar = "แอบสร้าง Global Variable ซะงั้น!"; // ลืมใส่ let/const
    console.log(missingVar); 
}
sloppyLogger(); 
// รันผ่านฉลุย แถมได้ตัวแปรขยะไปกองอยู่ใน window.missingVar ด้วย!


// ✅ 2. ตัวอย่าง Strict Mode
"use strict"; // เปิดใช้เวทมนตร์ดัดนิสัย!

function strictLogger() {
    safeVar = "ฉันคือโปรแกรมเมอร์ที่ดี"; 
    // 💥 พังทันที! 
    // ReferenceError: safeVar is not defined
}
strictLogger();


// ✅ 3. การเปลี่ยนบริบทของ this (this Context)
function whoAmI() {
    console.log(this);
}
// ใน Sloppy Mode: พิมพ์ออกมาเป็น Window Object (หรือ Global)
// ใน Strict Mode: พิมพ์ออกมาเป็น undefined ป้องกันการแอบแก้ Global state!

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

ทำไมโปรเจกต์สมัยใหม่ถึงต้องใช้ Strict Mode เสมอ? พี่ขอลิสต์ “พฤติกรรมต้องห้าม” ที่ Strict Mode เข้ามาช่วยปกป้องเราครับ:

  1. 🚫 บอกลาการแอบเปลี่ยนค่าคงที่: ในอดีต ถ้าเราพยายามเปลี่ยนค่าของคุณสมบัติที่อ่านได้อย่างเดียว (Read-only properties) เช่น ค่า NaN หรือพยายามเพิ่ม Property ให้กับ Object ที่ถูกสั่ง Object.freeze() ไว้ โค้ดจะยอมทำงานต่อไปแบบเงียบๆ (Silently fail) แต่ใน Strict Mode มันจะสับสวิตช์โยน TypeError ใส่หน้าเราทันทีครับ!
  2. 🚫 ห้ามตั้งชื่อพารามิเตอร์ซ้ำกัน: ใน Sloppy Mode การเขียน function sum(a, a, c) เป็นเรื่องที่ทำได้ (โดยตัวแปร a จะยึดค่าของอาร์กิวเมนต์ตัวหลังสุด) ซึ่งดูยังไงก็เป็นบั๊กที่เกิดจากการพิมพ์ผิดแน่ๆ Strict Mode จึงสั่งแบนและโยน SyntaxError ให้ทันทีครับ
  3. 🚫 ยกเลิกคำสั่ง with: คำสั่ง with ถูกมองว่าเป็น “ตัวร้าย” ที่ทำให้ทั้งโปรแกรมเมอร์และ JS Engine สับสนว่าตัวแปรที่เราอ้างถึงมันมาจากไหนกันแน่ Strict Mode สั่งประหารคำสั่งนี้ทิ้งเลยครับ ใครใช้เจอ SyntaxError
  4. 🚫 ขัง eval() ไว้ในกล่อง: ฟังก์ชัน eval() ที่ใช้รัน String ให้กลายเป็นโค้ด ปกติมันมักจะทำตัวเป็นอาชญากรแอบสร้างตัวแปรใหม่ให้ไหลออกมากวน Scope ภายนอก แต่ถ้าอยู่ใน Strict Mode ตัวแปรที่เกิดจาก eval() จะถูกขังตายอยู่แค่ใน Scope ของมันเท่านั้นครับ

Pro-Tip ขั้นสุดยอด: ถ้าน้องๆ เขียนโค้ดแบบ ES6 Modules (ใช้ import/export) หรือเขียนโค้ดจำพวก ES6 Classes (class MyClass {}) น้องๆ ไม่จำเป็นต้องพิมพ์ "use strict"; ให้เมื่อยมือเลยครับ เพราะข้อกำหนดใหม่บังคับให้สภาพแวดล้อมเหล่านั้น ทำงานเป็น Strict Mode โดยอัตโนมัติ 100%!

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

การใช้ Strict Mode ก็เหมือนกับการขับรถโดยคาดเข็มขัดนิรภัยครับ แรกๆ อาจจะรู้สึกอึดอัดที่ถูกเตือนเวลาเราเขียนโค้ดแบบหละหลวม แต่มันคือปราการด่านแรกที่จะช่วยปกป้องเราจากบั๊กประหลาดๆ (Weird Bugs) และป้องกันแฮกเกอร์ที่พยายามโจมตีช่องโหว่ของภาษาได้เป็นอย่างดี การเขียนโค้ดแบบ “ใช้ความเข้มงวด” จึงเป็นมาตรฐานที่ Developer มืออาชีพทุกคนต้องมีครับ

ตอนนี้เราก็มีทั้งพื้นฐานตัวแปร ฟังก์ชัน และการป้องกันข้อผิดพลาดครบถ้วนแล้ว ในตอนหน้า พี่จะพาไปพบกับเทคนิคที่เป็นสุดยอดเวทมนตร์ของ ES6 นั่นคือ “Destructuring” หรือการถอดรหัสและดึงข้อมูลออกจาก Array และ Object แบบหล่อเท่ บรรทัดเดียวจบ! เตรียมตัวให้พร้อม แล้วพบกันครับ!

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