Fundamentals

1. ทุกค่าใน JavaScript มีชนิดข้อมูล

ใน JavaScript ทุกค่า (value) ที่เราใช้งานจะมี "ชนิดข้อมูล" (data type) กำกับอยู่เสมอ ไม่ว่าจะเป็นตัวเลข, ข้อความ, ค่าจริง/เท็จ หรือแม้แต่ "ไม่มีค่า" การรู้ชนิดข้อมูลมีความสำคัญมาก เพราะ JavaScript ทำงานต่างกันกับค่าแต่ละชนิด เช่น 5 + 5 = 10 แต่ "5" + 5 = "55" — ผลต่างกันอย่างสิ้นเชิง!

2. Mental Model — ประเภทของภาชนะ

ลองเปรียบข้อมูลเป็นสิ่งของ และชนิดข้อมูลเป็นประเภทของภาชนะ: • แก้วน้ำ (number) — เก็บตัวเลข เช่น จำนวน, อุณหภูมิ • กระดาษ (string) — เก็บข้อความ เช่น ชื่อ, ที่อยู่ • สวิตช์ (boolean) — มีสองสถานะ: เปิด (true) / ปิด (false) • กล่องเปล่าโดยตั้งใจ (null) — กล่องที่เราบอกว่า "ว่างเปล่าโดยเจตนา" • ฉลากที่ไม่มีกล่อง (undefined) — ตัวแปรถูกประกาศแต่ยังไม่ได้กำหนดค่า การเลือกใช้ชนิดข้อมูลให้ถูกต้องคือพื้นฐานสำคัญของการเขียน JavaScript ที่ดี

3. Primitive Types ทั้ง 7 ชนิด

Primitive type คือชนิดข้อมูลพื้นฐานที่สุดใน JavaScript เป็นค่าชิ้นเดียว ไม่ใช่ object JavaScript ปัจจุบันมี primitive 7 ชนิด ได้แก่ string, number, boolean, null, undefined, symbol และ bigint บทนี้ให้ภาพรวมก่อน จากนั้น phase Primitive Types จะพาเจาะทีละชนิดพร้อม lab แยก

4. typeof — ตรวจสอบชนิดข้อมูล

typeof คือ operator ที่ใช้ตรวจสอบว่าค่าหนึ่ง ๆ มีชนิดข้อมูลอะไร ให้ผลลัพธ์เป็น string มีข้อควรระวังหนึ่งอย่าง: typeof null คืนค่า "object" ซึ่งเป็น bug เก่าแก่ใน JavaScript ตั้งแต่ปี 1995 และยังคงอยู่จนถึงปัจจุบันเพื่อรักษา backward compatibility

console.log(typeof "สวัสดี");    // "string"
console.log(typeof 42);           // "number"
console.log(typeof 3.14);         // "number"
console.log(typeof true);         // "boolean"
console.log(typeof false);        // "boolean"
console.log(typeof undefined);    // "undefined"
console.log(typeof null);         // "object" ← Bug เก่า! null ไม่ใช่ object
console.log(typeof Symbol());     // "symbol"
console.log(typeof 10n);          // "bigint"
console.log(typeof {});           // "object"
console.log(typeof []);           // "object"
console.log(typeof function(){}); // "function"

5. ตัวอย่างการใช้งานจริง

ดูว่าในโค้ดจริง แต่ละชนิดข้อมูลถูกใช้งานอย่างไร:

// string — ข้อความต้องครอบด้วย quotes เสมอ
let firstName = "สมชาย";
let lastName = 'ใจดี';
let greeting = `สวัสดี ${firstName}`;  // template literal

// number — ไม่ต้องครอบ quotes
let age = 25;
let price = 199.99;
let temperature = -5;

// boolean — true หรือ false เท่านั้น
let isLoggedIn = true;
let hasDiscount = false;

// null — ตั้งใจว่า "ไม่มีค่า"
let currentUser = null;     // ยังไม่มีผู้ใช้ล็อกอิน

// undefined — ยังไม่กำหนดค่า
let profilePicture;         // ค่าคือ undefined โดยอัตโนมัติ

// symbol — ค่า unique
let itemKey = Symbol("item");

// bigint — จำนวนเต็มขนาดใหญ่มาก
let largeId = 9007199254740993n;

console.log(typeof firstName);      // "string"
console.log(typeof age);            // "number"
console.log(typeof isLoggedIn);     // "boolean"
console.log(typeof currentUser);    // "object" ← bug ของ JS!
console.log(typeof profilePicture); // "undefined"
console.log(typeof itemKey);        // "symbol"
console.log(typeof largeId);        // "bigint"

6. สรุป

• JavaScript มี Primitive type 7 ชนิด: string, number, boolean, null, undefined, symbol, bigint
• string ใช้เก็บข้อความ ต้องครอบด้วย quotes (' " หรือ backtick)
• number ใช้เก็บตัวเลขทุกชนิด ทั้ง integer และ decimal
• boolean มีแค่สองค่า: true และ false
• null คือ 'ว่างเปล่าโดยเจตนา' — เราตั้งเองว่าไม่มีค่า
• undefined คือ 'ยังไม่ได้กำหนดค่า' — ค่า default ของตัวแปรใหม่
• symbol ใช้สร้างค่า unique ที่ไม่ซ้ำกัน
• bigint ใช้เก็บจำนวนเต็มขนาดใหญ่มาก และเขียนด้วย n ต่อท้าย
• typeof ใช้ตรวจสอบชนิดข้อมูล แต่ typeof null === 'object' เป็น bug เก่าของ JS

Lab 1: ประกาศตัวแปรหลายชนิด

Lab 2: ตรวจสอบชนิดด้วย typeof

Lab 3: null vs undefined