해를 좀먹는 그늘

for-in 루프

for-in 루프는 배열이 아닌 객체를 순회할 때만 사용해야 한다. for-in 으로 루프를 도는것을 열거 라고도 한다.

이 예제에서는 객체 리터럴을 사용하여 man 이라는 이름의 간단한 객체를 정의했다. man을 정의하기 전이나 후 어디선가 Object 프로토타입에 clone()이라는 이름의 메서드가 편의상 추가 되었다.

man을 열거할때 hasOwnProperty()를 호출하여 걸러내지 않으면 clone()이 나오게 되므로 동작방식이 바람직 하지 않다.

Object.property에서 hasOwnProperty()를 호출하는 것도 하나의 패턴이다.

이 방법은 man 객체가 hasOwnProperty를 재정의하여 덮어썼을 경우에도 활용 할 수 있다는 장점이 있다. 프로퍼티 탐색이 Object까지 거슬러 올라가지 않게 하려면 지역변수를 사용하여 이 메서드를 캐시하면된다.

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] 를 다루는 코드
}