JavaScript Loops ความเร็ว ปะทะ ความง่าย เลือกใช้ยังไง

ในการเขียนโค้ด JavaScript การเลือกใช้ loop เป็นหนึ่งในเรื่องที่ Dev ทุกคนต้องเจอกัน แต่คำถามคือ "ใช้ loop ตัวไหนดี?" ระหว่าง for, forEach, หรือ for...of ที่มีข้อดี ข้อเสีย และประสิทธิภาพต่างกัน?

บทความนี้ผมจะช่วยให้เราเข้าใจว่าควรใช้ loop แบบไหนในสถานการณ์ที่เหมาะสมที่สุด พร้อมพูดถึงประสิทธิภาพ (performance) และความง่ายต่อการอ่าน (readability) ของโค้ด!

🔍 เปรียบเทียบ Loop แต่ละแบบ

1. for แบบดั้งเดิม

จุดเด่น

• เร็วที่สุด เพราะไม่มี overhead จาก callback function
• ยืดหยุ่นสุด เช่น สามารถใช้ break หรือ continue ได้

ข้อเสีย

• โค้ดอาจดูยุ่งยากและซับซ้อนสำหรับบางคน

ตัวอย่าง

const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]); // แสดงค่าทีละตัว
}

2. for...of

จุดเด่น

• อ่านง่ายและเหมาะกับงานที่ต้องวนลูปผ่าน iterable เช่น array, string, หรือ Map
• ใช้ break หรือ continue ได้

ข้อเสีย

• ช้ากว่า for แบบดั้งเดิมเล็กน้อย

ตัวอย่าง

const arr = [1, 2, 3];
for (const value of arr) {
    if (value === 2) break; // หยุดที่ค่า 2
    console.log(value);
}

3. forEach

จุดเด่น

• โค้ดสั้นและอ่านง่าย
• เหมาะสำหรับการวนลูป array ที่ไม่ต้องการหยุดลูป

ข้อเสีย

• ไม่สามารถใช้ break หรือ continue ได้
• ช้ากว่า for แบบดั้งเดิม

ตัวอย่าง

const arr = [1, 2, 3];
arr.forEach(value => console.log(value)); // แสดงค่าทีละตัว

4. while Loop

จุดเด่น

• เหมาะกับสถานการณ์ที่ไม่รู้จำนวนรอบแน่นอนล่วงหน้า
• ใช้ได้กับเงื่อนไขที่เปลี่ยนแปลงระหว่างการวนลูป

ข้อเสีย

• ถ้าลืมอัปเดตตัวแปรในเงื่อนไข อาจเกิด infinite loop
• อ่านยากในบางกรณี หากมีเงื่อนไขซับซ้อน

ตัวอย่าง

let i = 0;
while (i < 5) {
  console.log(i); // 0, 1, 2, 3, 4
  i++;
}

5. do...while Loop

จุดเด่น

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

ข้อเสีย

• อาจเกิดผลลัพธ์ไม่พึงประสงค์ หากเงื่อนไขเป็น false ตั้งแต่แรก

ตัวอย่าง

let i = 0;
do {
  console.log(i); // 0, 1, 2, 3, 4
  i++;
} while (i < 5);

6. for...in Loop

จุดเด่น

• ใช้สำหรับวนลูป property ของ object
• ใช้ในงานที่ต้องเข้าถึง key ของ object

ข้อเสีย

• ช้ากว่าลูปอื่นๆ และอาจเข้าถึง property จาก prototype chain หากไม่ได้ระวัง
• ไม่เหมาะกับการวนลูปใน Array เพราะเข้าถึง key (index) แทนค่า

ตัวอย่าง

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key, obj[key]); // a 1, b 2, c 3
}

🏎️ Performance Test

ลองมาดูตัวอย่างการวัดผลเรื่องความเร็ว

const arr = new Array(1000000).fill(1);

console.time('for');
for (let i = 0; i < arr.length; i++) {
    let x = arr[i] + 1;
}
console.timeEnd('for');

console.time('forOf');
for (const value of arr) {
    let x = value + 1;
}
console.timeEnd('forOf');

console.time('forEach');
arr.forEach(value => {
    let x = value + 1;
});
console.timeEnd('forEach');


console.time('while');
let i = 0;
while (i < arr.length) {
  let x = arr[i] + 1;
  i++;
}
console.timeEnd('while');

console.time('doWhile');
let j = 0;
do {
  let x = arr[j] + 1;
  j++;
} while (j < arr.length);
console.timeEnd('doWhile');

ผลลัพธ์

🤔 เลือกใช้ Loop ยังไง?

สรุปการเลือก loop แต่ละแบบ

🤔 ใช้ Loop ไหนดี?

• ต้องการความเร็วสูงสุด: ใช้ for แบบดั้งเดิม หรือ while
• เน้นโค้ดอ่านง่าย: ใช้ for...of
• ต้องการแสดงผลหรือวนลูปแบบง่าย: ใช้ forEach
• แปลงข้อมูล: ใช้ map
• รวมค่าหรือ aggregate ข้อมูล: ใช้ reduce

สรุป

JavaScript ไม่มี loop ไหนดีที่สุดในทุกกรณี! ความเร็ว (performance) และ ความง่าย (readability) เป็นสองสิ่งที่ต้องปรับใช้ตามบริบทของงาน หากงานต้องการความเร็วสูงสุด for แบบดั้งเดิมอาจเหมาะสมที่สุด แต่หากคุณต้องการโค้ดที่อ่านง่าย forEach หรือ for...of อาจเป็นตัวเลือกที่ดีกว่า