불변객체 만들기

객체지향 프로그래밍을 할 때 원본 객체를 유지해야할 필요가 있다. 변하지 않는 객체를 불변객체(immutable object)라고 한다.

자바스크립트에서 불변 객체를 만들려면 알아 둬야하는 것이 있다.

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

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

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

console.log("user:", user, "user2:", user2);

user라는 객체를 하나 만들고  user와 새로운 이름을 받아서 새로운 사용자 정보를 만드는 함수로 user2를 만든다.

user: { name: 'Jung', gender: 'male' } user2: { name: 'Jung', gender: 'male' }

user2를 만들었는데 user의 정보도 변경됬다. user.name의 디폴트 값을 Jaename으로 만들었는데 디폴트 값이 변경되면 안된다. 이렇게 변경되는 이유가 뭘까?

 

newUser는 user를 참조하는데 데이터가 저장된 주소를 newUser와 user는 공유한다. changeName 함수를 실행하면 원본객체(user)도 영향을 받는다.

 

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

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

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

console.log("user:", user, "user2:", user2);

user: { name: 'Jaenam', gender: 'male' } user2: { name: 'Jung', gender: 'male' }

코드를 수정했다. 함수를 실행하면 새로운 객체를 생성하고 객체에 필요한 데이터를 입력해서 리턴 한다.

원본 객체에 영향을 미치지 않는다. 같은 주소를 공유해서 생기는 문제는 해결됐다.

 

 

<추가>

문득 든 생각인데 나는 평소 변수를 선언할 때 var을 쓰지 않는다 const와 let을 사용하는데 const를 사용하면 값이 변경된 것을 막을 수 있다. 원본객체를 const로 선언하면 원본객체를 불변객체로 편하게 쓸 수 있는 것 아닐까 라는 생각이 들었다.

 

const user = {
  name: "Jaenam",
  gender: "male",
};

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

const user2 = changeName(user, "Jung");

console.log("user:", user, "user2:", user2);

user: { name: 'Jung', gender: 'male' } user2: { name: 'Jung', gender: 'male' }

 

처음에 작성했던 코드에서 var로 선언한 곳을 const로 변경했다. 하지만 결과는 똑같았다. 추측하자면 변수안에 저장된 주소 값은 변경되지 않았지만 주소로 가면 데이터는 변경이 되는데 const로는 변수에 저장된 값이 변경되지 않는 지만 체크하고 변수에 저장된 주소 값까지 따라가서 확인하지는 않나 보다.

 

 

스프레드 연산자를 사용한 간단한 얕은 복사

const user = {
  name: "Jaenam",
  gender: "male",
};


const user2 = { ...user };