자바스크립트 객체에서 속성 제거하는 방법 – delete 연산자 사용법

자바스크립트를 다루다 보면 객체에서 특정 속성(property)을 제거해야 하는 경우가 자주 발생합니다. 이 글에서는 delete 연산자를 사용해 객체의 속성을 안전하게 삭제하는 방법과 함께, 주의해야 할 사항까지 자세히 알아보겠습니다.

문제 상황

예를 들어 다음과 같은 객체가 있다고 가정해 봅시다.

const myObject = {
    "ircEvent": "PRIVMSG",
    "method": "newURI",
    "regex": "^https://.*"
};

여기서 regex 속성을 제거하여 아래와 같은 새로운 객체를 만들고 싶습니다.

const myObject = {
    "ircEvent": "PRIVMSG",
    "method": "newURI"
};

해결 방법: delete 연산자

자바스크립트에서는 delete 연산자를 사용하면 객체에서 속성을 간단히 제거할 수 있습니다.

const myObject = {
    "ircEvent": "PRIVMSG",
    "method": "newURI",
    "regex": "^https://.*"
};
delete myObject['regex'];
console.log(myObject.hasOwnProperty("regex")); // false

위 코드에서 delete myObject['regex']를 실행한 후 hasOwnProperty() 메서드로 확인해 보면 해당 속성이 더 이상 존재하지 않음을 알 수 있습니다.

실행 결과

콘솔 출력 결과는 다음과 같습니다.

false

C/C++의 delete와의 차이점

자바스크립트의 delete 연산자는 C나 C++의 delete 키워드와는 전혀 다른 역할을 합니다.

• C/C++의 delete: 동적으로 할당된 메모리를 해제하는 역할을 합니다.
• 자바스크립트의 delete: 메모리를 직접 해제하지 않으며, 오직 객체의 속성을 제거하는 용도로만 사용됩니다.

즉, 자바스크립트의 delete는 메모리 관리 도구가 아니라 객체 속성 삭제 전용 연산자라고 이해하시면 됩니다.

참고: 불변성을 유지하는 대체 방법

원본 객체를 변경하지 않고 새로운 객체를 만들고 싶다면, 구조 분해 할당(destructuring)과 나머지 매개변수(rest) 문법을 활용할 수 있습니다.

const { regex, ...newObject } = myObject;
console.log(newObject);
// { ircEvent: "PRIVMSG", method: "newURI" }

이 방식은 React 등에서 상태(state)의 불변성(immutability)을 유지해야 할 때 특히 유용합니다.

마무리

객체의 속성을 제거하는 가장 기본적인 방법은 delete 연산자이며, 원본 수정 없이 새 객체를 만들려면 구조 분해 할당을 사용하는 것이 좋습니다. 상황에 맞게 적절한 방법을 선택하면 더 깔끔하고 안전한 코드를 작성할 수 있습니다.