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

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

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

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

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

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

console.log(user.name, user2.name);	// bbq, bbq
console.log(user === user2)			// true

새로운 객체를 만들면 원본 객체가 원본을 유지하지 못하고 수정이 됩니다.

 

 

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

			var user = {
				name: "kyochon",
				gender: "male",
			};

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

			var user2 = changeName(user, "bbq");

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

			console.log(user.name, user2.name); // kyochon, bbq
			console.log(user === user2); // false

changeName 함수가 새로운 객체를 반환하도록 수정했습니다

이제 user와 user2가 서로 다른 객체이므로 안전하게 변경 전과 후를 비교할 수 있습니다

하지만 기존 객체 프로퍼티를 하드코딩으로 입력했으며 대상 객체의 정보가 많아질 수록 입력해야 할 정보도 많아질 것입니다

대상 객체의 프로퍼티 개수와 상관 없이 모든 프로퍼티를 복사하는 함수를 만드는 게 좋을 것입니다

 

 

copyObject를 이용한 객체 복사

			var copyObject = function (target) {
				var result = {};
				for (var prop in target) {
					result[prop] = target[prop];
				}
				return result;
			};
			var user = {
				name: "kyochon",
				gender: "male",
			};

			var user2 = copyObject(user);
			user2.name = "bbq";

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

			console.log(user.name, user2.name); // kyochon, bbq
			console.log(user === user2); // false

copyObject는 for in문법을 이용해 result 객체에 target 객체의 프로퍼티드를 복사하는 함수입니다

이제 user객체 내부의 변경이 필요할 땐 copyObject 함수를 사용하기로 합의하고 그 규칙을 지킨다는 전제 하에서는 user객체가 곧 불변 객체라 볼 수 있습니다

하지만 그 규칙을 지키리라는 인간의 신뢰에만 의존하는 것은 얕고 깨지기 쉽습니다