[JavaScript]객체의 프로퍼티를 제거하는 방법

객체의 프로퍼티를 제거하는 방법

JavaScript에서 더 이상 사용되지 않는 객체의 프로퍼티를 제거해야 하는 상황이 발생할 수 있습니다.

 

일반적으로 객체에 존재하지 않는 프로퍼티를 접근하면, undefined를 반환합니다.

const Person = {
  name: '홍길동',
  age: 20,
  address: '서울'
};

console.log(Person.email); // undefined

 

하지만, undefined로 설정된 프로퍼티도 undefined를 반환하므로 점(.) 표기법 또는 대괄호([]) 표기법으로 프로퍼티가 존재하는지 체크하는 방법은 좋은 방법이 아닙니다.

const Person = {
  name: '홍길동',
  age: 20,
  address: '서울',
  home: undefined
};

console.log(Person.home); // undefined

 

따라서, 객체의 프로퍼티가 존재하는지 확인하려면 hasOwnProperty() 메서드를 사용합니다. 객체의 프로퍼티가 존재하면 true, 그렇지 않으면 false를 반환합니다.

const Person = {
  name: '홍길동',
  age: 20,
  address: '서울'
};

console.log(Person.hasOwnProperty('name'));  // true
console.log(Person.hasOwnProperty('email')); // false

이번 포스팅은 객체의 프로퍼티를 제거하는 몇 가지 방법을 소개하며, hasOwnProperty() 메서드를 호출하여 프로퍼티가 정상적으로 제거되었는지 확인합니다.

---

방법 1. delete 연산자

가장 기본적인 방법으로 JavaScript에서 제공하는 delete 연산자를 사용하여 객체의 프로퍼티를 제거할 수 있습니다. 

const Person = {
  name: '홍길동',
  age: 20,
  address: '서울'
};

// delete 연산자 호출 전
console.log(Person.hasOwnProperty('name')); // true

// 또는 delete Person['name'];
delete Person.name;

// delete 연산자 호출 후
console.log(Person.hasOwnProperty('name')); // false

---

방법 2. Reflect의 delete 연산자

ES6에 도입된 새로운 내장 객체인 Reflect를 사용하여 객체의 프로퍼티를 제거할 수 있습니다.

 

Reflect 객체에서 deleteProperty() 메서드를 호출하고 첫 번째 매개변수에 객체, 두 번째 매개변수에 프로퍼티의 이름을 전달합니다.

 

deleteProperty() 메서드는 프로퍼티를 성공적으로 제거하면 true, 그렇지 않으면 false를 반환합니다.

const Person = {
  name: '홍길동',
  age: 20,
  address: '서울'
};

// Reflect.deleteProperty() 호출 전
console.log(Person.hasOwnProperty('name')); // true

console.log(Reflect.deleteProperty(Person, 'name')); // true

// Reflect.deleteProperty() 호출 후
console.log(Person.hasOwnProperty('name')); // false

 

Reflect.deleteProperty() 메서드의 단점은 객체에 존재하지 않는 프로퍼티를 제거한 경우에도 true를 반환합니다.

 

따라서, 프로퍼티가 제거되었는지 확인하려면 Reflect.deleteProperty() 메서드의 반환 값보다 hasOwnProperty() 메서드를 사용하는 것이 좋습니다.

const Person = {
  name: '홍길동',
  age: 20,
  address: '서울'
};

// 존재하지 않는 프로퍼티를 제거
console.log(Reflect.deleteProperty(Person, 'book')); // true

---

방법 3. 구조 분해

delete 연산자와 Reflect.deleteProperty() 메서드는 한 가지 문제점이 존재합니다.

 

해당 객체를 참조하는 객체가 존재하는 경우 부작용이 발생할 수 있습니다.

 

다음 예제는 User 객체의 person 프로퍼티가 Person 객체를 참조하는 상황에서 Person 객체의 name 프로퍼티를 제거합니다.

const Person = {
  name: '홍길동',
  age: 20,
  address: '서울'
};

const User = {
  person: Person
};

console.log(User.person.name); // 홍길동

delete Person.name;

console.log(User.person.name); // undefined

이를 해결하기 위해서는 구조 분해를 활용하여 프로퍼티가 제거된 새로운 객체를 생성합니다.

 

다음 예제는 구조 분해를 활용하여 Person 객체에서 name 프로퍼티가 제거된 새로운 객체를 생성합니다. 

const Person = {
  name: '홍길동',
  age: 20,
  address: '서울'
};

const {name, ...newPerson} = Person;

console.log(newPerson); // {age: 20, address: '서울'}
console.log(newPerson.hasOwnProperty('name')); // false

이 방법의 단점은 기존 객체의 프로퍼티를 변경할 수 없으며, 항상 새로운 객체를 생성한다는 것입니다.