[TIL]객체 불변성, 객체를 immutable하게 다루는 방법, 배열을 immutable하게 다루는 방법

객체 불변성이란?

immutability = 변화가능하지 않음

👉 데이터의 원본이 훼손되는 것을 막는다. 

 

 

<원시데이터타입> => 불변 (immutability), 필요할때만 새로 만든다. 

• String
• Number
• Boolean
• Null
• Undefined
• Symbol

<객체> => 가변 (mutability), 생성할 때마다 새로 만든다. 

• Object
• Array
• Function

let p1 = 1;
let p2 = 1;
console.log(p1, p2, p1 === p2);

// 1,1,true
// 원시데이터 타입은 값이 같으면 같은 곳을 가리켜서 true다.

let o1 = {name:'hailie'}
let o2 = {name:'hailie'}
console.log(o1, o2, o1 === o2);

// {name:'hailie'}, {name:'hailie'}, false
// 값은 같지만 서로 별도의 데이터를 만들기 때문에 false이다.

let o3 = o1;
o3.name = 'coco'

console.log('o3:',o3, 'o1:',o1)
// o3: {name: 'coco'} o1: {name: 'coco'}
// o3의 value를 바꿨지만 본의아니게 o1의 value까지 바꿔버렸다!

 

let o1 = {name:'hailie'}
let o2 = {name:'hailie'}

let o3 = o1;
o3.name = 'coco'

console.log('o3:',o3, 'o1:',o1)

// o3: {name: 'coco'} o1: {name: 'coco'}
// o3의 value를 바꿨지만 본의아니게 o1의 value까지 바꿔버렸다!

 

---

⭐️객체를 immutable하게 다루는 방법⭐️

복사한 것을 수정하자!

 

let o1 = {name:'hailie'}
let o2 = Object.assign({},o1)

o2.name = 'coco'
console.log(o1 === o2) //false 다른 곳을 보고 있음

Object.assign({},o1)은 빈 객체와 뒤에 따라오는 객체들을 병합해서 하나의 객체로 만들어서 리턴하는 역할을 한다. 

 

 

---

Nested object 중첩된 객체로 더 공부해보기

let o1 = {name:'hailie', score:[1,2]}
let o2 = Object.assign({},o1)

o2.score.push(3)

console.log('o1:', o1, 'o2:', o2)

// o1: {name: 'hailie', score: Array(3)} 
name: "hailie" score: (3) [1, 2, 3]

o2: {name: 'hailie', score: Array(3)}
name : "hailie" score: (3) [1, 2, 3]


console.log(o1 === o2, o1.score === o2.score)
// false ture

 

Object.assign()으로 객체를 복사하면 객체의 프로퍼티들만 복제가 되는거고, 그런데 그 프로퍼티 중에 value가 object 형인 경우에는 값을 복사하는게 아니라 위치를 복제한다.

 

 

그래서 push를 사용하지말고 concat을 사용해서 값을 복제해서 사용해야한다. 

(push은 원본 배열을 건드리고, concat은 원본 배열을 복제해서 인자로 들어오는 값을 추가한다. )

 

let o1 = {name:'hailie', score:[1,2]}
let o2 = Object.assign({},o1)

o2.score = o2.score.concat(3)

or

o2.score = o2.score.concat()
o2.score.push(3)


console.log('o1:', o1, 'o2:', o2)

// o1: {name: 'hailie', score: Array(2)} 
name: "hailie" score: (3) [1, 2]

o2: {name: 'hailie', score: Array(3)}
name : "hailie" score: (3) [1, 2, 3]

 

 

Object.assign()는 배열이 가진 특수한 기능이 사라진다.
그래서 배열의 경우에는 concat, slice, Array.from()을 사용해야 immutable하게 다룰 수 있다. 

 

---

원본 객체를 수정하지 못하도록 원척적으로 막는 방법 👉 Object.freeze

let o1 = {name:'hailie'}
Object.freeze(o1);
o1.name = 'coco'

console.log(o1);
// {name:'hailie'}

 

 

Object.freeze는 객체의 프로퍼티를 얼린다. 

그런데 그 프로퍼티의 값이 객체라면 얼리지 못한다. 

let o1 = {name:'hailie', score:[1,2]}
Object.freeze(o1);
o1.name = 'coco'
o1.city = 'seoul'
o1.score.push(3)

console.log(o1);
// {name:'hailie', score:[1,2,3]}

 

 

그래서 직접 거기까지 가서 얼려야한다.

let o1 = {name:'hailie', score:[1,2]}
Object.freeze(o1);
Object.freeze(o1.score);
o1.score.push(3)

console.log(o1);
// typeerror

 

---

const vs. Object.freeze

const o1 = {name:'hailie'}
Object.freeze(o1)
const o2 = {name:'hailie'}

o1 = o2 👉 const가 발동해서 에러가 나온다. o1가 가리킬 대상을 못바꾸게 한다. 
o1.name = 'lee' 👉 Object.freeze()가 발동해서 값 안바뀐다. 값 자체를 못바꾸게 한다.

 

👉 const = 가리킬 대상을 못바꾸게 한다. 
👉 Object.freeze() =  값 자체를 못바꾸게 한다. 

 

 

---

불변성은 원본을 훼손하지 않고 복제를 해서 사용하면 원본과 복제본은 서로 독립된 상태이기 때문에 서로에게 영향을 주지 않아서, 결과적으로 애플리케이션이 예기치 않게 동작하는 side effect를 줄일 수 있다. 

그렇다고 불변함이 가변함보다 우월한 것은 아니다!

 

다만, 컴퓨터 분야가 워낙 유연하기 때문에 (가변이기 때문에) 생기는 문제를 완화하기 위해서 불변이 강조될 뿐이다!

 

 

---

추가로 공부해보고 싶은 것

객체지향 => 객체를 부품으로 사용해서 애플리케이션을 만들어가는 패러다임

함수형 프로그래밍 => 함수를 부품으로 사용하는 패러다임 (불변성을 잘 활용한 순수함수를 만들어보자)

 

 

불변성 라이브러리 => 성능 문제를 줄여줄 수 있다. 

immutable

immer

mori