JavaScript에서 객체에 특정 키가 존재하는지 확인하는 작업은 매우 흔한 일입니다. 하지만 의외로 많은 개발자가 부정확한 방법을 사용하고 있으며, 이는 예상치 못한 버그로 이어질 수 있습니다. 이 글에서는 먼저 잘못된 방법이 왜 문제가 되는지 살펴본 뒤, 키의 존재 여부를 정확하게 확인하는 올바른 방법들을 소개하겠습니다.
잘못된 방법: undefined 값으로 확인하기
JavaScript의 동적인 특성 때문에 다음과 같은 방식으로 키의 존재 여부를 확인하고 싶은 유혹을 받을 수 있습니다.
const obj = {
name: 'Rahul'
};
if(!obj['fName']){}
또는 다음과 같이 작성할 수도 있습니다.
if(obj['fName'] === undefined){}
그런데 이 두 가지 방법 모두 정확하지 않습니다. 그 이유는 무엇일까요?
위 예제에는 실제로 'fName' 키가 존재하지 않기 때문에 언뜻 문제가 없어 보입니다. 하지만 만약 'fName' 키가 존재하면서 값이 의도적으로 false나 undefined로 설정되어 있다면 어떻게 될까요?
이 경우 해당 키는 분명히 객체에 존재함에도 불구하고, 위 코드들은 마치 키가 없는 것처럼 판단해 버립니다. 즉, 값이 falsy(거짓 같은 값)인 키를 제대로 구분하지 못하기 때문에 이러한 상황에서는 이 방법이 실패할 수밖에 없습니다.
올바른 방법 1: in 연산자 사용
in 연산자는 iterable 객체 안에 특정 항목이 존재하는지 확인합니다. 따라서 다음과 같이 객체에 키가 존재하는지 간단하게 확인할 수 있습니다.
('fName' in obj); // true 또는 false 반환
키가 존재하면 true, 존재하지 않으면 false를 반환하므로 조건문과 함께 활용하기에 매우 편리합니다.
올바른 방법 2: hasOwnProperty() 메서드 사용
Object.prototype.hasOwnProperty() 메서드를 사용하면 객체가 특정 키를 직접 소유하고 있는지 확인할 수 있습니다.
사용 문법은 다음과 같습니다.
obj.hasOwnProperty('fName');
이 메서드 역시 키가 존재하면 true, 존재하지 않으면 false를 반환합니다.
in 연산자와 hasOwnProperty()의 차이점
두 방법의 차이는 상속된 속성을 처리하는 방식에 있습니다.
- hasOwnProperty(): 호출된 객체 인스턴스 자체의 속성만 확인합니다. 프로토타입 체인을 통해 상속받은 속성은 무시합니다.
- in 연산자: 객체 인스턴스 자체의 속성뿐만 아니라 프로토타입 체인을 통해 상속된 속성까지 모두 확인합니다.
예를 들어, 모든 객체가 Object.prototype으로부터 상속받는 'toString' 속성의 경우, 'toString' in obj는 true를 반환하지만 obj.hasOwnProperty('toString')은 false를 반환합니다.
따라서 객체 자신의 고유 속성만 확인하고 싶다면 hasOwnProperty()를, 상속된 속성까지 포함하여 확인하고 싶다면 in 연산자를 사용하는 것이 적절합니다. 상황에 맞는 방법을 선택하면 키 존재 여부를 정확하고 안전하게 판별할 수 있습니다.