JavaScript에서 delete 연산자를 사용하면 객체(object)에서 특정 속성(property)을 제거할 수 있습니다. 아래 예제 코드를 직접 실행해 보면 delete 연산자의 동작 방식을 쉽게 이해할 수 있습니다. 여기서는 book 객체의 가격(price) 속성을 삭제해 보겠습니다.
예제 코드
<html>
<head>
<title>JavaScript Delete Operator</title>
<script>
function book(title, author) {
this.title = title;
this.author = author;
}
</script>
</head>
<body>
<script>
var myBook = new book("WordPress Development", "Amit");
book.prototype.price = null;
myBook.price = 500;
document.write("<h2>가격 삭제 전 도서 정보</h2>");
document.write("도서 제목 : " + myBook.title + "<br>");
document.write("도서 저자 : " + myBook.author + "<br>");
document.write("도서 가격 : " + myBook.price);
delete myBook.price;
document.write("<br><h2>가격 삭제 후 도서 정보</h2>");
document.write("도서 제목 : " + myBook.title + "<br>");
document.write("도서 저자 : " + myBook.author + "<br>");
document.write("도서 가격 : " + myBook.price + "<br>");
</script>
</body>
</html>
코드 설명
위 코드는 다음과 같은 순서로 동작합니다.
1. 생성자 함수 정의: book 함수는 title(제목)과 author(저자) 두 개의 속성을 가진 객체를 생성합니다.
2. 객체 생성 및 속성 추가: new 키워드로 myBook 객체를 만든 뒤, price 속성에 500이라는 값을 할당합니다.
3. 삭제 전 정보 출력: delete 연산자를 실행하기 전에 도서의 제목, 저자, 가격이 모두 정상적으로 출력됩니다.
4. 속성 삭제: delete myBook.price; 구문이 실행되면서 myBook 객체에서 price 속성이 완전히 제거됩니다.
5. 삭제 후 정보 출력: 삭제 후에는 제목과 저자는 그대로 출력되지만, 가격은 더 이상 존재하지 않으므로 undefined가 출력됩니다.
delete 연산자 사용 시 주의 사항
delete 연산자를 올바르게 활용하려면 다음 특징들을 기억해 두는 것이 좋습니다.
- delete 연산자는 객체의 속성만 삭제할 수 있으며, 일반 변수나 함수 선언에는 사용할 수 없습니다.
- var, let, const로 선언된 전역 변수는 delete로 삭제할 수 없습니다.
- 삭제에 성공하면 true를 반환하고, 실패하거나 존재하지 않는 속성을 삭제하려 해도 true를 반환합니다.
- 속성을 삭제하면 프로토타입 체인까지 탐색하지 않고 해당 객체의 속성 자체가 제거됩니다.
- 객체의 속성 값을 undefined로 설정하는 것과 달리, delete는 속성 자체를 완전히 제거한다는 점이 중요한 차이입니다.