[JavaScript] for...in

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

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

하지만, 조금 더 간단하고 직관적으로 표현하기 위해 아래와 같이 단축된 형태로 쓰기도 한다.

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

그런데 IE8의 경우 위와 같이 작성하면 정상적으로 작동하지 않는다. array의 개수를 정확히 가져오지 못하는 까닭인지 초과해서 루프를 도는 경우가 많이 발생해 에러가 난다.
따라서 IE를 고려하는 경우 되도록이면 위의 for문을 지양하는 것이 좋다.

객체들의 요소를 탐색하는 경우

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

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

for(var attr in obj) {
	console.log(attr);          // 'id' / 'name'
  	console.log(obj[attr]);     // 'myid' / 'myname'
}

아래의 코드를 보며 좀 더 잘 이해해보자.

var user = {
  name: "kwon",
  gender: "female"
}

var copyObject = (target) => {
  var result = {};
  for (var prop in target) {
    result[prop] = target[prop];
  }
  return result;
}

var user2 = copyObject(user);

console.log(user2)       // {name: "kwon", gender: "female"}

for...in 루프는 target 객체의 속성들을 순회하며 각 속성의 키('prop')를 가져온다.
'result[prop] = target[prop]' 코드는 target 객체의 각 속성의 값을 result 객체에 복사한다. 이렇게 복사된 result 객체는 user2 변수에 할당된다.

따라서, user2 객체는 user 객체와 동일한 속성(key)과 값(value)을 가지게 되는 것이다.

❗️객체를 돌릴 때와 배열을 돌릴 때 앞의 임시 변수에 들어가는 내용이 달라진다는 것을 기억해야 한다.