JavaScript delete 연산자로 객체의 setter와 속성을 삭제하는 방법

delete 연산자로 setter 삭제하기

JavaScript에서 객체의 setter(또는 getter, 일반 속성)를 제거하려면 delete 연산자를 사용합니다. 문법은 아주 간단하며, delete 키워드 뒤에 삭제할 속성 경로를 작성하면 됩니다.

delete obj.name

이렇게 하면 해당 객체에서 더 이상 그 속성에 접근할 수 없으며, 접근 시 undefined가 반환됩니다.

예제 코드

아래 코드를 실행하면 setter를 활용해 속성을 설정하고, 이후 delete로 속성을 삭제하는 전체 과정을 직접 확인할 수 있습니다.

<html>
   <body>
      <script>
         var department = {
            deptName: "Marketing",
            deptZone: "North",
            deptID: 101,
            get details() {
               return "Department Details<br>" + "Name: " + this.deptName + " <br>Zone: " + this.deptZone + "<br>ID: " + this.deptID;
            },
            set details(info) {
               var res = info.toString().split(' ');
               this.deptName = res[0] || '';
               this.deptZone = res[1] || '';
               this.deptID = res[2] || '';
            }
         }
         department.details = 'Marketing North 001';
         document.write("<br>Department Name: " + department.deptName);
         document.write("<br>Department Zone: " + department.deptZone);
         document.write("<br>Department ID: " + department.deptID);
         delete department.deptName;
         document.write("<br>Department Name (after deletion): " + department.deptName);
      </script>
   </body>
</html>

코드 동작 원리

department 객체에는 deptName, deptZone, deptID라는 세 개의 속성과 함께, 같은 이름을 공유하는 details getter와 setter가 정의되어 있습니다.

setter인 set details(info)는 공백으로 구분된 문자열을 입력받아 이를 split() 메서드로 나눈 뒤, 각각 부서 이름·지역·ID로 저장합니다. 따라서 'Marketing North 001'이라는 문자열 하나만 할당해도 세 속성이 한 번에 설정됩니다.

값이 정상적으로 설정된 후 delete department.deptName; 구문이 실행되면 deptName 속성이 객체에서 완전히 제거되고, 마지막 출력문은 undefined를 표시합니다.

알아두면 좋은 주의 사항

delete 연산자는 객체의 속성만 삭제할 수 있으며, var로 선언한 변수나 함수 선언에는 사용할 수 없습니다.
getter 역시 setter와 동일하게 delete obj.details 형태로 삭제할 수 있습니다.
삭제된 속성에 다시 접근하면 에러가 발생하지 않고 undefined가 반환되므로, 필요하다면 삭제 여부를 먼저 확인하는 것이 안전합니다.