Object

Bracket notation คือ `object["key"]` — อีกวิธีเข้าถึงค่าใน object ด้วย `[ ]`

bracket notation คือการเขียน `object["key"]` — ใส่ชื่อ key ในเครื่องหมาย **`[ ]`** โดยเขียน key เป็น **string** ภายใน `" "` หรือ `' '` JavaScript จะมองหา key ที่ตรงกับ string นั้นแล้วคืนค่าให้ เช่นเดียวกับ dot notation

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

// dot notation
console.log(user.name);      // "สมชาย"

// bracket notation — เขียน key ใน " "
console.log(user["name"]);   // "สมชาย"

bracket notation เป็นวิธีที่ยืดหยุ่นกว่า dot notation เพราะรองรับ key ได้ทุกรูปแบบ — รวมถึง key ที่มีอักขระพิเศษ และการใช้ตัวแปรเป็น key แบบ dynamic

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

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

const config = {
  "dark-mode": true,
  "font size": "16px",
  "2ndOption": "advanced",
  "full-name": "สมชาย ใจดี",
};

// bracket notation — รองรับทุก key
console.log(config["dark-mode"]);   // true
console.log(config["font size"]);   // "16px"
console.log(config["2ndOption"]);   // "advanced"
console.log(config["full-name"]);   // "สมชาย ใจดี"

// dot notation — ❌ error กับ key ที่มีอักขระพิเศษ
// config.dark-mode   → SyntaxError (เข้าใจว่าเป็นลบ)
// config.2ndOption   → SyntaxError (ขึ้นต้นด้วยตัวเลข)

ใช้ตัวแปรเป็น key — dynamic access

จุดแข็งที่สุดของ bracket notation คือการใช้ **ตัวแปร** แทน string ตรง ๆ เป็น key — dot notation ทำแบบนี้ไม่ได้ เขียน `object[variableName]` — JavaScript จะอ่านค่าในตัวแปรแล้วใช้ string นั้นเป็น key

const profile = {
  name: "สมหญิง",
  email: "somying@email.com",
  phone: "0812345678",
};

// ใช้ตัวแปรเป็น key
const field = "email";
console.log(profile[field]);   // "somying@email.com"

// เปลี่ยนค่าตัวแปร → อ่านคนละ property ได้ทันที
const key = "phone";
console.log(profile[key]);     // "0812345678"

// dot notation ใช้ตัวแปรเป็น key ไม่ได้
// profile.field → undefined (มองหา key ที่ชื่อ "field" จริง ๆ)

dynamic access มีประโยชน์มากเวลารับชื่อ key จากผู้ใช้, จาก API, หรือการวนลูปอ่านค่าหลาย property โดยไม่ต้องเขียน `obj.name`, `obj.age` แยกทีละบรรทัด

const student = { name: "ก้อง", score: 85, grade: "A" };

// อ่านหลาย property โดยเปลี่ยนตัวแปร key ทีละตัว
const key1 = "name";
console.log(key1 + ":", student[key1]); // name: ก้อง
const key2 = "score";
console.log(key2 + ":", student[key2]); // score: 85
const key3 = "grade";
console.log(key3 + ":", student[key3]); // grade: A

ใช้ expression ใน bracket ได้ — ไม่ใช่แค่ string หรือตัวแปรตรง ๆ

ภายใน `[ ]` ของ bracket notation ใส่ expression อะไรก็ได้ที่ประเมินแล้วเป็น string — ต่อ string, เรียกฟังก์ชัน, หรือใช้ ternary ได้ทั้งหมด

const data = {
  score1: 85,
  score2: 90,
  score3: 78,
};

// ต่อ string เป็น key ใน bracket
const round = 2;
console.log(data["score" + round]);   // 90 → "score" + 2 = "score2"

// expression ใน bracket — ใช้ || (logical OR) เป็น fallback
const key = "color";
const fallback = "name";
const item = { name: "ดินสอ" };
console.log(item[key || fallback]);   // "ดินสอ" — color ไม่มี เลยใช้ชื่อ key "name"

• **ต่อ string:** `obj["prefix" + suffix]` — สร้าง key จากหลายส่วนเข้าด้วยกัน
• **expression:** `obj[keyA || keyB]` — เลือก key ตามเงื่อนไข
• **ฟังก์ชัน:** `obj[getKeyName()]` — ให้ฟังก์ชันคืนชื่อ key มา
• ข้อควรระวัง: ถ้า expression ใน `[ ]` ไม่ได้เป็น string, number, หรือ symbol — JavaScript จะเรียก `.toString()` โดยอัตโนมัติ ได้ผลลัพธ์เป็น `"[object Object]"` ซึ่งมักไม่ใช่สิ่งที่ต้องการ

ข้อแตกต่างสำคัญ — dot vs bracket notation สรุป

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

Lab 1: อ่านค่า property ด้วย bracket notation พื้นฐาน

Lab 2: ใช้ตัวแปรเป็น key ด้วย bracket notation

Lab 3: ใช้ expression ใน bracket notation

Lab 4: อ่านค่า key ที่มีสัญลักษณ์พิเศษหลายรูปแบบ

Lab 5: เปลี่ยนตัวแปรเพื่ออ่านค่า property คนละตัว

Lab 6: ใช้ expression ใน bracket กับหลาย value