JavaScript 배열 메서드 성능 비교 - forEach vs for loop

문제 상황

어드민 페이지에서 10만 건의 주문 데이터를 가공하는 작업이 있었다. 기존 코드는 forEach를 사용했는데, 처리 시간이 3초 이상 걸려서 UX에 문제가 있었다.

const orders = fetchOrders(); // 100,000건
const result = [];

orders.forEach(order => {
  result.push({
    id: order.id,
    total: order.items.reduce((sum, item) => sum + item.price, 0)
  });
});

성능 측정

console.time으로 각 방식의 실행 시간을 측정했다.

// forEach
console.time('forEach');
orders.forEach(order => { /* ... */ });
console.timeEnd('forEach'); // 약 890ms

// for loop
console.time('for');
for (let i = 0; i < orders.length; i++) {
  const order = orders[i];
  // ...
}
console.timeEnd('for'); // 약 320ms

// for...of
console.time('for-of');
for (const order of orders) {
  // ...
}
console.timeEnd('for-of'); // 약 380ms

결과

전통적인 for 루프가 약 2.8배 빠르게 동작했다. forEach는 내부적으로 함수 호출 오버헤드가 있고, for...of는 이터레이터 프로토콜을 사용하기 때문에 순수 for문보다 느리다.

실무 적용

• 소량 데이터 (< 1,000건): forEach, map 등 함수형 메서드 사용. 가독성이 더 중요
• 대량 데이터 처리: 전통적인 for 루프 사용. 성능이 체감됨
• 비동기 작업: for...of와 await 조합이 유용

결국 성능이 중요한 구간에만 for를 쓰고, 나머지는 가독성을 우선했다. 무조건 최적화보다는 상황에 맞는 선택이 중요하다.