자바스크립트 코딩 기법과 핵심 패턴-for 루프

for 루프

 

최적화 되지 않은 루프

이 패턴의 문제점은 루프 순회시 마다 배열의 length에 접근한다는 점이다.

for(var i=0; i<myarray.length; i++){ 
	// myarray[i] 를 다루는 코드 
}

 

for 루프를 좀더 최적화 하기 위해서는 다음 예제처럼 배열의 length를 캐시해야 한다.

for(var i=0, max = myarray.length; i<max; i++){
	// myarray[i] 를 다루는 코드
}

이렇게 하면 length 값을 한번만 구하고 루프를 도는 동안 이 값을 사용하게 된다.

 

단일 var 패턴을 따르자면, var 문을 루프 외부로 빼내어 다음과 같이 만들수 있다.

function looper() { 
	var i=0, max myarray = []; 
    // ... 
    for(i=0, max = myarray.length; i<max; i++){
    // myarray[i] 를 다루는 코드
    } 
}

이 패턴은 단일 var 패턴을 고수하여 일관성을지킨다는 장점이 있다.

 

i++ 명령문을 다음중 하나로 대체할 수 있으며, JSLint는 이 방법을 권장한다.

i = i+1

i += 1

 

for 문에는 두 가지 변형 패턴이 있다.

이 패턴들은 다음과 같은 미세 최적화를 시도 한다.

 

첫번째 변형 패턴

var i, myarray = [];

for (i = myarray.length; i--){ 
	// myarray[i]를 다루는 코드 
}

두번째 변형 패턴은 whlie 루프를 사용한다.

var myarray = [],i = myarray.length;
    
while (i--){
	// myarray[i] 를 다루는 코드
}