Loop Arrays & Objects

for...in กับ array — ใช้ได้ แต่ได้ key เป็น string ไม่ใช่ค่า

`for...in` กับ array ทำงานได้ แต่สิ่งที่ได้ในแต่ละรอบคือ **index ในรูป string** เช่น `"0"`, `"1"`, `"2"` ไม่ใช่ค่า element เอง นี่คือเหตุผลหลักที่ทำให้มันไม่ใช่ตัวเลือกที่ดีสำหรับ array

const fruits = ["apple", "banana", "cherry"];

for (const key in fruits) {
  console.log(key);         // "0", "1", "2"
  console.log(typeof key);  // "string"
  console.log(fruits[key]); // "apple", "banana", "cherry"
}

`for...in` กับ array เดินผ่านชื่อ index ก่อน ไม่ได้ให้ค่า element โดยตรง

ปัญหาคือโค้ดชวนให้สับสนเรื่องชนิดข้อมูล

เมื่อ key เป็น string งานที่เกี่ยวกับตำแหน่งหรือ arithmetic จะชวนให้คิดผิดได้ง่าย เช่น `key + 1` ไม่ได้กลายเป็นตัวเลขถัดไป แต่เป็นการต่อ string

const items = ["A", "B", "C"];

for (const key in items) {
  console.log(key + 1);
}
// "01"
// "11"
// "21"

• ต้องดึงค่าจริงด้วย `arr[key]` อีกหนึ่งขั้น
• ต้องระวังว่า key เป็น string ไม่ใช่ number
• ทำให้โค้ดอ่านยากกว่า `for...of` โดยไม่จำเป็น

ถ้าต้องการค่า element ให้ย้ายไป `for...of` ทันที

สำหรับ array ถ้าเป้าหมายคืออ่านค่าทีละตัว `for...of` ตรงกว่า เพราะแต่ละรอบได้ element เลย ไม่ต้องผ่าน `arr[key]`

const fruits = ["apple", "banana", "cherry"];

// ❌ ได้ key ก่อน
for (const key in fruits) {
  console.log(fruits[key]);
}

// ✅ ได้ค่าโดยตรง
for (const fruit of fruits) {
  console.log(fruit);
}

ถ้าต้องการ index จริง ๆ ให้ใช้ `for` loop

เมื่อโจทย์ต้องใช้ตำแหน่ง เช่น แสดงลำดับข้อ, แก้ไขค่าใน array, หรืออ้างอิง `arr[i]` อย่างชัดเจน ให้ใช้ `for` loop ที่มี `i` เป็น number ตั้งแต่ต้น

ให้จำบทนี้เป็นบท contrast: `for...in` กับ array ไม่ได้ผิด syntax แต่เป็นเครื่องมือที่ไม่เหมาะกับโจทย์ส่วนใหญ่ของ array

Lab 1: สังเกตว่า `for...in` กับ array ให้ key เป็น string

Lab 2: เปลี่ยนโจทย์เดิมไปใช้ `for...of` ให้ตรงกับ array