JavaScript 객체에서 속성을 제거하는 방법 – delete 연산자 완벽 가이드

JavaScript 객체에서 속성 제거하기

JavaScript 객체에서 특정 속성(property)을 제거하려면 delete 연산자를 사용합니다. delete 연산자는 객체에서 지정한 속성과 해당 값이 함께 삭제되며, 삭제에 성공하면 true를 반환합니다.

기본 문법

delete object.property;

예제

아래 예제는 athlete 객체의 trophies 속성을 delete 연산자로 제거하기 전과 후의 차이를 보여줍니다.

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Object Properties Example</h1>
<h2 class="sample">athlete.name</h2>
<script>
    let athlete = {
        name: "James Anderson",
        sport: "Cricket",
        trophies: "15"
    };
    document.querySelector(".sample").innerHTML =
        `${athlete.name} who plays ${athlete.sport} has ${athlete.trophies} trophies`;

    // trophies 속성 제거
    delete athlete.trophies;

    document.querySelector(".sample").innerHTML +=
        ` <br> ${athlete.name} who plays ${athlete.sport} has ${athlete.trophies} trophies`;
</script>
</body>
</html>

출력 결과

위 코드를 실행하면 다음과 같은 출력이 나타납니다. 속성을 제거하기 전에는 트로피 개수가 정상적으로 표시되지만, delete 이후에는 해당 값이 undefined로 출력되는 것을 확인할 수 있습니다.

JavaScript 객체에서 속성을 제거하는 방법 – delete 연산자 완벽 가이드

delete 연산자 사용 시 주의사항

delete는 객체 자체의 속성만 제거할 수 있으며, 프로토타입 체인에 존재하는 속성은 제거되지 않습니다.
var, let, const로 선언한 변수나 함수 선언에는 delete를 사용할 수 없습니다.
존재하지 않는 속성을 delete하더라도 오류가 발생하지 않고 true를 반환합니다.
속성이 제거된 후 해당 속성에 다시 접근하면 undefined가 반환됩니다.