JavaScript 반복문 시간 측정

💡 계기

매일 알고리즘 문제 푸는 걸 좋아한다. 원래는 C++, Java 언어를 쓰다가 프론트엔드 개발자를 꿈꾸고나서 JavaScript로 문제를 풀고 있는데 (무슨 좋은 점이 있을지는 모르겠다. 코딩 테스트만 통과하는 것을 목표로한다면 JavaScript는 좋은 언어가 아닐 것이다...) 통과하고나서도 시간이 남들보다 많이 걸려서 확인해보면, for문 대신 for...of... 문으로 작성한 것 뿐이고. 그렇게 시간 차이가 많이 나는 건가? 싶어서 글을 작성해본다.

결론부터 얘기하면, 정말 많이 차이가 났다!

✏️ 측정 구문

1. for문
2. for...in...
3. for...of...
4. forEach
5. while
6. do...while

✏️ 측정 방법

console.time()과 console.timeEnd() 함수를 사용하였다. 콘솔창에서만 측정 시간을 확인할 수 있다는 것이 단점이라면 단점이지만, 화면에 띄우는 것이 목적이 아니라면 편하게 사용할 수 있을 것 같다.

✏️ 측정 결과 (배열)

아주 근소한 차이지만 while문과 do...while문이 가장 빨랐고, 그 다음으로 for문, forEach, for...of..., for...in...이 차지했다.

✏️ 측정 결과 (객체)

이번엔 for문이, 그 다음으로 while문과 do...while문, 그 다음부턴 배열 측정 시와 똑같이 forEach, for...of..., for...in...이 줄을 이었다.

결론

이러나 저러나 기본적 반복문인 for문과 while문이 제일 빠른 것 같다. (경우에 따라 다르게 나오는 경우도 있을까? 아직은 잘 모르겠다.) 또, 그럼에도 불구하고 for...in..., for...of..., forEach를 사용하게되는 경우와 이유가 있을까?

for과 forEach의 장점이 적힌 stack overflow 글

해당 답변글에 따르면 for문과 forEach문의 장점은 다음과 같다.

for문의 장점

1. 효율적이다.
2. break와 continue로 반복문 실행 도중 중지가 가능하다.
3. 조건문으로 순회할 배열의 범위를 조정할 수 있음
(i < n에서 n은 배열의 길이가 아니어도 된다.)

forEach문의 장점

1. 배열 순회를 위한 변수의 초기화가 필요 없다.
2. function과 array function은 새로운 블럭을 형성한다. 이 때 파라미터에 작성한 val은 함수 내에서만 쓰일 수 있고, forEach문이 종료되면, 외부에 존재하는 val 변수는 forEach와 상관 없이 값을 유지할 수 있다.

[].forEach((val, index)=>{
 ...
});

3. 코드를 더 잘 알아볼 수 있다. for문의 경우 어떤 반복 형태로도 사용이 가능하지만, forEach는 열거형으로만 반복된다. 때문에 유지보수가 더 쉬워질 수 있다.

🖥️ 사용 코드

배열 측정

const basisArray = [...Array(1000000)].map((_, i) => {
  return i;
});

console.time("for문");
for (let i = 0; i < basisArray.length; i += 1) {
  basisArray[i] = i;
}
console.timeEnd("for문");

console.time("for...in...문");
for (let i in basisArray) {
  basisArray[i] = i;
}
console.timeEnd("for...in...문");

console.time("for...of...문");
for (let i of basisArray) {
  basisArray[i] = i;
}
console.timeEnd("for...of...문");

console.time("forEach문");
basisArray.forEach((_, i) => {
  basisArray[i] = i;
});
console.timeEnd("forEach문");

let i = 0;
console.time("while문");
while (i < basisArray.length) {
  basisArray[i] = i;
  i += 1;
}
console.timeEnd("while문");

i = 0;
console.time("do...while문");
do {
  basisArray[i] = i;
  i += 1;
} while (i < basisArray.length);
console.timeEnd("do...while문");

객체 측정

const basisObject = new Object();
for (let i = 0; i < 1000000; i += 1) {
  basisObject[i] = true;
}

const entries = Object.entries(basisObject);

console.time("for문");
for (let i = 0; i < entries.length; i += 1) {
  basisObject[entries[i][0]] = true;
}
console.timeEnd("for문");

console.time("for...in...문");
for (const value in basisObject) {
  basisObject[value] = true;
}
console.timeEnd("for...in...문");

console.time("for...of...문");
for (const [key, value] of entries) {
  basisObject[key] = true;
}
console.timeEnd("for...of...문");

console.time("forEach문");
entries.forEach(([key, value]) => {
  basisObject[key] = true;
});
console.timeEnd("forEach문");

let i = 0;
console.time("while문");
while (i < 1000000) {
  basisObject[entries[i][0]] = true;
  i += 1;
}
console.timeEnd("while문");

i = 0;
console.time("do...while문");
do {
  basisObject[entries[i][0]] = true;
  i += 1;
} while (i < 1000000);
console.timeEnd("do...while문");