데이터 타입-3(feat.코어 자바스크립트)

5. 불변객체

🔥 불변 객체를 만드는 간단한 방법

정리 : 참조형 데이터의 '가변'은 데이터 자체가 아니라 내부 프로퍼티를 변경할 때만 성립합니다.

🧐 객체 데이터 자체를 변경하고자 하면 ???

기본형 데이터와 마찬가지로 기존 데이터는 변하지 않습니다. (새로운 객체가 만들어저서 새로운 주소를 참조할 따름...)

객체의 가변성에 따른 문제점

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

var changeName = function (user, newName) {
	var newUser = user; // user 객체의 주소를 newUser의 변수의 값에 저장한다.
  	newUser.name = newName;
  	return newUser; // 기존 user 객체와 newUser객체는 같은 주소를 가르킨다.
};

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

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

객체의 가변성에 따른 문제점의 해결방법

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

// 새로운 객체를 return 한다.
var changeName = function (user, newName) {
  	return {
    	name: newName,
      	gender: user.gender
    };
};

//새로운 객체를 데이터 영역에 저장하고 그 주소를 변수 user2에 값으로 저장한다.
var user2 = copyObject(user);
user2.name = 'Jung';

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


//기존 정보를 복사해서 새로운 객체를 반환하는 함수(얕은 복사)
var copyObject = function(target){
	var result = {};
  for (var prop in target){
  	result[prop] = target[prop];
  }
  return result;
};

copyObject 함수를 통해 간단하게 객체를 복사하고 수정하는 데 성공했습니다!
협업 개발자들은 이제 copyObject 함수로 user객체 내부 변경이 필요할때 쓸수 있게 협의 하면 됩니다.
즉 user객체가 불변 객체 라고 볼 수 있습니다.

추가 대안으로 immutable.js, baobab.js 등의 라이브러리를 사용 할 수 있습니다.

---

🔥 얕은 복사(shalloow copy)와 깊은 복사(deep copy)

얕은 복사
중첩된 객체에서 참조형 데이터가 저장된 프로퍼티를 복사할 때 그 주소값만 복사한다.
즉 해당 프로퍼티에 대해 원본과 사본이 모두 동일한 참조형 데이터의 주소를 가리키게 된다.
따라서, 사본을 바꾸면 원본도 바뀌고 원본을 꾸면 사본도 바뀐다.

깊은 복사
어떤 객체 내부의 모든 값을 복사해서 완전히 새로운 데이터를 만들고자 할 때 사용한다.
객체의 프로퍼티 중 그 값이 기본형 데이터일 경우 그대로 복사하면 되지만 참조형 데이터는 다시 그 내부의 프로퍼티들을 또 복사해야한다.
이 과정을 참조형 데이터가 있을때마다 재귀적으로 수행해야만 비로소 깊은 복사가 된다.

객체의 깊은 복사(deep copy)를 수행하는 범용 함수

var copyObjectDeep = function(target) {
  var result = {};
  if (typeof target === 'object' && target !== null) {  // typeof가 null 도 object로 반환하기 때문
    for (var prop in target) {
      result[prop] = copyObjectDeep(target[prop]);
    }
  else {
    result = target;
  }
  return result;
};

JSON을 활용한 간단한 깊은 복사

var copyObjectViaJSON = function (target) {
  return JSON.parse(JSON.stringify(target));
};