Loop Arrays & Objects

for...of กับ array — ได้ค่า element โดยตรง ไม่ต้องผ่าน index

`for...of` คือ syntax ที่เหมาะมากกับ array เมื่อคุณต้องการ **ค่าของแต่ละ element** ทีละตัว จุดเด่นคือไม่ต้องจัดการ `i`, ไม่ต้องเขียนเงื่อนไข `i < arr.length` และไม่ต้องหยิบค่าด้วย `arr[i]` เอง ทำให้โค้ดสั้นลงและอ่านง่ายขึ้น

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

// for loop แบบเดิม — ต้องจัดการ index เอง
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// for...of — ได้ค่าโดยตรง สั้นกว่า อ่านง่ายกว่า
for (const fruit of fruits) {
  console.log(fruit);
}
// "apple"
// "banana"
// "cherry"

for...of ตัด i, เงื่อนไข และ arr[i] ออก — เหลือแค่ชื่อที่อยากเรียกแต่ละ element

Syntax ของ for...of — แต่ละส่วนทำหน้าที่อะไร

syntax พื้นฐานของ `for...of` มีหน้าที่ชัดเจนมาก: ประกาศตัวแปรสำหรับค่าปัจจุบัน บอกว่ากำลังวนผ่านข้อมูล และใส่โค้ดที่ต้องรันในแต่ละรอบ

for (const item of array) {
  // ใช้ item ที่นี่
}

• `const item` รับค่า element ของรอบนั้น
• `of` แปลว่ากำลังวนผ่านข้อมูลทีละค่า
• `array` คือ array ที่ต้องการวน
• body คือโค้ดที่รันทุกรอบ โดย `item` จะเปลี่ยนไปตามค่าถัดไปใน array

const scores = [88, 75, 92, 61, 100];

for (const score of scores) {
  console.log(score);
}
// 88
// 75
// 92
// 61
// 100

• ตั้งชื่อตัวแปรให้สื่อกับข้อมูล เช่น `fruit`, `score`, `price`
• ส่วนใหญ่ใช้ `const` ได้เลย เพราะเราไม่ได้ reassign ตัวแปรของแต่ละรอบ
• ให้คิดว่าแต่ละรอบเราได้ “ค่าปัจจุบัน” มาใช้งานทันที

รูปแบบงานที่เหมาะกับ for...of

`for...of` เหมาะมากกับงานที่อ่านค่าทีละตัวจาก array แล้วทำอะไรบางอย่างต่อ เช่น แสดงข้อมูล, สะสมผลรวม, หรือคัดเฉพาะค่าที่ตรงเงื่อนไข

const scores = [88, 75, 92, 61, 100];
let total = 0;

for (const score of scores) {
  total += score;
}

console.log(total); // 416

const prices = [120, 450, 80, 300, 890, 200];
const affordable = [];

for (const price of prices) {
  if (price <= 300) {
    affordable.push(price);
  }
}

console.log(affordable); // [120, 80, 300, 200]

เมื่อต้องการ index ให้ใช้ for loop แบบเดิม

`for...of` ไม่ให้ index โดยตรง — ถ้าต้องการรู้ว่า element อยู่ตำแหน่งที่เท่าไหร่ หรือต้องการแก้ไขค่าใน array โดยตรง ให้ใช้ for loop แบบเดิมที่ใช้ `i`

const names = ["Alice", "Bob", "Charlie"];

// ❌ for...of — ไม่รู้ index
for (const name of names) {
  // อยากแสดง "1. Alice" แต่ไม่มี index ให้ใช้
}

// ✅ for loop — มี index
for (let i = 0; i < names.length; i++) {
  console.log((i + 1) + ". " + names[i]);
}
// "1. Alice"
// "2. Bob"
// "3. Charlie"

หมายเหตุสั้น ๆ — `for...of` ใช้กับ string ได้ด้วย

นอกจาก array แล้ว `for...of` ยังใช้กับ string ได้ โดยจะวนทีละ character แต่ใน phase นี้ให้โฟกัสหลักที่ array ก่อน เพื่อให้เลือกเครื่องมือให้ตรงกับ data structure ได้ชัดเจน

const word = "hello";

for (const char of word) {
  console.log(char);
}
// "h"
// "e"
// "l"
// "l"
// "o"

Lab 1: วนแสดงชื่อสินค้าทุกตัวด้วย for...of

Lab 2: รวมคะแนนทั้งหมดด้วย for...of

Lab 3: เก็บเฉพาะสินค้าราคาไม่เกิน 300 บาท