[Javascript] for (let i=0; i < data.length; i++) 반복문 실행 속도 향상 방법

네이버 지도 API에서 다음과 같은 방식으로 for문을 적어놨다.

for (let i = 0, ii = data.length; i < ii; i++)

 

평소에 내가 쓰던 for문의 방식은 모두가 알고있는 아래의 방식이다.

for (let i = 0, i < data.length; i++)

 

왜 굳이 힘들게 변수 ii에 배열의 길이를 저장해서 사용했을까?

찾아보니 미리 데이터의 길이를 변수에 저장해두면 for문이 1바퀴 돌 때마다 data의 길이 속성을 호출하지 않아도 되어 코드 실행 속도를 향상시킬 수 있다고 한다.

 

그래서 테스트를 해보았다.

100만 길이의 배열 데이터를 생성한 후, 기존의 방식과 네이버지도API에서 사용하는 방식의 러닝타임을 비교했다.

 

// 길이 100만의 배열 데이터 생성
data = [];
data1 = [];
data2 = [];
for (let i = 0; i < 1000000; i++) {
  data.push(i);
}

// 코드1
let startTime1 = performance.now(); // 코드 실행 전 시간 측정
for (let i = 0; i < data.length; i++) {
  data1.push(i * 10);
}
let endTime1 = performance.now(); // 코드 실행 후 시간 측정
let duration1 = endTime1 - startTime1; // 실행 시간 계산

// 코드2

let startTime2 = performance.now(); // 코드 실행 전 시간 측정
for (let i = 0, ii = data.length; i < ii; i++) {
  data1.push(i * 10);
}
let endTime2 = performance.now(); // 코드 실행 후 시간 측정
let duration2 = endTime2 - startTime2; // 실행 시간 계산

console.log(`코드1 실행 소요 시간: ${duration1}ms`);
console.log(`코드2 실행 소요 시간: ${duration2}ms`);

 

결과는 어떻게 됐을까?

테스트 결과

약 7.3ms의 러닝타임 차이가 발생했다.

0.007초라는 사람이 느끼기에 어려운 차이일 수 있지만, 컴퓨터 입장에서 봤을 때는 꽤나 유의미한 차이이지 않을까 싶다.