프로퍼티 존재확인/열거 메서드

GY·2021년 11월 4일
0

메소드 정리

목록 보기
11/14
post-thumbnail

💫 프로퍼티 존재 확인

🔹 in연산자

객체에 특정 프로퍼티가 존재하는지 여부를 확인한다.

const person = {
	name: "Lee",
}

console.log('name' in person);//true
console.log('toString' in person) //true 

⭕ in 연산자는 객체가 상속받은 모든 프로토타입의 프로퍼티를 확인한다.


🔹 Object.prototype.hasOwnProperty

객체에 특정 프로퍼티가 존재하는지 여부를 확인한다.

console.log(person.hasOwnProperty('name')) //true
console.log(person.hasOwnProperty('toString')) //false

❌ hasOwnProperty 메서드는 상속받은 프로토타입의 프로퍼티를 확인하지 않는다.



💫 프로퍼티 열거

🔹 for...in

for...in문은 (프로퍼티 어트리뷰트[[Enumerable]]의 값이 true인) 모든 객체의 모든 프로퍼티를 순회하며 열거한다.

for (const key in person) {
  console.log(key + ':' + person[key]);
}

객체의 프로퍼티 개수만큼 순회하며 선언한 변수(key)에 프로퍼티 키를 할당해 코드를 실행한다.

⭕ for...in문은 상속받은 프로토타입의 프로퍼티까지 열거한다.

  • 단, toString의 프로퍼티는 열거되지 않는다.
    프로퍼티 어트리뷰트는 프로퍼티의 열거 가능 여부를 나타내는 것으로, 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 true여야만 열거가 가능하다.

  • 프로퍼티 키가 symbol인 프로퍼티는 열거하지 않는다.

    hasOwnProperty와 함께 사용

    객체 자신의 프로퍼티만 열거하려면 hasOwnProperty와 함께 사용하여 프로토타입 체인을 타고 올라가 검색하는 것을 방지할 수 있다.

for(const key in person) {
	if(!person.hasOwnproperty(key)) continue;
  	console.log(key + ':' + person[key]);
}

🔹 Object.keys/values/entries

for...in문은 객체 자신의 프로퍼티만 열거하기 위해서는 hasOwnProperty를 함께 사용해주어야 한다.
이것보다는 다음의 메서드를 사용하는 것을 권장한다.

Object.keys

객체 자신의 열거 가능한 프로퍼티 키를 배열로 반환한다.

console.log(Object.keys(person));

Object.values

객체 자신의 열거 가능한 프로퍼티 값을 배열로 반환한다.

console.log(Object.values(person))

Object.entries

객체 자신의 열거 가능한 프로퍼티 키와 값의 쌍의 배열을 배열에 담아 반환한다.

console.log(Object.entries(person))


Reference

모던 자바스크립트 딥다이브

profile
Why?에서 시작해 How를 찾는 과정을 좋아합니다. 그 고민과 성장의 과정을 꾸준히 기록하고자 합니다.

0개의 댓글