forEach vs for Loop ใน JavaScript เลือกใช้ยังไงอะไรดี?

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(number => {
    console.log(number);
});

const numbers = [1, 2, 3];
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]); // 1, 2, 3
}

const largeArray = Array.from({ length: 1000000 }, (_, i) => i);

console.time('for loop');
for (let i = 0; i < largeArray.length; i++) {
    // do something
}
console.timeEnd('for loop');

console.time('forEach');
largeArray.forEach(item => {
    // do something
});
console.timeEnd('forEach');

// การทำงานกับ index
for (let i = 0; i < items.length; i++) {
    if (items[i].id === targetId) {
        items[i].selected = true;
        break;
    }
}

// โค้ดที่อ่านง่ายกว่า
items.forEach(item => {
    if (item.id === targetId) {
        item.selected = true;
        // แต่ไม่สามารถใช้ break ได้! 😅
    }
});

// ตัวอย่างการใช้งานที่ซับซ้อน
for (let i = 0; i < array.length; i++) {
    if (someCondition) {
        i += 2; // ข้ามไป 2 ตำแหน่ง
    }
    if (anotherCondition) {
        break; // ออกจากลูปทันที
    }
}

// ต้องใช้ return แทน continue
array.forEach(item => {
    if (skipCondition) return;
    // process item
});

// การ Debug ใน for Loop
for (let i = 0; i < items.length; i++) {
    try {
        const item = items[i];
        // สามารถดู state ทั้ง i และ item ได้ง่าย
        debugger;
        processItem(item);
    } catch (error) {
        console.error(`Error at index ${i}:`, error);
        // สามารถจัดการ error แต่ละ item แยกกันได้
    }
}

// การ Debug ใน forEach
items.forEach((item, index) => {
    try {
        // callback scope ทำให้เห็น context น้อยกว่า
        debugger;
        processItem(item);
    } catch (error) {
        console.error(`Error processing item:`, error);
        // ไม่สามารถ break loop ได้แม้เจอ error
    }
});

// สถานการณ์: คำนวณราคารวมของสินค้าในตะกรา

// แบบ for loop
let total = 0;
for (let i = 0; i < cart.items.length; i++) {
    const item = cart.items[i];
    if (!item.price) continue; // ข้ามรายการที่ไม่มีราคา
    if (item.outOfStock) break; // หยุดถ้าเจอสินค้าหมด
    total += item.price * item.quantity;
}

// แบบ forEach
let total = 0;
cart.items.forEach(item => {
    if (!item.price) return;
    total += item.price * item.quantity;
    // ไม่สามารถ break เมื่อเจอสินค้าหมดได้!
});

// การโหลดข้อมูลผู้ใช้หลายคน

// แบบ for loop - สามารถใช้ async/await
async function loadUsers(userIds) {
    const users = [];
    for (let i = 0; i < userIds.length; i++) {
        try {
            const user = await fetchUser(userIds[i]);
            users.push(user);
        } catch (error) {
            console.error(`Failed to load user ${userIds[i]}`);
            break; // หยุดถ้าเกิดข้อผิดพลาด
        }
    }
    return users;
}

// แบบ forEach - ต้องใช้ Promise.all
function loadUsers(userIds) {
    const promises = [];
    userIds.forEach(id => {
        promises.push(fetchUser(id));
    });
    return Promise.all(promises);
}

// แบบไม่ดี
for (let i = 0; i < array.length; i++) {}

// แบบดี - เก็บ length ไว้ใช้
const len = array.length;
for (let i = 0; i < len; i++) {}

// แบบดีที่สุด - ใช้ cached length และวนลูปถอยหลัง
for (let i = array.length; i--;) {}

// แบบไม่ดี
items.forEach(item => {
    heavyOperation(item);
    anotherHeavyOperation(item);
});

// แบบดี - แบ่งการทำงานเป็นส่วนๆ
const processed = items.map(heavyOperation);
processed.forEach(anotherHeavyOperation);