불변객체

불변객체란?

객체 내부의 속성들을 변경할 때마다 새로운 객체를 만들어서 재할당하며 객체의 불변성을 유지시키는 것
예를 들면 변경 전 데이터들을 따로 저장하거나 바뀐 데이터와 비교를 해야하는 상황에서 사용된다.

얕은 복사와 깊은 복사

• 얕은복사

  얕은 복사란 객체를 복사할 때 위의 예제처럼 원래값과 복사된 값이 같은 참조를 가리키고있는 것을 말한다. 객체안에 객체가 있을 경우 한개의 객체라도 원본 객체를 참조하고 있다면 이를 얕은 복사라고 한다.

const person = {
  name: lee,
  item: {
    money: 100,
  },
};

const person2 = {...person};

person2.item.money = 300;

person === person2 // false
person.item.money === person2.item.money // true

위의 코드에서는 person과 person2가 가진 item객체의 주소가 서로 같기때문에 얕은 복사가 이루어진걸 알 수 있다.

---

• 깊은복사

깊은복사된 객체는 객체안에 객체가 있을 경우에도 원본객체과의 참조가 서로 완전히 분리된 객체를 말한다.
객체를 그대로 복사하여 사용할 경우 기존 객체의 원본 데이터가 더럽혀 질 수 있기 때문에 객체의 깊은 복사는 매우 중요하다.


1. JSON 객체 메소드
JSON.stringify() 메소드는 인수로 객체를 받으며 받은 객체는 문자열로 치환되며, JSON.parse() 메소드는 문자열을 인수로 받으며, 받은 문자열을 객체로 치환한다.

const obj = {
  a: 1,
  b: {
    c: 2,
  },
};

const newObj = JSON.parse(JSON.stringify(obj));

newObj.b.c = 3;

console.log(obj); // { a: 1, b: { c: 2 } }
console.log(obj.b.c === newObj.b.c); // false

2. lodash 모듈의 cloneDeep()

npm install lodash

const lodash = require("lodash");

const obj = {
  a: 1,
  b: {
    c: 2,
  },
  func: function () {
    return this.a;
  },
};

const newObj = lodash.cloneDeep(obj);

newObj.b.c = 3;
console.log(obj); // { a: 1, b: { c: 2 }, func: [Function: func] }
console.log(obj.b.c === newObj.b.c); // false

lodash 모듈을 통해 손쉽게 객체의 깊은 복사를 해결할 수 있다.