불변 객체

불변 객체 (Immutable object)

• 불변 객체는 말 그대로 변하지 않는 객체를 의미합니다.
• 값으로 전달받은 객체를 변경하더라고 원복 객체가 변하지 않아야 하는 경우가 존재합니다.
  ex) 정보가 바뀐 시점에 알림을 보내야 하는 경우
• 아래는 user를 불변 객체로 만들어 보려고 합니다.

var user = {
  name: 'Jungsoo',
  gender: 'male'
};

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

var user2 = changeName(user, 'Jung');

if (user !== user2) {
  console.log('유저 정보가 변경되었습니다.');
}
 
console.log(user.name, user2.name); // Jung Jung
console.log(user === user2); // true

위처럼 코드를 작성한다면 user의 name이 변경되며 불변 객체가 될 수 없습니다.
user의 name이 왜 변경되는지 모르겠다면 참조형 데이터 타입를 참고해주세요.

var changeName = function(user, newName){
	return {
		name: newName,
		gender: user.gender
	};
};

var user2 = changeName(user, 'Jung');

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

user가 변경되진 않지만 기존 프로퍼티인 gender를 하드코딩으로 입력하여 객체 정보가 많을수록 비효율적입니다.

var copyObject = function(target){
	var result = [];
	for (var prop in target) {
		result[prop] = target[prop];
	}
	return result;
}

var user2 = copyObject(user);
user2.name = 'Jung';

user도 변경되진 않고, 프로퍼티가 많아지더라도 문제 없이 동작합나다.

마음만 먹으면, 또는 실수로 user 객체에 대한 정보는 얼마든지 변경 가능하기에
시스템적으로 변경을 못 하도록 제약을 걸 수 있도록 immutable.js, baobab.js 등과 같은 라이브러리가 등장했습니다.

하지만 얕은 복사만 수행한다는 점이 아직 아쉬운 부분입니다.
해당 부분에 대한 보완은 다음 글에서 작성하겠습니다.