• 목록
  • 아래로
  • 위로
  • 5
  • 네모
  • 조회 수 101

post-thumbnail

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


아래엔 똑같은 결과물을 가져다주는 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 - 이런 사소한 것들도 고려하며 코드를 작성해도, 우리의 월급은 그대로다.

OAUTH2님 포함 1명이 추천

추천인 1

작성자
네모 70 Lv. (55%) 398240/403280EXP

인스타그램 : http://instg.me/nemo_9l

댓글 5

title: 생일 케이크 (1년권)OAUTH2

자바스크립트 JIT 관련 문제로 추정됩니다

HotPath를 컴파일하는 특성상 더 많이 실행되는 루프가 내부에 있는 것이 유리하겠군요

 

C/C++같은 컴파일 언어에서는 컴파일러가 알아서 최적화 할것 같습니다.

comment menu
2021.09.30. 17:43

신고

"OAUTH2님의 댓글"

이 댓글을 신고 하시겠습니까?

네모 작성자 → OAUTH2
profile image
일단 컴파일 언어에서도 많이 실행되는 루프가 내부에 있는게 유리합니다.
다만 모 유저분의 분석에 따르면, 천만회 수준까지 올라가야 유의미한 차이를 보인다고 하네요.
증감 연산자나 분기 예측에 따른 코스트 차이가 있어 큰 루프가 내부에 있는것이 유리한 것은 맞으나,
말씀하신대로 컴파일러의 최적화 덕분에 웬만해선 큰 차이가 없다 합니다.

설령 실질적인 차이가 없더라도,
저런 형태의 루프문을 사용해야 할 경우 가독성을 해치지 않는 수준에서는 내부의 루프가 더 크게 작성하는 것이 올바른 방향이 아닐까 생각합니다.
comment menu
2021.10.01. 00:21

신고

"네모님의 댓글"

이 댓글을 신고 하시겠습니까?

협스
profile image
어? 생코에서 똑같은 글을 본 적이 있는데.....?
comment menu
2021.10.01. 10:53

신고

"협스님의 댓글"

이 댓글을 신고 하시겠습니까?

네모 작성자 → 협스
profile image

ㅋㅋㅋㅋㅋㅋ 저도 협스님 글 자주 보고 있습니다 :)

comment menu
2021.10.01. 22:01

신고

"네모님의 댓글"

이 댓글을 신고 하시겠습니까?

협스 → 네모
profile image
잘 봤습니다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
comment menu
2021.10.02. 16:51

신고

"협스님의 댓글"

이 댓글을 신고 하시겠습니까?

권한이 없습니다.