[최적화] 중첩 반복문은 안감을 두껍게 짜야한다.

생각없이 코드 짜다보면 놓치기 쉬운 중첩 반복문의 배치.
지금 바로 알아봅시다.

아래엔 똑같은 결과물을 가져다주는 2개의 다른 코드가 있습니다.

// Case A
for(var i = 0; i < 100; i++){
  for(var j = 0; j < 1000; j++){
    for(var k = 0; k < 10000; k++){
      // 쓰담쓰담
    }
  }
}

// Case B
for(var i = 0; i < 10000; i++){
  for(var j = 0; j < 1000; j++){
    for(var k = 0; k < 100; k++){
      // 쓰담쓰담
    }
  }
}

A와 B 모두 총 반복 횟수는 100 * 1000 * 10000 으로 천만회의 루프를 타게 됩니다.
그런데 과연 두 코드의 실행 속도는 동일할까요?

console.time 함수를 사용하여 간단하게 측정해 봅시다.

// Case A
(function(){
  console.time();
  for(var i = 0; i < 100; i++){
    for(var j = 0; j < 1000; j++){
      for(var k = 0; k < 10000; k++){
        // 쓰담쓰담
      }
    }
  }
  console.timeEnd();
})();

A 케이스의 평균 실행시간은 약 360ms 정도가 나옵니다.

// Case B
(function(){
  console.time();
  for(var i = 0; i < 10000; i++){
    for(var j = 0; j < 1000; j++){
      for(var k = 0; k < 100; k++){
        // 쓰담쓰담
      }
    }
  }
  console.timeEnd();
})();

A에 비해 B 케이스의 경우 405ms 수준의 실행시간을 가집니다.
실행 순서를 약간 변경했을 뿐인데, 무려 50ms 의 차이를 보입니다.

사실 조금만 생각해보면, 왜 이러한 결과가 나오는지 알아차릴 수 있습니다.
코드를 간소화하여 비교해 봅시다.

// Case A
for(var i = 0; i < 10; i++){
  for(var j = 0; j < 100; j++){
    // 쥬물쥬물
  }
}

// Case B
for(var i = 0; i < 100; i++){
  for(var j = 0; j < 10; j++){
    // 쥬물쥬물
  }
}

A 케이스에서 var j 가 선언되는 횟수는 10 회인 반면, B 케이스에서는 var j 가 총 100 회 선언됩니다.
이런 간단한 수준의 반복문에서도 무려 10배의 차이가 나타납니다.

이러한 결과를 보았을 때, 우리는 아래와 같은 교훈을 얻을 수 있습니다.

1 - 중첩 반복문에서 반복횟수가 많은 반복문을 안에 위치할수록 더 유리해진다.
2 - 이런 사소한 것들도 고려하며 코드를 작성해도, 우리의 월급은 그대로다.