Loops with Index (❌ไม่ค่อยนิยมใช้)

ลูปแบบการวนซ้ำที่ใช้ดัชนี (index) ในการควบคุมการทำงาน เหมาะสำหรับกรณีที่ต้องการทราบลำดับที่ของข้อมูล แต่ใน JavaScript มักมีวิธีที่อ่านง่ายและกระชับกว่าด้วย Higher-Order Functions

for

// วนซ้ำตามจำนวนที่กำหนด
for (let i = 0; i < 5; i++) {
  console.log(`รอบที่ ${i}`);
}

while

ตรวจสอบเงื่อนไขก่อนการทำงานแต่ละรอบ ถ้าเงื่อนไขเป็นจริงจะทำงานในลูป ต้องระวังการสร้างเงื่อนไขที่ทำให้เกิดการวนลูปไม่รู้จบ (infinite loop)

// วนซ้ำตราบใดที่เงื่อนไขเป็นจริง
let count = 0;
while (count < 3) {
  console.log(`นับที่ ${count}`);
  count++;
}

do...while

ทำงานอย่างน้อย 1 ครั้งก่อนแล้วค่อยตรวจสอบเงื่อนไข เหมาะสำหรับกรณีที่ต้องการให้โค้ดในลูปทำงานอย่างน้อยหนึ่งครั้ง

// ทำงานอย่างน้อย 1 ครั้ง แล้วตรวจสอบเงื่อนไข
let num = 0;
do {
  console.log(`ตัวเลข: ${num}`);
  num++;
} while (num < 3);

Loops with Data (✅ใช้บ่อย)

เป็นรูปแบบการวนลูปที่ใช้งานบ่อยใน JavaScript เน้นความอ่านง่ายและกระชับ โดยเฉพาะเมื่อทำงานกับข้อมูลประเภท Array และ Object

for...in

ใช้สำหรับวนลูปผ่าน property ทั้งหมดของ object ที่สามารถ enumerable ได้ ควรใช้กับ object เท่านั้น ไม่แนะนำให้ใช้กับ Array

// วนลูปผ่าน property ของ object
const person = { name: "สมชาย", age: 30 };
for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

for...of

ใช้สำหรับวนลูปผ่านสมาชิกของ iterable objects เช่น Array, String, Map, Set, ฯลฯ อ่านง่ายและปลอดภัยกว่า for...in เมื่อทำงานกับ Array

// วนลูปผ่านสมาชิกของ iterable (เช่น array)
const fruits = ["แอปเปิ้ล", "กล้วย", "ส้ม"];
for (const fruit of fruits) {
  console.log(fruit);
}

forEach

เป็น Higher-Order Function ของ Array ใช้สำหรับเรียกฟังก์ชันที่กำหนดให้กับทุกสมาชิกใน Array ไม่สามารถใช้ break หรือ continue ได้

// ทำงานกับทุกสมาชิกใน array
const numbers = [1, 2, 3];
numbers.forEach(num => {
  console.log(num * 2);
});

map

สร้าง Array ใหม่จากการแปลงค่าทุกตัวใน Array เดิมด้วยฟังก์ชันที่กำหนด จำนวนสมาชิกเท่าเดิม แต่ค่าอาจเปลี่ยนไป

// สร้าง array ใหม่จากการแปลงค่าสมาชิกเดิม
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
// doubled: [2, 4, 6]

filter

สร้าง Array ใหม่โดยกรองเฉพาะสมาชิกที่ผ่านเงื่อนไขที่กำหนด จำนวนสมาชิกอาจลดลงหรือเท่าเดิม (ถ้าทุกตัวผ่านเงื่อนไข)

// สร้าง array ใหม่ที่ผ่านเงื่อนไข
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
// evenNumbers: [2, 4]

find

ค้นหาสมาชิกตัวแรกใน Array ที่ตรงกับเงื่อนไขที่กำหนด ถ้าไม่พบจะคืนค่า undefined

// ค้นหาสมาชิกตัวแรกที่ตรงเงื่อนไข
const users = [
  { id: 1, name: "สมชาย" },
  { id: 2, name: "สมหญิง" },
];
const user = users.find(user => user.id === 2);
// user: { id: 2, name: "สมหญิง" }

some/every

• some: ตรวจสอบว่ามีสมาชิกอย่างน้อย 1 ตัวที่ตรงเงื่อนไขหรือไม่ (คืนค่า true/false)
• every: ตรวจสอบว่าทุกสมาชิกตรงเงื่อนไขหรือไม่ (คืนค่า true/false)

// some: ตรวจสอบว่ามีสมาชิกอย่างน้อย 1 ตัวที่ตรงเงื่อนไข
const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some(num => num % 2 === 0); // true

// every: ตรวจสอบว่าทุกสมาชิกตรงเงื่อนไขหรือไม่
const allPositive = numbers.every(num => num > 0); // true