[JavaScript] rest & delete 연산자 / 불변성을 유지하며 Object에서 내부 key 삭제하기

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/delete

delete 연산자 - JavaScript | MDN

 

개발을 하다보면 parameter로 사용된 객체에서 더이상 사용되지않거나, 삭제하고 다른 용도로 사용하고 싶어 특정 key값만 삭제하려는 경우가 있다. 이때 해당 Key를 삭제하며 불변성을 유지하며 사용하는 법에 대하여 작성하였습니다.

 

// (delete)

아래는 gaetaeng이라는 객체가 존재하고 어차피 없는 money 라는 key를 삭제하는 코드입니다.

const gaetaeng = {
	name : "개탱",
    age : "만28",
    money : 0,
};

console.log("기본 : ", gaetaeng)

delete gaetaeng.money

console.log("삭제 후 : ", gaetaeng)

 

확인해보면 gaetaeng이라는 객체에서 money라는 Key 값이 정상적으로 삭제된 것을 확인할 수 있습니다.

 

하지만 해당 방식은 간단하게 Key를 지울 수 있지만

const 라는 상수 객체 원본의 key를 지우게 됨으로서 불변성(immutable)이 지켜지지 않았다라고도 볼 수 있습니다.

 

이때 이 불변성을 지킬 수 있는 방법이

spread 문법과 비슷한 rest 라는 문법이 있습니다.

 

// (rest)

rest는 spread와 모양은 비슷하지만 매우 다릅니다.

객체, 배열, param등에서 사용이 가능한데 아래 예제들을 통해서 확인할 수 있습니다.

 

//객체에서의 REST

const gaetaeng = {
	name : "개탱",
    age : "만28",
    money : 0,
};

console.log("기본 : ", gaetaeng)

const {money, ...update_gaetaeng} = gaetaeng
console.log("spread 적용 후 : ", gaetaeng)
console.log("spread 적용 후 : ", update_gaetaeng)

이렇게 gaetaeng이라는 객체의 불변성은 유지해주며

money라는 key를 삭제한 update_gaetaeng 이라는 새로운 객체를 만들어 내용을 할당해줄 수 있습니다.

 

 

 

// 배열에서의 REST

const arr = [0, 1, 2, 3, 4, 5, 6];

const [zero, one, ...rest] = arr;

console.log(zero);
console.log(one);
console.log(rest);

 

 이 rest 문법을 이용하여 객체의 key를 삭제해준다면

불변성 유지에 매우 용이할 것으로 보여집니다.