JavaScript에서 객체에 특정 속성이 존재하는지 확인하는 방법

JavaScript에서 객체에 특정 속성(property)이 존재하는지 확인해야 하는 경우가 자주 있습니다. 이럴 때 가장 널리 사용되는 방법은 hasOwnProperty() 메서드를 활용하는 것입니다.

hasOwnProperty() 메서드란?

hasOwnProperty()는 객체가 특정 속성을 자신의 직접적인 속성으로 가지고 있는지를 확인하는 메서드입니다. 상속받은 속성은 제외하고 오직 해당 객체 자체에 정의된 속성만 검사하므로, 정확한 속성 존재 여부 확인에 적합합니다.

예제 코드

다음은 버튼을 클릭하면 객체에 firstName 속성이 있는지 확인하고 그 결과를 화면에 출력하는 전체 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>객체 속성 확인하기</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>객체의 속성 존재 여부 확인하기</h1>
<div class="result"></div>
<button class="Btn">클릭하세요</button>
<h3>위 버튼을 클릭하면 obj 객체에 firstName 속성이 있는지 확인합니다</h3>
<script>
    let resEle = document.querySelector(".result");
    let obj = { firstName: "Rohan", lastName: "Sharma", age: 21 };
    document.querySelector(".Btn").addEventListener("click", () => {
        if (obj.hasOwnProperty("firstName")) {
            resEle.innerHTML = "obj 객체에는 firstName 속성이 있습니다.";
        } else {
            resEle.innerHTML = "obj 객체에는 firstName 속성이 없습니다.";
        }
    });
</script>
</body>
</html>

실행 결과

페이지를 실행하면 다음과 같은 초기 화면이 나타납니다.

JavaScript에서 객체에 특정 속성이 존재하는지 확인하는 방법

'클릭하세요' 버튼을 누르면 아래와 같이 확인 결과가 표시됩니다.

JavaScript에서 객체에 특정 속성이 존재하는지 확인하는 방법

코드 설명

1. obj라는 객체를 생성하고 firstName, lastName, age 세 가지 속성을 정의합니다.
2. 버튼 클릭 시 addEventListener()로 등록된 이벤트 핸들러가 실행됩니다.
3. obj.hasOwnProperty("firstName") 호출 결과가 true이면 해당 속성이 존재한다는 메시지를, false이면 존재하지 않는다는 메시지를 출력합니다.

참고: in 연산자와의 차이점

속성 존재 여부를 확인하는 또 다른 방법으로 in 연산자가 있습니다. 예를 들어 "firstName" in obj처럼 사용할 수 있습니다. 두 방식의 차이는 다음과 같습니다.

hasOwnProperty(): 객체 자체에 정의된 속성만 확인합니다.
in 연산자: 프로토타입 체인을 통해 상속받은 속성까지 포함하여 확인합니다.

따라서 상속된 속성을 제외하고 순수하게 객체 자신의 속성만 확인하고 싶다면 hasOwnProperty()를 사용하는 것이 좋습니다.