Object

เพิ่ม property ใหม่ — assign ค่าให้ key ที่ยังไม่มีใน object

วิธีเพิ่ม property ใหม่: เขียน `object.key = value` หรือ `object["key"] = value` — ถ้า key นั้นยังไม่มีใน object JavaScript จะ **สร้าง property ใหม่** ให้โดยอัตโนมัติ ใช้ syntax เดียวกับ dot notation และ bracket notation ที่เรียนไปแล้ว — แค่เขียนไว้ทางซ้ายของ `=`

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

// เพิ่ม property ด้วย dot notation
product.brand = "Dell";
console.log(product.brand);  // "Dell"

// property ใหม่ปรากฏใน object ทันที
console.log(product);
// { name: "โน้ตบุ๊ก", price: 25000, brand: "Dell" }

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

// เพิ่มด้วย bracket notation
product["inStock"] = true;
console.log(product.inStock);  // true

// bracket + ตัวแปรเพิ่ม dynamic property
const field = "discount";
product[field] = 0.1;
console.log(product.discount);  // 0.1

• **Dot:** `obj.newKey = value` — เพิ่มเมื่อ key เป็น identifier
• **Bracket:** `obj["new key"] = value` — เพิ่มเมื่อ key มีอักขระพิเศษ
• **Bracket + ตัวแปร:** `obj[variable] = value` — เพิ่มเมื่อชื่อ key มาจากตัวแปร
• ไม่ต้องประกาศ property ล่วงหน้า — object ไม่มี fixed schema

ใช้ `in` operator เช็กก่อนเพิ่ม property

`in` operator ใช้ตรวจสอบว่า key หนึ่งมีอยู่ใน object หรือไม่ — เขียน `"key" in object` แล้วได้ `true` หรือ `false` มีประโยชน์มากเวลาต้องการเช็กก่อนเพิ่ม property — ป้องกันการเขียนทับค่าเดิมโดยไม่ตั้งใจ

const item = { name: "ดินสอ", price: 10 };

// เช็กก่อนเพิ่ม — กันเขียนทับ
if (!("color" in item)) {
  item.color = "แดง";
  console.log("เพิ่ม color แล้ว");
}

console.log(item.color);  // "แดง"

// ถ้าเช็กแล้วมีอยู่แล้ว → ไม่เพิ่มซ้ำ
if (!("name" in item)) {
  item.name = "ปากกา";  // ไม่ทำงานเพราะ name มีอยู่แล้ว
}
console.log(item.name);  // "ดินสอ" (ค่าเดิม ไม่เปลี่ยน)

• **`"key" in obj`** — คืน `true` ถ้า key มีใน object (รวม inherited properties)
• **`!(...in...)` ** — ใช้ `!` กลับค่าเพื่อเช็กว่า key "ยังไม่มี"
• **`if + in`** — ปลอดภัยที่สุดก่อนเพิ่ม property จากข้อมูลภายนอก
• เช็กด้วย `in` ก่อนเพิ่ม ≠ เช็กด้วย `if (obj.key === undefined)` — `in` ทำงานถูกต้องแม้ค่าจะเป็น `undefined`

เพิ่มหลาย property พร้อมกันใน object เดียว

object ใน JavaScript เป็น dynamic — เพิ่มกี่ property ก็ได้ใน object เดียว จะใช้ dot, bracket, หรือผสมกันก็เขียนต่อเนื่องได้เลย

const product = { name: "เก้าอี้", price: 2500 };

// เพิ่มทีละ property ด้วย dot
product.brand = "IKEA";
product.inStock = true;

// เพิ่มด้วย bracket เมื่อ key มีอักขระพิเศษ
product["discount-percent"] = 15;

console.log(product);
// {
//   name: "เก้าอี้",
//   price: 2500,
//   brand: "IKEA",
//   inStock: true,
//   "discount-percent": 15
// }

ไม่มีลำดับตายตัว — JavaScript เพิ่ม property ตามบรรทัดที่เขียน และ property ใหม่จะปรากฏใน object ทันที เข้าถึงด้วย dot/bracket ได้ทันทีในบรรทัดถัดไป

ข้อควรรู้ — `const` object เพิ่ม property ได้ และระวังการเขียนทับ

**`const` object เพิ่ม property ได้** — `const` ห้ามเปลี่ยน reference (เปลี่ยนว่า object คือ object ใหม่) แต่แก้ไขเนื้อใน object ได้เต็มที่ **ระวังการเขียนทับโดยไม่ตั้งใจ** — `obj.key = value` เมื่อ key มีอยู่แล้วจะ**เขียนทับ**ค่าเดิม ไม่ใช่เพิ่มใหม่ เพราะฉะนั้นควรใช้ `in` operator เช็กก่อนเมื่อไม่แน่ใจว่า key มีอยู่แล้วหรือยัง

const car = { brand: "Toyota" };

car.model = "Camry";           // ✅ เพิ่ม property ได้
car.year = 2025;               // ✅ เพิ่ม property ได้
// car = { brand: "Honda" };   // ❌ TypeError — เปลี่ยนค่า const ไม่ได้

console.log(car);
// { brand: "Toyota", model: "Camry", year: 2025 }

const item = { name: "กระเป๋า", price: 890 };

// ตั้งใจเพิ่ม price จากข้อมูลภายนอก — แต่ price มีอยู่แล้ว!
item.price = 1200;

console.log(item.price);  // 1200 — ค่าเดิมถูกเขียนทับ ไม่ใช่เพิ่มใหม่

// วิธีที่ปลอดภัย: เช็กด้วย in ก่อนเพิ่ม
if (!("color" in item)) {
  item.color = "น้ำตาล";  // color ยังไม่มี → เพิ่มใหม่
}
console.log(item.color);  // "น้ำตาล"

• **`const` object:** เพิ่ม/แก้ไข property ได้ตามปกติ — แค่เปลี่ยน reference ไม่ได้
• **`obj.key = value` เมื่อ key มีอยู่แล้ว → เขียนทับค่าเดิม** — นี่คือการอัปเดต ไม่ใช่เพิ่มใหม่
• **ใช้ `in` เช็กก่อนเพิ่ม** — เสมอเมื่อไม่ต้องการเขียนทับค่าเดิม
• **ไม่มีข้อจำกัดเรื่องจำนวน property** — เพิ่มได้เรื่อย ๆ ตามต้องการ

Lab 1: เพิ่ม property ด้วย dot notation

Lab 2: เพิ่ม property ด้วย bracket notation แบบ dynamic

Lab 3: ใช้ `in` operator ตรวจสอบก่อนเพิ่ม property

Lab 4: เพิ่ม property ด้วย bracket กับ key ที่มีอักขระพิเศษ

Lab 5: เพิ่มหลาย property ใน object เดียวด้วย dot และ bracket

Lab 6: ใช้ `in` + `if...else` เลือกว่าจะเพิ่ม property ไหน

Lab 7: เพิ่ม property โดยนำค่าจากตัวแปรภายนอก

Lab 8: เพิ่ม property ด้วย computed key (expression ใน bracket)