[JavaScript] FOR문의 var .. in .. 형에 대한 분석

Internet Explorer 에서 생기는 문제점

일반적으로 for 문은 아래와 같이 사용한다.

for(var i=0; i<array.length; i++) {
	console.log(array[i]);
}

하지만, 조금더 쉽고 직관적인 사용을 위해 아래와 같이 단축된 형태로 사용하기도 한다.

for(var i in array) {
	console.log(array[i]);
}

그런데 IE8 의 경우, 위와 같이 사용할 경우 정상적으로 동작하지 않는다. array의 갯수를 정확하게 가져오지 못하는 까닭인지 초과해서 루프를 도는 경우가 많고 이에 따라 에러가 발생한다. IE 특성상 에러가 발생하면 잘 드러나지 않고 에러 이후 JS가 동작하지 않기 때문에 원인을 발견하기가 어려운 경우가 많다.

따라서 IE를 고려하는 경우 되도록 위의 for문 형태를 지양하는 것이 바람직하다. 배열을 탐색할 목적이라면 아래와 같이 for 문을 사용하는 것을 추천한다.

for(var i=0, item; item=array[i]; i++) {
	//item 처리
}

객체의 요소들을 탐색
for .. in 의 경우 배열에 사용하면 앞에 선언한 임시 변수에 숫자가 들어가지만, 객체의 경우에는 객체의 속성명이 들어가게 된다. 배열이 아닌 객체의 요소들의 탐색할 때에는 IE에서도 문제없이 사용할 수 있다.

아래 예를 살펴보자.

var obj = {
	id: "myid",
	name: "myname"
}

for(var attr in obj) {
	console.log(attr);
}

위의 결과는 id 와 name 이 출력되게 된다.
객체를 돌릴 때와 배열을 돌릴 때 앞의 임시 변수에 들어가게 되는 내용이 달라진다는 사실을 기억해야 한다.