JavaScript에서 객체 속성을 불변 제거

우리 중 대부분은 어떤 이유로든 객체 속성을 제거해야 하는 시점이 있습니다(예: 런타임 조건이 성공적으로 평가되었는지, 서버 응답이 수신되었는지 등). 이러한 경우 가장 일반적으로 사용되는 접근 방식은 해당 속성이 있는 경우 해당 속성을 개체에서 제거하려고 시도하는 내장 JavaScriptdelete 연산자를 사용하는 것입니다. 이것은 언어에서 객체의 속성을 제거하는 완벽하게 합리적인 방법이지만 주의하지 않으면 발을 쏠 수 있는 몇 가지 주의 사항이 있습니다. 이 접근 방식에서 가장 눈에 띄는 문제는 delete 연산자의 본질적으로 변경 가능한 특성에 있습니다. 기본 개체 참조를 변경하므로 원래 개체가 변경되고 원치 않는 부작용이 발생합니다.

이 기사에서는 먼저 delete 연산자를 사용하여 개체에서 속성을 제거하는 예를 제공하고 동일한 작업을 수행하기 위해 나머지 연산자와 함께 개체 구조 분해를 사용하는 더 안전한 대체 접근 방식을 제시합니다.

NOT RECOMMENDED 변경 가능한 접근 방식

먼저 delete 연산자를 사용하여 객체 리터럴에서 속성을 제거하겠습니다.

const person = {
    name: "foo",
    age: 34
}

function removeObjPropertyMutably(obj, key) {
    delete obj[key]
}

removeObjPropertyMutably(person, "name")

console.log(person) // prints out { age: 34 }

그러나 delete 연산자를 사용할 때 지적해야 할 몇 가지 단점이 있습니다.

메모리의 개체 참조를 변경합니다(즉, 새 복사본을 만들지 않음).

한 번에 하나의 속성만 제거할 수 있습니다. 즉, 사용 사례에서 여러 속성을 제거해야 하는 경우 코드는 다음과 같이 보일 것입니다.

const person = {
  name: "joe",
  age: 33,
  email: "[email protected]",
  isOnline: false,
  hasPets: true
}

delete person.email
delete person.isOnline
delete person.hasPets

RECOMMENDED 변경 불가능한 접근 방식

이제 구조화 및 나머지 연산자/구문을 사용하여 객체 속성을 제거하는 더 좋고 안전한 대안을 살펴보겠습니다.

const person = {
    name: "foo",
    age: 34
}

function removeObjPropertyImmutably(obj, key) {
    const { [key]: removedProp, ...objRest } = obj
    return objRest
}

const updatedPerson = removeObjPropertyImmutably(person, "name")

console.log(updatedPerson) // prints out { age: 34 }

…objectRest 를 수행할 때 해당 속성을 동적으로 구조화하고 별칭을 지정하여 대상 속성( person )을 제거한 후 전달된 객체(이 경우 name )의 새 복사본을 생성합니다. 이 경우 앨리어싱은 제거하려는 키의 값을 보유할 변수의 이름을 지정하는 것을 의미합니다. 이렇게 하면 나중에 필요할 때 참조할 수 있습니다.

이 접근 방식은 단일 작업을 통해 여러 속성을 동시에 삭제할 수 있다는 이점이 있습니다. 개인적으로 나는 이것이 매우 편리하고 실용적이라고 생각합니다.

const person = {
  name: "joe",
  age: 33,
  email: "[email protected]",
  isOnline: false,
  hasPets: true
}
const { email, isOnline, hasPets, ...personRest} = person

위의 코드 스니펫에서 email , isOnline 및 hasPets 제거하려는 키를 구조화하고 있음을 알 수 있습니다. 필요한 경우 액세스할 수 있는 변수로 메모리에 보관됩니다.

따라서 다음에 객체에서 속성을 제거하는 사용 사례가 있을 때 변경할 수 없고 안전한 방식으로 제거할 수 있습니다. :)

마지막 생각들

마무리하면 JavaScript에서 객체 속성을 제거해야 할 때마다 가변delete 연산자를 통해 수행하는 것과 비교할 때 더 깨끗하고 안전한 옵션이라고 생각하기 때문에 구조화 및 나머지 구문을 사용하기로 결정했습니다. 현재 진행 중인 프로젝트에서 어떤 접근 방식을 사용하고 있습니까? 여기에 언급된 두 가지 외에 다른 (더 나은?) 대안이 있습니까? 당신이 무슨 생각을하는지 제게 알려주세요.

진정하시고 다음편에서 만나요!

추신: 이 두 기술의 Big O를 측정하지 않았으므로 공유하고 싶은 사람이 있으면 비교 벤치마크를 듣게 되어 기쁩니다. :)