ภาพหน้าปก: ตอนที่ 13: Truthy & Falsy Values

1. 🎯 ตอนที่ 13: Truthy & Falsy Values (สัจธรรมความจริงและคำลวงในโลก JS)

สวัสดีครับน้องๆ นักพัฒนาทุกคน! หยิบกาแฟแก้วโปรดมาจิบให้ชื่นใจ แล้วมาลุยกันต่อครับ ในตอนที่แล้วเราพูดถึงเรื่อง Type Coercion (การแปลงประเภทข้อมูล) กันไป ซึ่งเป็นเวทมนตร์ที่ JavaScript แอบทำให้เราลับๆ วันนี้เราจะมาเจาะลึกอีกหนึ่งเวทมนตร์ที่ต่อยอดมาจากตอนที่แล้ว และเป็นหัวใจสำคัญที่ทำให้โค้ด JavaScript ของเราสั้น กระชับ และดูเป็นมือโปรสุดๆ นั่นก็คือเรื่องของ “Truthy & Falsy Values” ครับ

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

น้องๆ เคยสงสัยไหมครับว่า เวลาเราเขียนเงื่อนไข if (...) ในภาษาอื่นอย่าง C# หรือ Java สิ่งที่อยู่ในวงเล็บจะต้องเป็นค่าตรรกศาสตร์ true หรือ false (Boolean) เท่านั้น ถ้าเราเผลอใส่ตัวเลขหรือข้อความลงไป โปรแกรมจะพังและด่าเราทันที!

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

การประเมินโหงวเฮ้งนี้แหละครับ คือสัจธรรมที่เราเรียกว่า Truthy (หน้าตาดูเป็นคนจริง) และ Falsy (หน้าตาดูเป็นคนลวง)

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

กฎของ JavaScript ในเรื่องนี้จำง่ายนิดเดียวครับ: “จงจำเฉพาะหน้าตาของคนลวง (Falsy) ให้ขึ้นใจ เพราะที่เหลือบนโลกนี้คือคนจริง (Truthy) ทั้งหมด!”

คลับคนลวง (The Falsy Values) มีเพียงข้อมูล 8 ตัวนี้เท่านั้นในจักรวาล JavaScript ที่เมื่อถูกแปลงเป็น Boolean แล้วจะได้ค่าเป็น false:

  1. false (อันนี้แน่นอนอยู่แล้ว เป็นตัวมันเอง)
  2. 0 (เลขศูนย์)
  3. -0 (เลขศูนย์ติดลบ)
  4. 0n (เลขศูนย์ในรูปแบบ BigInt)
  5. "" หรือ '' (Empty String หรือข้อความว่างเปล่าที่ไม่มีอะไรเลย)
  6. null (ค่าว่างแบบตั้งใจ)
  7. undefined (ค่าว่างแบบยังไม่ได้กำหนดค่า)
  8. NaN (Not a Number - ผลลัพธ์จากการคำนวณที่พังพินาศ)

คลับคนจริง (The Truthy Values) ข้อมูลอะไรก็ตามที่ “ไม่ได้อยู่ใน 8 ข้อด้านบน” จะถูกประเมินว่าเป็น true (Truthy) ทันที! ตัวอย่างที่คนมักจะตกหลุมพรางและงงกันบ่อยๆ คือ:

  • "0" (ข้อความที่มีเลขศูนย์อยู่ข้างใน ถือว่าเป็น Truthy เพราะไม่ใช่ข้อความว่างเปล่า!)
  • "false" (ข้อความคำว่า false ก็เป็น Truthy!)
  • [] (Array ว่างๆ ถือเป็น Truthy)
  • {} (Object ว่างๆ ก็ถือเป็น Truthy)
  • function(){} (ฟังก์ชันเปล่าๆ ก็เป็น Truthy)
แผนภาพแยกถังข้อมูล Truthy และ Falsy

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

เมื่อเรารู้จักโหงวเฮ้งข้อมูลแล้ว เราสามารถเอามาเขียนโค้ดย่อ (Shorthand) ได้หล่อๆ แบบนี้เลยครับ:

// ❌ แบบดั้งเดิม (คนเขียนภาษาอื่นมักจะเขียนแบบนี้)
let username = "";
if (username !== "" && username !== null && username !== undefined) {
    console.log("ยินดีต้อนรับ " + username);
} else {
    console.log("โปรดกรอกชื่อผู้ใช้!"); // บรรทัดนี้จะทำงาน
}

// ✅ แบบ JS ตัวจริง (ประเมิน Falsy ไปเลย)
if (username) {
    console.log("ยินดีต้อนรับ " + username);
} else {
    console.log("โปรดกรอกชื่อผู้ใช้!"); // ได้ผลเหมือนกันเป๊ะ เพราะ "" คือ Falsy
}


// 🚀 ท่าไม้ตายที่ 1: Default Values ด้วย Logical OR (||)
// ถ้า name เป็น Falsy (เช่น null หรือ "") ให้ใช้คำว่า 'Anonymous' แทน
let name = null;
let displayName = name || 'Anonymous'; 
console.log(displayName); // "Anonymous"


// 🛡️ ท่าไม้ตายที่ 2: Guarding ด้วย Logical AND (&&)
// ถ้า user มีค่าจริง (Truthy) ถึงจะยอมให้เข้าถึง user.profile
let user = null;
let profile = user && user.profile; 
console.log(profile); // ได้ null (โค้ดไม่พัง ถ้าไม่ใช้ && มันจะ Error ว่า Cannot read property of null)


// 🪄 ท่าไม้ตายที่ 3: เสกทุกสิ่งให้เป็น Boolean แท้ๆ ด้วย Double Bang (!!)
// เครื่องหมาย ! ตัวแรกคือ NOT (กลับค่า) และ ! ตัวที่สองคือกลับมาเป็นค่าเดิมในร่าง Boolean
console.log(!!"Hello"); // true (เพราะ "Hello" เป็น Truthy)
console.log(!!0);       // false (เพราะ 0 เป็น Falsy)

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

ในระดับ Senior เรามีข้อควรระวัง (Gotchas) ในการใช้ทริคนี้ครับ:

  1. ⚠️ หลุมพรางของ Logical OR (||) กับเลข 0: สมมติว่าเรากำลังทำระบบตั้งค่าความกว้างหน้าจอ (maxWidth) let max = maxWidth || 500; ถ้าผู้ใช้ไม่ส่งค่ามา (undefined) มันจะได้ 500 ซึ่งถูกต้อง แต่ถ้าผู้ใช้ตั้งใจตั้งค่าความกว้างเป็น 0 ล่ะ? เลข 0 เป็น Falsy ทำให้ระบบไปดึงค่า 500 มาใช้แทนเฉยเลย! โค้ดพังทันที! ทางแก้: ใน ES2020 เรามีพระเอกขี่ม้าขาวคือ Nullish Coalescing Operator (??) ครับ มันจะเช็คเฉพาะ null กับ undefined เท่านั้น let max = maxWidth ?? 500; (คราวนี้ถ้าเป็น 0 ก็จะได้ 0 ตามต้องการครับ!)

  2. 👻 อาถรรพ์ document.all: พี่เคยบอกว่า “Object ทุกตัวบนโลก JS เป็น Truthy” ใช่ไหมครับ? ความจริงแล้วมีข้อยกเว้นระดับจักรวาลอยู่ 1 ตัว นั่นคือ document.all ครับ! มันเป็น Object ที่ใช้ดึง Element ใน HTML สมัยเบราว์เซอร์ยุคเก่าๆ คณะกรรมการ JS เลยตัดสินใจตั้งค่าให้มันเป็น Falsy ซะ เพื่อให้โค้ดเก่าๆ ที่เคยใช้เช็คเวอร์ชันเบราว์เซอร์ทำงานต่อไปได้ (รู้ไว้ประดับบารมีพอครับ เราแทบไม่ได้ใช้มันแล้วในปัจจุบัน)

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

การเข้าใจเรื่อง Truthy & Falsy Values คือหนึ่งใน “วิชาตัวเบา” ของโปรแกรมเมอร์สาย JavaScript ครับ มันช่วยให้เราเขียนเช็คค่าว่าง จัดการ Default Value และป้องกันโค้ด Error ได้สั้นลงอย่างมหาศาล แต่ก็ต้องใช้ด้วยความระมัดระวังเมื่อข้อมูลของเราดันมีโอกาสเป็นเลข 0 หรือ "" ที่มีความหมายจริงๆ นะครับ

ในตอนหน้า เราจะมาพักเรื่องทฤษฎีปวดหัว แล้วมาจัดกระบวนท่าจัดการข้อมูลระดับสูงกันกับ “ตอนที่ 14: ปลดล็อกพลัง Array ด้วย Map, Filter, Reduce” ที่จะทำให้การวนลูป (Loops) ของน้องๆ เปลี่ยนไปตลอดกาล! เตรียมตัวให้พร้อม แล้วพบกันครับ!

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