📖 TIL - "아하! 이거였구나" JavaScript 객체의 키 확인 방법 총정리 🔍

📌 문제 설명

JavaScript에서 객체의 특정 키(속성)가 존재하는지 확인하는 다양한 방법에 대해 학습했습니다.

💡 해결 방법

1. hasOwnProperty() 메서드

const obj = { name: "Alice", age: 25 };

console.log(obj.hasOwnProperty("name"));     // true
console.log(obj.hasOwnProperty("gender"));   // false

• 객체 자체에 속한 키만 확인
• 상속받은 속성은 제외

2. in 연산자

const obj = { name: "Alice", age: 25 };

console.log("name" in obj);      // true
console.log("toString" in obj);  // true (프로토타입에서 상속)

• 프로토타입 체인까지 포함하여 확인
• 상속받은 속성도 확인 가능

3. Modern Approach

const obj = { name: "Alice", age: 25 };

console.log(obj?.name !== undefined);    // true
console.log(obj?.gender !== undefined);  // false

• Optional Chaining 활용
• undefined 체크와 조합

🔍 코드 설명

재사용 가능한 유틸리티 함수

function hasKey(obj, key) {
  return obj.hasOwnProperty(key);
}

function hasKeyIncludingPrototype(obj, key) {
  return key in obj;
}

✨ 새롭게 배운 점

1. hasOwnProperty와 in 연산자의 차이점

   • hasOwnProperty: 직접 소유한 속성만 체크
   • in: 상속받은 속성까지 체크

2. Modern JavaScript의 편리한 기능

   • Optional Chaining으로 더 안전한 속성 접근
   • undefined 체크와 조합하여 유연한 확인 가능

🚀 이런 점이 효율적이에요

• 상황에 따라 적절한 메서드 선택 가능
• 재사용 가능한 유틸리티 함수로 만들어 일관성 있게 사용
• Optional Chaining으로 더 안전한 코드 작성

⭐️ 참고 자료

• MDN - hasOwnProperty
• MDN - in operator
• Modern JavaScript - Optional Chaining

이제는 객체의 키를 확인할 때 상황에 맞는 적절한 방법을 선택할 수 있게 됐다! 🎯