javaScript 스프레드 연산자로 객체 다뤄보기

js에서 객체는 동일한 key값(프로퍼티명)이 있는 경우 뒤의 프로퍼티가 첫 번째 프로퍼티를 덮어쓴다.

 

let a = {x: 1, x: 2}
console.log(a) // {x: 2}

 

이를 이용해 객체를 스프레드 연산자로 가져오면서 수정을 해줄 수 있다.

 

let obj = {
  name: "john",
  job: "dev",
};
console.log({ ...obj, job: "devdevdevdevdev" });
// => { name: 'john', job: 'devdevdevdevdev' }

 

혹시라도 객체 안에 객체가 또다시 있는 형식의 데이터에서 수정이 이뤄져야 한다면,

유사하게 아래와 같이 적용해줄 수 있다.

 

let obj = {
  name: "1223",
  job: "222222",
  count: {
    like: 50,
    comment: 50,
  },
};
console.log({ ...obj, count: { like: 10, comment: obj.count.comment } });

// =>
// { name: '1223', job: '222222', count: { like: 10, comment: 50 } }

 

조금 번거로워지지만 정상적으로 객체를 복사하면서 잘 수정돼있는 것을 볼 수 있다.