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

문제 상황

사용자 활동 로그를 처리하는 배치 작업에서 10만 건 이상의 데이터를 다룰 때 응답 시간이 5초를 초과하는 문제가 발생했다. 기존 코드는 forEach를 사용하고 있었다.

성능 측정

100,000개 요소 배열로 테스트를 진행했다.

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

// forEach: 약 8ms
console.time('forEach');
testData.forEach(item => {
  const result = item * 2;
});
console.timeEnd('forEach');

// for loop: 약 2ms
console.time('for');
for (let i = 0; i < testData.length; i++) {
  const result = testData[i] * 2;
}
console.timeEnd('for');

// for...of: 약 4ms
console.time('for...of');
for (const item of testData) {
  const result = item * 2;
}
console.timeEnd('for...of');

결과

• 전통적인 for 루프가 가장 빨랐다 (약 2ms)
• for...of는 중간 수준의 성능 (약 4ms)
• forEach는 상대적으로 느렸다 (약 8ms)

적용 기준

성능이 중요한 대용량 데이터 처리에는 전통적인 for 루프를 사용하기로 했다. 가독성이 중요하고 데이터 양이 적은 경우는 forEach나 for...of를 유지한다.

// 변경 후
function processBatchLogs(logs) {
  const results = [];
  for (let i = 0; i < logs.length; i++) {
    results.push(transformLog(logs[i]));
  }
  return results;
}

배치 처리 시간이 5초에서 2.3초로 개선되었다. 항상 최신 문법이 최선은 아니라는 점을 다시 확인했다.