2018-02-12(javascript for ...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 : "mytNAME"
}
 
for(var attr in obj){
    console.log(attr);
}

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