[Javascript] for...in 보다는 Object.keys 사용하기

let test = {
  name: "stir",
  age: 20,
};
for (let value in test) {
    console.log(value);
}

 

일반적으로 object에서 key 값을 꺼내기 위해 for...in을 사용할 수 있습니다.

하지만 for...in을 array에서 잘못 사용하는 경우도 있는데요.
위의 Stackoverflow 글을 참고하면 문제는 아래와 같습니다.

문제

존재 하지 않는 배열 요소를 무시해버린다

var a = [];
a[5] = 5;
for (var x in a) {
    console.log(x);
}

 

위의 코드를 수행해보면 요소 비어있는 요소는 undefined로 출력되어야 하는데 건너뛰어버립니다. 예상치 못한 작동을 할 수 있기 때문에 올바르지 않은 사용이라고 볼 수 있습니다.

 

프로토타입 체인 속성까지 출력된다.

Array.prototype.foo = 1;
var a = [1, 2, 3, 4, 5];
for (var x in a){
    console.log(x);
}

 

위의 코드를 실행해보면 배열 요소 뿐만 아니라 프로토타입 체인 속성까지 출력해버립니다.

문제의 코드 찾아보기

 

현재 사내 프로젝트에 for...in을 사용하면서 잘못된 사용 케이스 찾아봤습니다. 

find . -name '*.vue' \
  | xargs grep -E '^\s*for.+\s+in\s' --no-filename

 

총 10건이 검색이 되었고 그 중 무려 8건이 for...in에 배열을 사용한 것을 확인할 수 있었습니다.

결론

for...in 자체를 쓰는 것은 나쁜 습관은 아닙니다.
그렇기에 for...in을 object를 대상으로만 사용하면 되는거 아니냐고도 할 수 있겠지만 여러명이 개발할 때 일부 팀원은 for...in에 대해 성숙하지 않을 수도 있습니다.
그렇기에 사이드 이펙트를 쉽게 야기할 수 있는 for...in 보다는 Object.keys로 키를 추출해서 사용하는 것이 더 안전한 방법이라고 볼 수 있습니다.

 

“I tend to avoid for-in, because for-of is really common in ES6, and it's really easy to get them confused. We actually have a lint rule preventing for-in.”

 

Eslint에서도 Guard-for-in 이라는 설정이 존재합니다.