[Js] delete 연산자

 deleteAllChildren(childId);
 
  function deleteAllChildren(id) {
    const place = draft[id];
    place.childIds.forEach(deleteAllChildren);
    delete draft[id];
  }

 

리액트를 공부하다가 delete라는 문법을 새로 알게 되었다.

delete draft[id]에서 사용된 delete는 JavaScript의 연산자(operator)로,

객체에서 속성(프로퍼티)을 제거할 때 사용하는 문법

(배열에서는 사용 X)

 

delete 문법

delete object.property;

// or

delete object['propertyName'];

• 객체에서 특정 속성(key)를 완전히 제거함
• 제거된 후에는 그 속성이 undefined도 아니고 아예 존재하지 않게 됨

 

[예제]

const obj = { a: 1, b: 2 };
delete obj.a;
console.log(obj); // { b: 2 }

• a 속성 자체가 없어진 것
• 단순히 값을 undefined로 만드는 것과는 다름

 

[결론]

 deleteAllChildren(childId);
 
  function deleteAllChildren(id) {
    const place = draft[id];
    place.childIds.forEach(deleteAllChildren);  // 자식들 먼저 재귀 삭제
    delete draft[id];                           // 현재 노드 삭제
  }

 

• 이 함수는 어떤 트리 구조의 자식 노드들을 전부 삭제하는 재귀 함수
• delete draft[id]는 draft 객체에서 해당 id 키 자체를 완전히 제거

---

⚠️ 주의점

1. delete는 배열 요소를 제거할 때 쓰면 안 됨  →  (index는 남고 값만 undefined 됨)

const arr = [1, 2, 3];
delete arr[1];
console.log(arr); // [1, <1 empty item>, 3] ❌

  → 배열에서는 splice()를 사용해야 함

 

2. delete는 객체의 프로퍼티만 제거할 수 있음