기본적인 경우 참조형 데이터는 가변적인 속성을 가지고 있다. 이 객체의 가변성이 문제를 일으키는 때가 있어, 불변 객체의 사용이 필요한 경우가 있다.

1-5-1 불변 객체를 만드는 간단한 방법

참조형 데이터의 가변성은 오로지 객체 내부 프로퍼티를 변경할 때만 성립된다. 만약 객체 데이터 자체를 변경하게 되면 기존 데이터는 변하지 않는다.

var obj1 = { a: 1, b: 2}
obj1.a = 3 // 객체가 변경된다(가변성).

obj1 = { c: 100, d: 200 }
// 기존 데이터 { a: 1, b: 2}는 변하지 않고, 새 객체가 생겨나 그 친구의 참조값이 사용된다(불변성).

불변 객체가 필요한 경우는 어떤 때일까?

<aside> 💡 전달받은 객체 내의 프로퍼티를 변경할 때 그 원본 객체는 변경되지 않아야 할 경우 불변 객체가 필요하다.

</aside>

객체의 가변성으로 인한 문제

전달받은 객체의 프로퍼티 변경 시 기존의 객체의 해당 프로퍼티도 변경된다.

var user = {
  name: 'Dokyung',
  gender: 'male'
}

function changeName(user, newName) {
  const newUser = user
  newUser.name = newName
  return newUser
}

var user2 = changeName(user, 'Kim')

if (user !== user2) {
  console.log('유저 정보가 변경되었습니다.') // 출력 안 됨
}

changeName은 전달받은 user 객체의 이름 프로퍼티를 변경하여 새 user 객체를 반환하는 함수이다.

user === user2 // true
user.name // Kim
user2.name // Kim

그런데 기존 user 객체의 값도 같이 변경된 것을 알 수 있다. 따라서 변경 전과 변경 후 각각 바라보는 객체가 서로 다른 객체여야 한다.

객체의 가변성으로 인한 문제 해결 1 - 기존 객체를 복사하지 않고 새 객체를 만들어 반환