javascript for in 문 주의점

목적

생각 없이 배열 반복문에 사용했다가 에러 났기에 정확히 숙지하려고 합니다.

설명

for in 문은 객체의 프로퍼티명을 열거하는 반복문입니다. 배열도 객체로 놓고 보자면 인덱스의 숫자가 프로퍼티명에 해당하기 때문에 for in 문으로 사용할 수 있습니다.

하지만 배열 요소를 반복할 때 for in 문의 사용시 주의할 점이 있습니다.

예제

var obj = {a: 1, b: 2, c: 3};

for (const prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

var obj = ["a", "b", "c"];

for(var idx in obj) {
    console.log(idx + " : " + obj[idx]);
}
// Output:
// 0 : a
// 1 : b
// 2 : c

for in 문을 이용하여 객체의 프로퍼티명과 프로퍼티값을 출력하는 코드입니다. 배열 반복시에도 정상적으로 출력이 되었습니다.

주의 사항

var obj = ["a", "b", "c"];

for(var idx in obj) {
    console.log(idx + " : " + obj[idx]);
}

// Output :
// 0 : a
// 1 : b
// 2 : c
// find : function(iterator) {
// }
// all : function(iterator) {
// }
// ...

JS는 같은 코드라도 어떤 환경에서 사용하느냐에 따라 다른 결과가 나올 수 있습니다. 상단의 출력문은 모 사이트에서 위 코드를 실행했을때 나오는 결과입니다(일반적인 케이스는 아닙니다만 일어날 수 있는 상황입니다). for in 문은 프로토타입에서 상속한 프로퍼티도 나열합니다. 때문에 위의 환경에서 Array.prototype을 상속한 function 까지도 출력이 되었습니다. 만약 문자열을 조작하는 작업을 수행한다면 에러가 날 것입니다.

왜 사용합니까?

일단 키-값 쌍으로 구성된 데이터의 경우에는 for...in 문을 사용해도 아무 문제 없이 보입니다. 배열문에 사용시에는 주의가 필요합니다.

참고

for in 문 가이드