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

어떤 상황에서 불변 객체가 필요할까? → 값으로 전달받은 객체에 변경을 가하더라도 원본 객체는 변하지 않아야 하는 경우

ex)

var user ={
    name: 'Jaenam',
    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

1번째 줄에서 user 객체를 생성하고 12번째 줄에서 user 객체의 프로퍼터를 ‘Jung’으로 바꾸는 함수 changeName을 호출해서 그 결과를 user2 변수에 담았다.

14번째 줄에서 user변수와 user2 변수가 서로 같지 않다는 조건이 성립하면 15번째 줄의 내용이 출력되겠지만 실제로는 출려 없이 통과합니다. 17번째 줄에서 두 변수의 name 프로퍼티 모두 ‘Jung’으로 출력되고, 18번째 줄에서는 두 변수가 서로 동일하다고 한다.

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

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

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

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

14번째 줄처럼 정보가 바뀐 시점에 알림을 보내야 한다거나, 바뀌기 전의 정보와 바뀐 후의 정보의 차이를 보여주기 위해 코드를 위와 같이 고쳤다.

→ changeName 함수가 새로운 객체를 반환하도록 수정 → 이제 user와 user2는 서로 다른 객체이므로 안전하게 변경 전과 후를 비교할 수 있다.

1-5-2 얕은 복사와 깊은 복사

얕은 복사는 바로 아래 단계의 값만 복사하는 방법이고, 깊은 복사는 내부의 모든 값들을 하나하나 찾아서 전부 복사하는 방법이다.