ภาพหน้าปก: Data Types พื้นฐานที่ต้องรู้

1. 🎯 ตอนที่ 4: Data Types พื้นฐานที่ต้องรู้ (Primitive Types)

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

ในโลกของการเขียนโปรแกรม ข้อมูลแต่ละชนิดก็เหมือน “วัตถุดิบ” ในห้องครัวครับ เราคงไม่เอาน้ำเปล่า (ของเหลว) ไปหั่นบนเขียง หรือเอาเนื้อหมู (ของแข็ง) ไปต้มในกาต้มน้ำ โค้ดของเราก็เช่นกัน JavaScript จำเป็นต้องรู้ว่าข้อมูลที่เรากำลังจัดการคืออะไร เพื่อให้มันแสดงพฤติกรรมได้ถูกต้อง วันนี้เราจะมาทำความรู้จักกับ Primitive Data Types หรือข้อมูลชนิดพื้นฐานที่สุดในจักรวาล JavaScript กันครับ!

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

น้องๆ เคยสงสัยไหมครับว่า ทำไมเวลาเราเอาเลข 5 ไปบวกกับเลข 5 ถึงได้ 10 แต่พอเราเอาคำว่า "5" ไปบวกกับ "5" ระบบดันตอบเราว่า "55" ซะงั้น?

นี่แหละครับคือเวทมนตร์ (และบางครั้งก็เป็นคำสาป!) ของ Data Types ใน JavaScript เพราะภาษา JavaScript เป็นภาษาแบบ Dynamic Typing คือเราไม่ต้องคอยบอกระบบล่วงหน้าว่าตัวแปรนี้คือข้อมูลชนิดไหน ตัวแปรหนึ่งตัวสามารถเปลี่ยนร่างไปเก็บตัวเลข ข้อความ หรือแม้แต่ค่าความว่างเปล่าได้อย่างอิสระ แต่ถึงมันจะเปลี่ยนไปมาได้ ข้อมูลทุกชิ้นบนโลกของ JS ก็ยังถูกจัดกลุ่มอยู่ใน Data Types พื้นฐานที่เราต้องรู้ใจมันครับ

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

ข้อมูลใน JavaScript แบ่งออกเป็น 2 แก๊งใหญ่ๆ คือ Primitive Types (ข้อมูลพื้นฐาน) และ Reference Types (ประเภทอ้างอิง หรือพวก Object) วันนี้เราจะโฟกัสที่หมวด Primitive ซึ่งเปรียบเสมือน “อะตอม” ที่ไม่สามารถแตกตัวย่อยไปได้อีกแล้ว โดยมีพระเอกนางเอกทั้งหมดดังนี้ครับ:

  • 1. String (ข้อความ): ใช้เก็บตัวอักษร ข้อความ หรือประโยคต่างๆ เราสร้าง String ได้ง่ายๆ โดยการเอาข้อความไปใส่ไว้ในเครื่องหมายคำพูด จะเป็น Single quote '', Double quote "" หรือ Backticks `` ก็ได้ครับ
  • 2. Number (ตัวเลข): ต่างจากภาษาอื่นที่มักจะแยกชนิดของจำนวนเต็ม (Integer) และทศนิยม (Float) ออกจากกัน แต่ใน JavaScript “ตัวเลขก็คือตัวเลข” ครับ! มันใช้ Data Type เดียวครอบจักรวาล จะเป็น 10, 3.14 หรือเลขติดลบก็คือ Number ทั้งหมด
  • 3. Boolean (ค่าความจริง): มีแค่ 2 ค่าเท่านั้นคือ true (จริง) และ false (เท็จ) เอาไว้ใช้กับการตัดสินใจหรือเงื่อนไข (Condition) เช่น รหัสผ่านถูกต้องไหม? (true/false)
  • 4. Undefined (ยังไม่ถูกกำหนดค่า): อธิบายง่ายๆ คือ “เราสร้างกล่องขึ้นมาแล้ว แต่ยังไม่ได้เอาอะไรใส่ลงไป” ระบบจะให้ค่า Default เป็น undefined
  • 5. Null (ค่าว่างเปล่า): อันนี้คือความตั้งใจครับ มันคือการที่เราบอกระบบว่า “ฉันต้องการให้กล่องใบนี้ว่างเปล่าแบบไม่มีอะไรเลย” (Intentional absence)
  • 6. Symbol (สัญลักษณ์ไม่ซ้ำใคร): น้องใหม่ที่ถูกเพิ่มเข้ามาใน ES6 ทุกครั้งที่เราสร้าง Symbol ขึ้นมา มันจะเป็นค่าที่ “มีหนึ่งเดียวในโลก” (Unique) เสมอ นิยมใช้เป็น Key สำหรับซ่อน Property ใน Object ไม่ให้ชื่อไปซ้ำกับคนอื่น

(หมายเหตุ: ปัจจุบันมี BigInt เพิ่มเข้ามาสำหรับจัดการตัวเลขขนาดใหญ่มากๆ ด้วยนะครับ แต่เราจะยังไม่ลงลึกในบทนี้)

แผนภาพแสดงชนิดข้อมูลพื้นฐานทั้ง 6 ชนิดใน JavaScript

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

เรามาลองเขียนโค้ดและใช้ท่าไม้ตายอย่าง typeof ซึ่งเป็นคำสั่ง (Operator) เอาไว้ส่องดูว่าข้อมูลนั้นคือ Type อะไร

// 1. String
let devName = "John Doe";
console.log(typeof devName); // ผลลัพธ์: "string"

// 2. Number
let bugCount = 99;
let coffeePrice = 65.50; // ทศนิยมก็เป็น Number นะ
console.log(typeof bugCount); // ผลลัพธ์: "number"

// 3. Boolean
let isCodeWorking = false; // ชีวิตจริงมักจะเป็นแบบนี้ 😭
console.log(typeof isCodeWorking); // ผลลัพธ์: "boolean"

// 4. Undefined (สร้างตัวแปรแต่ยังไม่ให้ค่า)
let futureFeature;
console.log(futureFeature); // ผลลัพธ์: undefined
console.log(typeof futureFeature); // ผลลัพธ์: "undefined"

// 5. Null (สั่งให้ว่างเปล่าอย่างจงใจ)
let oldData = null;
console.log(oldData); // ผลลัพธ์: null
// ⚠️ ตรงนี้มี Surprise ครับ ไปดูในคัมภีร์ลับข้างล่าง!
console.log(typeof oldData); // ผลลัพธ์: "object" 

// 6. Symbol (สร้างมาสองอัน ชื่อเหมือนกัน แต่ไม่เท่ากัน!)
let sym1 = Symbol('id');
let sym2 = Symbol('id');
console.log(typeof sym1); // ผลลัพธ์: "symbol"
console.log(sym1 === sym2); // ผลลัพธ์: false (เพราะแต่ละอัน Unique สุดๆ!)

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

มีเรื่องตลกร้ายและข้อควรระวังในวงการ JavaScript ที่พี่อยากเตือนน้องๆ ไว้ครับ:

  • ⚠️ บั๊กบันลือโลกของ typeof null: ถ้าสังเกตในโค้ดด้านบน เวลาเราสั่ง typeof null สิ่งที่เราได้กลับมาคือคำว่า "object" ทั้งๆ ที่ Null เป็น Primitive Type ความจริงคือ… มันเป็น “บัก (Bug)” ที่ติดมาตั้งแต่สมัยสร้างภาษา JavaScript ในช่วงแรกๆ และเนื่องจากมีเว็บไซต์เก่าๆ พึ่งพาบักตัวนี้ไปแล้ว คณะกรรมการที่ดูแลภาษา JS เลยตัดสินใจว่าจะไม่แก้บักนี้เพื่อไม่ให้โค้ดเก่าพังพินาศครับ! Pro-tip: ถ้าอยากเช็คว่าเป็น null ไหม ให้ใช้เงื่อนไข value === null ตรงๆ ไปเลย ปลอดภัยที่สุดครับ
  • ⚠️ NaN (Not a Number) ดันเป็น Number!: ถ้าเราเอา String ไปคูณกับตัวเลข เช่น "apple" * 10 เราจะได้ค่า NaN (หมายถึง ไม่ใช่ตัวเลข) แต่ความตลกคือถ้าเราสั่ง typeof NaN ระบบจะตอบว่า "number" นะครับ! (เป็นประเภทข้อมูลตัวเลข ที่บ่งบอกว่าตัวมันไม่ใช่ตัวเลข… งงไหมล่ะฮ่าๆ)

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

และนี่ก็คือ 6 อัศวินแห่งข้อมูลพื้นฐาน (Primitive Types) ในโลกของ JavaScript ครับ การทำความเข้าใจว่า String เอาไว้เก็บข้อความ, Number ไว้คำนวณ, Boolean ไว้ตัดสินใจ, และความต่างระหว่าง Undefined กับ Null จะช่วยให้เราออกแบบโค้ดและไล่จับบั๊กได้อย่างแม่นยำมากๆ

ในตอนหน้า พี่จะพาไปดูอีกหนึ่งเรื่องที่ทำให้ JavaScript สนุก (และปวดหัว) นั่นคือ Type Coercion หรือการที่ระบบแอบแปลงชนิดข้อมูลให้เราแบบเนียนๆ มันทำงานยังไง รอติดตามกันได้เลยครับ!

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