Object

Dot notation คือ `object.key` — ชื่อ syntax ที่ใช้ `.` เข้าถึงค่าใน object

Dot notation คือการเขียน `object.key` — **เอา `.` ต่อท้ายชื่อ object แล้วตามด้วยชื่อ key** JavaScript จะคืนค่า value ที่ผูกกับ key นั้นให้ทันที

const user = { name: "สมชาย", age: 30, isAdmin: false };

console.log(user.name);    // "สมชาย"
console.log(user.age);     // 30
console.log(user.isAdmin); // false

เป็น syntax หลักที่ใช้บ่อยที่สุดในการอ่านค่าจาก object ใน JavaScript ทั้งในการเขียนโค้ดทั่วไป library และ framework ต่าง ๆ

ใช้ได้กับ key ที่เป็น identifier เท่านั้น — ไม่มีช่องว่าง ไม่ขึ้นต้นด้วยตัวเลข

dot notation มีข้อจำกัดหนึ่ง: key ต้องเป็น **identifier** — ชื่อที่ไม่มีช่องว่าง ไม่มีอักขระพิเศษ และไม่ขึ้นต้นด้วยตัวเลข ถ้า key มีช่องว่างหรืออักขระพิเศษ ต้องใช้ **bracket notation** (บทถัดไป) แทน

const contact = {
  name: "สมชาย",
  "phone number": "080-111-2222",
};

console.log(contact.name);             // "สมชาย" ✓
// contact."phone number"              // ❌ Syntax Error — มีช่องว่าง
console.log(contact["phone number"]);  // "080-111-2222" ✓ (bracket notation)

ค่าที่ได้เป็นค่าปกติ — ใช้ต่อได้แบบเดียวกับ literal

ค่าที่อ่านได้จาก dot notation คือ value ปกติของ JavaScript — เก็บในตัวแปร คำนวณทางคณิตศาสตร์ หรือใช้ใน template literal ได้ทันที ไม่ต้องประกาศตัวแปรกลางเสมอไป — ใช้ dot notation ตรงที่ต้องการค่าได้เลย

const product = { name: "โน้ตบุ๊ก", price: 25000 };

// แบบที่ 1: เก็บในตัวแปรก่อน
const name = product.name;
const price = product.price;
console.log(name);                // "โน้ตบุ๊ก"

// แบบที่ 2: ใช้ใน expression โดยตรง
console.log(price * 1.07);        // 26750

// แบบที่ 3: ใช้ใน template literal
console.log(`ราคา: ${product.price}`); // "ราคา: 25000"

• **เก็บในตัวแปร** — อ่านครั้งเดียวแล้วใช้ซ้ำหลายที่
• **ใช้ใน expression** — คำนวณ เปรียบเทียบ หรือส่งเป็น argument
• **ใช้ใน template literal** — สะดวกเมื่อต้องการสร้างข้อความที่รวมหลายค่า

เมื่อ key ไม่มีใน object — ได้ `undefined` ไม่ใช่ error

ถ้าใช้ dot notation กับ key ที่ **ไม่มีอยู่จริง** ใน object JavaScript จะคืน `undefined` โดยไม่ throw error สาเหตุที่ได้ `undefined` บ่อย: • สะกด key ผิด • ใช้ key ที่ถูกเพิ่มทีหลังแต่ยังไม่ทันถูกสร้าง • สับสนระหว่าง key ที่คล้ายกัน (เช่น `name` vs `Name`)

const car = { brand: "Toyota", model: "Camry" };

console.log(car.brand);  // "Toyota"       — มีใน object
console.log(car.color);  // undefined      — ไม่มี key นี้
console.log(car.model);  // "Camry"        — มีใน object (ตรงพิมพ์เล็กพิมพ์ใหญ่)
console.log(car.Model);  // undefined      — key เป็น case-sensitive

ระวัง — การใช้ค่าจาก `undefined` ต่ออาจทำให้ error

แม้ `undefined` จะไม่ error ในตอนเข้าถึง แต่ถ้านำ `undefined` ไปใช้ต่อ เช่น เรียก method หรือเข้าถึง property ซ้อน — จะเกิด error ทันที เพราะ undefined ไม่ใช่ object

const car = { brand: "Toyota" };

// ✅ ปลอดภัย — key มีอยู่จริง
console.log(car.brand.toUpperCase());  // "TOYOTA"

// ❌ TypeError — car.color เป็น undefined ใช้ .toUpperCase() ไม่ได้
// console.log(car.color.toUpperCase());

• ตั้งชื่อ key ให้ชัดเจน ตรวจสอบว่ามีอยู่จริงก่อนใช้ต่อ

Lab 1: อ่านค่า property ด้วย dot notation

Lab 2: ใช้ค่า property สร้างข้อความด้วย template literal

Lab 3: สังเกตผลลัพธ์เมื่อ key ไม่มีใน object

Lab 4: ใช้ค่า property ไปคำนวณใน expression

Lab 5: ใช้ค่า boolean จาก object ใน if-else

Lab 6: สร้างข้อความสถานะจาก boolean property