Loop Arrays & Objects

`Object.values()` คืออะไร — คืน array ของ value ทั้งหมดใน object

`Object.values(obj)` รับ object แล้วคืน **array ของ value** ทั้งหมดตามลำดับ key ที่มีอยู่ ถ้าคุณไม่จำเป็นต้องรู้ชื่อ key และสนใจแค่ค่าที่เก็บอยู่ใน object วิธีนี้ตรงกว่า `Object.keys()`

const user = {
  name: "Alice",
  age: 25,
  active: true,
  city: "Bangkok",
};

const values = Object.values(user);

console.log(values); // ["Alice", 25, true, "Bangkok"]
console.log(values.length); // 4
console.log(values[1]); // 25

ใช้ `Object.values()` กับ `for` loop และ `for...of`

เพราะผลลัพธ์เป็น array จึงใช้ลูปแบบที่คุณคุ้นเคยได้ทั้ง 2 แบบ ถ้าอยากได้ index ให้ใช้ `for` loop ถ้าอยากอ่านค่าแต่ละตัวตรง ๆ ให้ใช้ `for...of`

const values = Object.values({
  name: "Alice",
  age: 25,
  active: true,
});

for (let i = 0; i < values.length; i++) {
  console.log(i + ": " + values[i]);
}
// "0: Alice"
// "1: 25"
// "2: true"

for (const value of values) {
  console.log(value);
}
// "Alice"
// 25
// true

เมื่อไหร่ `Object.values()` ง่ายกว่า `Object.keys()`

ถ้างานของคุณสนใจเฉพาะค่า เช่น รวมคะแนน นับสถานะ หรือเช็กว่ามีค่า `true` กี่ตัว การเริ่มจาก `Object.values()` จะลดขั้นตอนลง เพราะไม่ต้องดึง key มาก่อนแล้วค่อยกลับไปอ่านค่าอีกที

const scores = {
  math: 88,
  science: 75,
  english: 92,
  history: 61,
};

const values = Object.values(scores);
let total = 0;

for (let i = 0; i < values.length; i++) {
  total += values[i];
}

console.log(total); // 316

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

let enabledCount = 0;

for (const value of Object.values(featureFlags)) {
  if (value === true) {
    enabledCount++;
  }
}

console.log(enabledCount); // 3

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

• **คิดว่าจะได้ชื่อ key กลับมาด้วย** — `Object.values()` คืนเฉพาะค่า ถ้าต้องการชื่อ key ด้วยให้ใช้ `Object.keys()` หรือ `Object.entries()`
• **พยายามใช้ value ไปอ่าน object กลับแบบ `obj[value]`** — value ไม่ได้แปลว่าเป็นชื่อ property
• **โฟกัสเรื่องลำดับมากเกินไป** — ในบทนี้ให้มองว่า `Object.values()` เหมาะกับงานที่สนใจค่าทั้งหมด ไม่ใช่เรื่องจัดลำดับข้อมูล

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

const values = Object.values(profile);

console.log(values); // ["Mina", "Bangkok"]

// ❌ values[0] คือ "Mina" ไม่ใช่ key ของ object
// console.log(profile[values[0]]);

// ✅ ถ้าต้องการ key ให้ใช้ Object.keys(profile)
console.log(Object.keys(profile)); // ["name", "city"]

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

เมื่อโจทย์ถามหา “ค่าทั้งหมด” จาก object วิธีที่ตรงที่สุดคือ `Object.values(obj)` แล้วใช้ `for...of` วนค่าที่ได้กลับมา ในบท `for...of กับ object` คุณจะได้ฝึกเลือกแบบนี้ให้เป็นนิสัยว่า ถ้าสนใจแค่ value ให้สร้าง array ของ value ก่อน แล้วค่อยวนทีละค่าด้วย `for...of`

Lab 1: แสดง value ทั้งหมดด้วย `Object.values()`

Lab 2: รวมค่าตัวเลขทั้งหมดด้วย `Object.values()`

Lab 3: นับจำนวนค่า `true` ด้วย `Object.values()`