Loop Arrays & Objects

`Object.entries()` คืออะไร — คืน array ของคู่ `[key, value]`

`Object.entries(obj)` รับ object แล้วคืน **array ของคู่ข้อมูล** โดยแต่ละคู่เป็น array ย่อยรูปแบบ `[key, value]` ให้มองภาพง่าย ๆ ว่า object ถูกแปลงเป็นรายการของคู่ข้อมูล เพื่อให้เราวนทีละคู่ได้

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

const entries = Object.entries(user);

console.log(entries);
// [["name", "Alice"], ["age", 25], ["role", "admin"]]

console.log(entries[0]); // ["name", "Alice"]
console.log(entries[0][0]); // "name"
console.log(entries[0][1]); // "Alice"

อ่าน `entry[0]` และ `entry[1]` ให้คล่องก่อน

ก่อนจะวนหลายรอบ ลองจับคู่เดียวให้ชัดก่อนว่า array ชั้นนอกเก็บหลายคู่ ส่วน array ชั้นในเก็บ 2 ช่องเสมอ ช่องที่ 0 คือ key และช่องที่ 1 คือ value

const product = {
  name: "Notebook",
  price: 45,
};

const entries = Object.entries(product);
const firstEntry = entries[0];

console.log(firstEntry); // ["name", "Notebook"]
console.log(firstEntry[0]); // "name"
console.log(firstEntry[1]); // "Notebook"

ใช้ `Object.entries()` กับ `for` loop และ `for...of` โดยไม่ใช้ destructuring

เมื่อได้ array ของคู่ข้อมูลแล้ว เราจะใช้ลูปแบบเดิมเพื่อหยิบแต่ละคู่มาอ่านต่อ ในบทนี้ให้เข้าถึงด้วย `entry[0]` และ `entry[1]` โดยตรง เพื่อไม่สอนข้ามไปเรื่อง destructuring ที่อยู่ phase ถัดไป

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

const entries = Object.entries(settings);

for (let i = 0; i < entries.length; i++) {
  const entry = entries[i];
  console.log(entry[0] + ": " + entry[1]);
}
// "darkMode: true"
// "autoSave: true"
// "notifications: false"

for (const entry of entries) {
  console.log("key =", entry[0], "value =", entry[1]);
}

เมื่อไหร่ควรเลือก `Object.entries()` แทน `Object.keys()` หรือ `Object.values()`

เลือก `Object.entries()` เมื่อต้องการทั้งชื่อ key และค่าของมันพร้อมกันในรอบเดียว ถ้าต้องการแค่ key ให้ใช้ `Object.keys()` ถ้าต้องการแค่ value ให้ใช้ `Object.values()` แต่ถ้าต้องการทั้งคู่ `entries()` จะตรงที่สุด

const prices = {
  apple: 30,
  banana: 15,
  orange: 22,
};

const entries = Object.entries(prices);
let summary = "";

for (let i = 0; i < entries.length; i++) {
  const entry = entries[i];

  summary += entry[0] + ": " + entry[1];

  if (i < entries.length - 1) {
    summary += ", ";
  }
}

console.log(summary);
// "apple: 30, banana: 15, orange: 22"

ข้อผิดพลาดที่พบบ่อยกับ `Object.entries()`

• **คิดว่า `Object.entries()` คืน object** — จริง ๆ คืน array ชั้นนอก และแต่ละตัวเป็น array คู่ `[key, value]`
• **สับสนระหว่าง index ของ entries กับตำแหน่งใน pair** — `entries[i]` คือคู่ที่ i ส่วน `entry[0]` และ `entry[1]` คือ key/value ของคู่นั้น
• **กระโดดไปใช้ destructuring เร็วเกินไป** — ในบทนี้ยังไม่ต้องใช้ `const [key, value] = ...` เพราะแนวคิดนั้นอยู่ในบทถัดไป

const user = {
  name: "Mina",
  city: "Bangkok",
};

const entries = Object.entries(user);

console.log(entries[0]); // ["name", "Mina"]
console.log(entries[0][0]); // "name"
console.log(entries[0][1]); // "Mina"

// จำให้ชัด:
// entries[1] = คู่ที่สอง
// entry[0] = key
// entry[1] = value

ต่อยอดจากบทนี้ไป `for...of` กับ object

ถ้าคุณต้องการทั้งชื่อ key และค่าของมันพร้อมกัน `Object.entries()` คือสะพานที่เหมาะที่สุด เพราะมันเปลี่ยน object ให้กลายเป็น array ของคู่ข้อมูล บท `for...of กับ object` จะเอาแนวคิดนี้ไปใช้ตรง ๆ โดยวน `entry` ทีละคู่ด้วย `for...of` แล้วเลือกอ่าน `entry[0]` กับ `entry[1]` ให้ตรงกับโจทย์

Lab 1: แสดง pair จาก `Object.entries()`

Lab 2: แสดง `key: value` จาก `Object.entries()`

Lab 3: สร้าง string สรุปจาก `Object.entries()`