JS문법 - 데이터타입 심화(level2) - 변수복사의 비교

https://rinny01.tistory.com/36

JS문법 - 데이터타입 심화(level1) - 기본형 데이터와 참조형 데이터

 

LEVEL 1 에 이어서 LEVEL2 변수복사 이후의 비교

객체의 프로피터 변경 vs 객체 자체를 변경의 차이점을 알아보자.

 

우선 복사부터 해보자.

var a = 10; 
var obj1 = { c: 10, d: 'ddd' };

//>>복사 수행
var b = a;
var obj2 = obj1;

 

변수	주소값	1000	1001	1002	1003
	데이터	변수명 : a; 주소값 : @2000	변수명 : obj1 주소값 : @3000~	변수명 : b 주소값 : @2000	변수명 : obj2 주소값 : @3000~
데이터	주소값	2000	2001
	데이터	10	'ddd'
obj1	주소값	3000	3001
	데이터	key값 : c 주소값 : @2000	key값 : d 주소값 : @2001

 

복사까지는 아주 쉽다 이젠.

 

복사 이후 값 : 객체 프로퍼티 변경 했을때

b = 15;
obj2.c = 20;

 

변수	주소값	1000	1001	1002	1003
	데이터	변수명 : a; 주소값 : @2000	변수명 : obj1 주소값 : @3000~	변수명 : b 주소값 : @2002	변수명 : obj2 주소값 : @3000~
데이터	주소값	2000	2001	2002	2003
	데이터	10	'ddd'	15	20
obj1	주소값	3000	3001
	데이터	key값 : c 주소값 : @2003	key값 : d 주소값 : @2001

 

• 데이터값 15가 없으니 2002 주소값에 생성해준다.
• 1003주소값 변수명 b의 참조 주소값을 2002로 변경해준다
• obj2.c=20 을 수행하기 위해 데이터값(20) 추가 (주소값 2003) / obj1의 메모리공간 c가 참조하는 주소값을 2003으로 변경해준다.

😱여기서 대참사가 일어난다.

 

기본형 a,b 는 서로 다른 주소값을 바라보기 때문에 아~무 상관이 없다 ^^

 

하지만 지금 obj1을봐라.. obj2.c = 20;을 진행했을때 obj1.c주소값이 변경되어서

obj1.c = 20이된다.. 

전혀 원하지 않았던 결과이다

obj1 === obj2;

 

이것을 실제로 코드로 쳐보자

 

30번째줄 user === user2 가 같냐고 엄격한 검사를 통해 물어봤는데

true란다...

원하는건 user.name = "rinny" , user2.name="minji" 였는데 말이다

심지어 두개가 같아서 if문도 돌지 않고 그냥 통과해버렸다.

 

그렇다면 어떻게 해야하냐?

 

복사값 이후 값:객체 자체를 변경

속성에 접근해서 변경하지말고 객체 자체를 변경해서 해보자.

var a = 10;
var b = a;
var obj1 = { c: 10, d: 'ddd' };
var obj2 = obj1;

b = 15;
obj2 = { c: 20, d: 'aaa'};

 

복사전 변수, 데이터 들만 넣어봤다.

변수	주소	1000	1001	1002	1003
	데이터	변수명 : a 참조주소 : @2000	변수명 : b 참조주소 : @2000	변수명 : obj1 참조주소 : @3000~	변수명 : obj2 참조주소 : @4000~
데이터	주소	2000	2001
	데이터	10	'ddd'
obj1	주소	3000	3001
	데이터	c 참조주소 : @2000	d 참조주소 : @2001
obj2	주소	4000
	데이터

 

이렇게 객체 자체를 변경해보자.

b = 15;
obj2 = { c: 20, d: 'ddd'};

 

변수	주소	1000	1001	1002	1003
	데이터	변수명 : a 참조주소 : @2000	변수명 : b 참조주소 : @2000	변수명 : obj1 참조주소 : @3000~	변수명 : obj2 참조주소 : @4000~
데이터	주소	2000	2001	2002	2003
	데이터	10	'ddd'	15	'aaa'
obj1	주소	3000	3001
	데이터	c 참조주소 : @2000	d 참조주소 : @2001
obj2	주소	4000	4001
	데이터	c 참조주소 : @2002	d 참조주소 : @2003

 

이렇게하면 obj1.c = 10 / obj2.c = 15 로 원하는 결과값이 나온다

바라보는 데이터 메모리 영역 값이 달라졌기 때문에

 

실제 코드로도 확인해보자

 

 

원하는 결과값을 얻었다!!!

새로운 객체를 생성하여 변환했기 때문에 기존 user의 데이터는 변하지 않았다

즉, 불변성(immutability) 원칙에 따라 기존 객체는 수정되지 않고, 새 객체가 생성되어 변경 사항을 반영했다

 

하지만 이방법 역시 최선의 방법은 아니다.

만약 user의 key가 100개가 있다면 어쩔건데?

 

이에대해 LEVEL3 에서 알아보자!