JavaScript에서 객체 속성 삭제하기
JavaScript에서 객체의 속성(property)을 삭제하려면 delete 연산자를 사용합니다. delete 연산자는 객체에서 지정한 속성을 완전히 제거하며, 삭제된 속성에 접근하면 undefined가 반환됩니다.
아래는 JavaScript에서 객체 속성을 삭제하는 전체 예제 코드입니다.
예제
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result,.sample {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>Delete object properties in JavaScript</h1>
<div class="sample">Before Deleting <br /></div>
<div style="color: green;" class="result">After deleting<br /></div>
<button class="btn">CLICK HERE</button>
<h3>
Click on the above button to delete object properties
</h3>
<script>
let btnEle = document.querySelector(".btn");
let resEle = document.querySelector(".result");
let sampleEle = document.querySelector(".sample");
let obj = {
firstName: "Rohan",
lastName: "Sharma",
welcome() {
return "Welcome " + this.firstName + " " + this.lastName;
},
};
function beforeDelete() {
sampleEle.innerHTML += "obj.firstName = " + obj.firstName + "<br>";
sampleEle.innerHTML += "obj.lastName = " + obj.lastName + "<br>";
sampleEle.innerHTML += "obj.welcome() = " + obj.welcome() + "<br>";
}
beforeDelete();
btnEle.addEventListener("click", () => {
delete obj.firstName;
delete obj.lastName;
delete obj.welcome;
resEle.innerHTML += "obj.firstName = " + obj.firstName + "<br>";
resEle.innerHTML += "obj.lastName = " + obj.lastName + "<br>";
try {
resEle.innerHTML += "obj.welcome() = " + obj.welcome() + "<br>";
}
catch (err) {
resEle.innerHTML += err;
}
});
</script>
</body>
</html>코드 설명
위 예제의 동작 방식을 단계별로 살펴보겠습니다.
1. 객체 생성
obj 객체는 firstName, lastName 두 개의 문자열 속성과, 인사말을 반환하는 welcome() 메서드로 구성되어 있습니다.
2. 삭제 전 상태 출력
페이지가 로드되면 beforeDelete() 함수가 실행되어 각 속성의 값을 화면에 표시합니다.
3. delete 연산자로 속성 삭제
버튼을 클릭하면 delete obj.firstName;, delete obj.lastName;, delete obj.welcome; 구문이 차례로 실행되어 세 속성이 모두 제거됩니다.
4. 삭제 후 상태 확인
삭제된 속성에 접근하면 undefined가 출력됩니다. 특히 welcome() 메서드는 이미 존재하지 않으므로 호출 시 TypeError가 발생하며, 이를 try...catch 문으로 처리하여 에러 메시지를 화면에 보여줍니다.
출력 결과
위 코드를 실행하면 다음과 같은 결과가 나타납니다.
'CLICK HERE' 버튼을 클릭한 후의 결과입니다.
정리
delete 연산자는 객체의 속성을 제거하는 가장 기본적인 방법입니다. 단, 변수나 함수 선언 자체는 삭제할 수 없으며 오직 객체의 속성에만 사용할 수 있다는 점을 기억하세요. 또한 최신 JavaScript에서는 불변성(immutability)을 유지하기 위해 delete 대신 구조 분해 할당(rest 문법)으로 새로운 객체를 만드는 방식도 널리 활용됩니다.