[JS] for, forEach, for...of 성능비교

JavaScript 에는 for, forEach, for...of 등 배열에 대한 다양한 반복문 문법이 있습니다. 예전에 어디선가 for 문이 가장 빠르다는 글을 보고나서 for 문을 주로 사용해왔는데, 문득 직접 성능비교를 해보고싶다는 생각이 들어서 테스트를 진행해보았습니다.

for...in 은 Object 의 경우에 주로 사용되어서 이번 테스트에서는 제외하였습니다.

테스트 환경

• PC: MacBook Pro (16형, 2021년 모델), Apple M1 Pro
• 브라우저: Google Chrome 버전 109.0.5414.119(공식 빌드) (arm64)
• 시간측정: JavaScript 에서 기본으로 제공해주는 console.time 을 사용하였습니다.

성능 테스트

테스트를 진행한 코드와 결과입니다.

• 100회 반복
  for 문이 빠르고, forEach 문과 for...of 문은 비슷합니다.

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

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

console.time('foreach');
arr.forEach((i) => {});
console.timeEnd('foreach');

console.time('forof');
for(let i of arr) {}
console.timeEnd('forof');

• 10,000회 반복
  for 문과 forEach 문은 비슷하고, for...of 문이 가장 느립니다.

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

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

console.time('foreach');
arr.forEach((i) => {});
console.timeEnd('foreach');

console.time('forof');
for(let i of arr) {}
console.timeEnd('forof');

• 1,000,000회 반복
  for 문이 빠르고, forEach 문과 for...of 문은 비슷합니다.

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

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

console.time('foreach');
arr.forEach((i) => {});
console.timeEnd('foreach');

console.time('forof');
for(let i of arr) {}
console.timeEnd('forof');

여기까지의 테스트 결과를 보고 for 문을 사용하는 것이 forEach 문이나 for...of 문보다 대체적으로 빠른 편이라고 생각했는데, 반복문 내부 로직이 비어있는 것이 찝찝했습니다. 그래서 각각의 반복문 내부에 같은 기능을 하는 로직을 추가하여 다시 테스트를 진행해보았습니다.

로직이 추가된 성능 테스트

추가한 로직은 간단하게 배열 요소의 총 합을 계산하는 것으로 작성하였습니다.

• 100회 반복
  for 문이 현저히 느려졌고, 그 다음이 forEach 문, for...of 문이 가장 빠릅니다.

const arr = new Array(100).fill(1);
let sum;

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

sum = 0;
console.time('foreach');
arr.forEach((i) => {sum += i});
console.log(sum);
console.timeEnd('foreach');

sum = 0;
console.time('forof');
for(let i of arr) { sum += i }
console.log(sum);
console.timeEnd('forof');

• 10,000회 반복
  for 문과 forEach 문이 비슷하고, for...of 문이 가장 빠릅니다.

const arr = new Array(10000).fill(1);
let sum;

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

sum = 0;
console.time('foreach');
arr.forEach((i) => {sum += i});
console.log(sum);
console.timeEnd('foreach');

sum = 0;
console.time('forof');
for(let i of arr) { sum += i }
console.log(sum);
console.timeEnd('forof');

• 1,000,000회 반복
  for 문이 가장 빠르고, forEach 문과 for...of 문은 비슷합니다.

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

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

sum = 0;
console.time('foreach');
arr.forEach((i) => {sum += i});
console.log(sum);
console.timeEnd('foreach');

sum = 0;
console.time('forof');
for(let i of arr) { sum += i }
console.log(sum);
console.timeEnd('forof');

반복 횟수가 많아질수록 for 문의 성능이 forEach 문과 for...of 문보다 빨라지는 것 같습니다.

마치며

각 테스트 횟수가 10회로 많지 않고, 실제 코드에서는 더 복잡한 로직이 추가되기 때문에 현업에서의 성능은 테스트 결과값과 다소 차이가 있을 수 있습니다. 상황에 맞는 반복문을 사용해서 조금이라도 성능을 높여보는 것도 좋을 것 같습니다.