javascript - Immutability

Immutability는 데이터의 원본을 훼손하는 것을 막는 것

객체의 복사

원본 데이터를 훼손하지 않고 데이터를 다룬다.

const obj = {
  name: "kim"
}
const obj2 = Object.assign({}, obj)
obj2.name = "lee"
console.log(obj2)  // { name: 'lee' }

obj을 복사한다고 했을 때 Object에 assgin이라는 메서드를 주면 된다. 첫 번째 인자에 빈 객체를 그리고 두 번째 인자에 복사할 객체를 주면 객체가 복사된다.

nested object

객체는 프로퍼티로 구성되어있다. 그런데 객체의 값 중 하나가 객체인 경우 중첩된 객체라고 한다. 중첩된 객체의 복사을 하는 경우는

const obj1 = {
  name: "kim",
  score: [1,2]
}

obj1의 프로퍼티로 name과 score가 있다. name의 경우 string이므로 지정된 메모리에 저장되고 score는 배열이므로 다른 곳에 저장된다. score의 값은 그 배열의 위치를 저장한다.

const obj1 = {
  name: "kim",
  score: [1,2]
} 
const obj2 = Object.assign({},obj1)

이렇게 Object.assign를 통해 obj2를 복제할 경우 객체의 프로퍼티만 복제된다. vlaue가 object인 경우 값을 복제하는 것이 아니라 위치를 복제한다. 만약 obj2.score.push(3) 할 경우 원본에도 추가된다.

그럴 경우 concat을 사용해야 한다. push는 원본을 바꾸지만 concat은 원본을 복제하고 인자로 들어가는 값을 추가한다. 인자가 없으면 복제만 된다.

obj2.score = obj2.score.concat()

배열의 경우 slice, Arrayfrom, concat 복제를 해주는 메소드를 사용하면 된다.

불변 함수

function fn(person){
  person.name = "lee"
}

const obj1 = {
  name: "kim"
}

fn(obj1)

console.log(obj1) // { name: 'lee' }

함수 fn은 인자의 name 프로퍼티를 변경한다. 원본을 훼손하지 않고 함수를 실행하려면

function fn(person){
  person = Object.assign({}, person)
  person.name = "lee"
  return person
}

const obj1 = {
  name: "kim"
}
const obj2 = fn(obj1)


console.log(obj1 , obj2) // { name: 'kim' } { name: 'lee' }

먼저 함수 fn을 person을 Object.assign으로 복제하고 person을 리턴값으로 한다. 그리고 obj2에 함수 fn의 리턴값을 할당한다. 복제한 객체를 리턴하면 된다. 혹은 obj2를 복제하고 복제값을 fn에 인자로 주면된다.

Object.freeze

객체 수정을 불가하게 만드는 메서드다.

const obj1 = {
  name: "kim",
  score:[1,2]
}
Object.freeze(obj1)
obj1.name = "lee"
console.log(obj1) // { name: 'kim', score: [ 1, 2 ] }

freeze 해준 객체는 수정이 불가능하다. 문제는 중첩 객체들이다. freeze는 객체의 프로퍼티를 얼리는 것이다. 만약 프로퍼티의 값이 객체면 맹점이 발생한다. 이런 경우에는 freeze 인자에 객체가 담긴 프로퍼티까지 넣어야 한다.

출처 : https://www.inflearn.com/course/javascript-immutability/lecture/34717