불변 객체

불변 객체를 만드는 방법

자바스크립트 변수 복사 비교( 기본형데이터, 참조형 데이터)

위 포스팅의 마지막 부분을 보면 알 수 있듯이 참조형 데이터의 '가변'은 데이터 자체가 아닌 내부 프로퍼티를 변경할 때만

성립한다고했다.

데이터 자체 ( 새로은 데이터(객체)를 할당 하면 )를 변경 하면 기본형 데이터와 마찬가지로 기존데이터는 변하지 않는다.

( 새로운 데이터 주소를 저장 할 뿐이다 )

 

이때 내부 프로퍼티를 변경할때마다 새로운 객체를 할당하기로 약속한다면 객체역시 불변성을 확보할 수 있다.

 

객체 가변성의 문제점

얕은 복사

var user = {
    name: 'eastzoo',
    age: 25
};

var newUser = user;
newUser.name = 'human';

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

console.log(user.name, newUser.name); // human human
console.log(user === newUser);		  // true

위와 같이 newUser에 user 객체를 복사하고 난 뒤 newUser.name 을 통해 newUser에 'human'을 할당하였다.

역시나 if 문에서는 user와 newUser가 같다고 보아서 if 문은 실행되지 않았으며,

 

우리는 newUser의 name만 바꿨을 뿐인데 13번째 줄( console.log(user.name, newUser.name) )에서 두 변수의 값은

모두 동일하게 (human human) 이 나오게  되며, 14번째줄 역시 true로 동일하다고 출력됩니다.

 

위와같은 문제는 정보가 변경된 시점에서 알림을 주거나, ui에 표시하는등의 기능을 구현할때

변경 전과 후에 서로 다른 객체를 바라보게 하는 방법으로 해결 할 수 있습니다.

깊은 복사

var user = {
    name: 'eastzoo',
    age: 25
};

var newUser = user;
newUser = {
	...user,
    name: 'human',
}


if (user !== newUser) {
    console.log("유저 정보가 변경되었습니다");	//유저 정보가 변경되었습니다
}
console.log(user.name, newUser.name);			//eastzoo human
console.log(user === newUser);					//false

위의 코드는 프로퍼티의 수정이아닌 스프레드 연산자( ... )를 이용해 새로운 객체를 할당하도록 수정하였습니다.

스프레드 연산자에 대한 내용은 아래 글을 참고

[React] 자바스크립트 문법 정리#2

 

하지만 스프레드 연산자로는 1deps 깊이 만큼만 깊은 복사가 이루어집니다.

위와 같이 newUser변수에 복사된 객체의 nested된 ( language:{ } ) 에 담긴 first 정보를 'japan'으로 바꾸면
출력부에서 볼 수있듯이 user, newUser객체의 language.first의 정보가 같이 바뀐것을 볼 수 있습니다.

 

이러한 문제에 대해서는

json을 이용하거나 lodash와 같은 라이브러리들을 이용해서 깊은 복사를 할 수 있는 방법등이 있습니다.

얕은 복사와 깊은 복사에 대한 자세한 사항은 다른 포스팅에서 다뤄보겠습니다!>