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

💫 프로퍼티 존재 확인

🔹 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

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