Loop Arrays & Objects

object ธรรมดาใช้ `for...of` ตรง ๆ ไม่ได้

`for...of` ต้องใช้กับข้อมูลที่วนทีละค่าได้โดยตรง แต่ object ธรรมดาอย่าง `{ name: "Alice" }` ไม่ใช่ iterable ดังนั้นจึงใช้ `for...of` ตรง ๆ ไม่ได้ ถ้าอยากใช้ `for...of` กับ object เราต้องแปลง object ให้กลายเป็น array ก่อน

const user = {
  name: "Alice",
  age: 25,
};

// ❌ ใช้ตรง ๆ ไม่ได้
// for (const item of user) {}

// ✅ ต้องแปลงเป็น array ก่อน
console.log(Object.keys(user));   // ["name", "age"]
console.log(Object.values(user)); // ["Alice", 25]
console.log(Object.entries(user)); // [["name", "Alice"], ["age", 25]]

ถ้าอยากใช้ `for...of` กับ object ต้องเลือกก่อนว่าคุณต้องการ key, value หรือคู่ `[key, value]`

ถ้าต้องการชื่อ key ให้ใช้ `Object.keys()` + `for...of`

เลือกวิธีนี้เมื่อโจทย์สนใจชื่อ property เช่น อยากแสดงรายการ field, ตรวจว่ามี key อะไรบ้าง, หรือใช้ key ไปดึงค่าจาก object ภายหลัง

const settings = {
  darkMode: true,
  autoSave: true,
  notifications: false,
};

for (const key of Object.keys(settings)) {
  console.log(key + ": " + settings[key]);
}
// "darkMode: true"
// "autoSave: true"
// "notifications: false"

ถ้าต้องการเฉพาะ value ให้ใช้ `Object.values()` + `for...of`

เลือกวิธีนี้เมื่อไม่จำเป็นต้องรู้ชื่อ key เช่น รวมยอดขาย, นับจำนวนค่า `true`, หรือหาค่าที่ตรงเงื่อนไขจาก object

const sales = {
  monday: 1200,
  tuesday: 950,
  wednesday: 1430,
};

let total = 0;

for (const value of Object.values(sales)) {
  total += value;
}

console.log(total); // 3580

ถ้าต้องการทั้ง key และ value ให้ใช้ `Object.entries()` + `for...of`

เลือกวิธีนี้เมื่อโจทย์ต้องใช้ทั้งชื่อ property และค่าของมันพร้อมกัน เช่น สร้างข้อความ `key: value` หรือคัดคู่ข้อมูลตามเงื่อนไข

const profile = {
  name: "Alice",
  role: "Admin",
  city: "Bangkok",
};

for (const entry of Object.entries(profile)) {
  console.log(entry[0] + ": " + entry[1]);
}
// "name: Alice"
// "role: Admin"
// "city: Bangkok"

เลือกสะพานให้ตรงกับโจทย์

หัวใจของบทนี้ไม่ใช่การจำ syntax เพิ่ม แต่คือการเลือกให้ถูกว่า object ของคุณควรถูกแปลงเป็น array แบบไหน ก่อนส่งต่อให้ `for...of` วนทีละค่า

Lab 1: ใช้ `Object.values()` + `for...of` รวมยอดขาย

Lab 2: ใช้ `Object.entries()` + `for...of` สร้างข้อความ `key: value`