Recent Posts
Recent Comments
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags
more
Today
Total
관리 메뉴

고리타분한 개발자

객체 (Objects) - for in Loop 본문

JavaScript/Garden

객체 (Objects) - for in Loop

sunlee334 2017. 11. 9. 00:17

객체의 프로퍼티를 탐색할 때 in 연산자와 마찬가지로 for in 문도 프로토타입 체인까지 탐색합니다. for in 문은 프로토타입 체인을 모두 탐색하기 때문에 상속할 때마다 속도가 더 느려집니다.


// Object.prototype에 값을 대입합니다.
Object.prototype.monkey = 1;

var animal = {tiger: 2};
for(var i in animal) {
console.log(i); // monkey와 tiger 를 모두 출력합니다.
}


for in 문에 정의된 기본 동작을 바꿀수는 없기 때문에 루프 안에서 불필요한 프로퍼티를 필터링 해야 합니다. 그래서 Object.prototype의 hasOwnProperty메소드를 이용해 본래 객체의 프로퍼티만 골라냅니다. for in 문은 배열의 length 프로퍼티처럼 enumerable 속성이 false인 프로퍼티는 탐색하지 않습니다.


hasOwnProperty로 필터링 하기


for (var i in animal) {
if (animal.hasOwnProperty(i)) {
console.log(i);
}
}


위와 같이 사용하는 것이 대표적인 hasOwnProperty의 예입니다. hasOwnProperty 때문에 오직 tiger만 출력됩니다. hasOwnProperty가 없으면 이 코드는 Object.prototype으로 네이티브 객체가 확장될 때 에러가 발생 할 수 있습니다.


따라서, Prototype 라이브러리처럼 네이티브 객체를 프로토타입으로 확장한 프레임워크를 사용할 경우 for in 문에 hasOwnProperty를 사용하지 않는 경우에는 문제가 발생할 수도 있으니 주의하여 사용하여야 합니다.


결론적으로, hasOwnProperty를 항상 사용하기를 권합니다. 실제 코드가 동작하는 환경에서는 절대로 네이티브 객체가 프로토타입으로 확장됐다 혹은 확장되지 않았다를 가정하지 말아야 합니다.


License

이 게시글은 JavaScript Garden을 참고하여 작성 되었습니다. (https://github.com/BonsaiDen/JavaScript-Garden)

Comments