[러닝 자바스크립트] for...in과 hasOwnProperty()

const SYM = Symbol();

const o = { a: 1, b: 2, c: 3, [SYM]: 4 };

// 1번 방법 (for...in)
// for(let prop in o) {
//     if (!o.hasOwnProperty(prop)) continue;
//     console.log(`${prop}: ${o[prop]}`);
// }

// 2번 방법 (Object.keys)
// 객체의 프로퍼티 키를 배열로 가져와야 할 때 편리
Object.keys(o).forEach(prop => console.log(`${prop}: ${o[prop]}`));

 

문자열 프로퍼티와 심볼 프로퍼티가 있는 o 객체가 있다. 단순해보이지만 중간에 hasOwnProperty가 눈에 띄인다.

hasOwnProperty()는 상속된 프로퍼티가 for...in에 나타날 위험을 제거하기 위해 사용한다.

영어 그대로 해석해보면 '해당 객체에 특정 프로퍼티가 존재하면 true, 그렇지 않으면 false를 반환하겠다'는 기능을 가진 아이다.

 

다른 타입의 객체, 다른 사람이 만든 객체의 프로퍼티를 나열하다 보면 예상치 못한 상황이 생길 수 있으므로,

hasOwnProperty를 쓰는 습관을 들이길 권장한다.

 

<참고>

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty

---

const o = { apple: 1, xochitl: 2, balloon: 3, guitar: 4, xylophone: 5, };

// 객체에서 x로 시작하는 프로퍼티 모두 가져오기
Object.keys(o)
    .filter(prop => prop.match(/^x/))
    .forEach(prop => console.log(`${prop}: ${o[prop]}`));