변수 복사 비교(기본형, 참조형)

일반적으로 '기본형도 결국 주솟값을 참조한다'는 사실을 알려주지 않는다. 

 

이런 내부 원리를 잘 이해하는 것은 향후 중급 개발자로 성장하는 과정에서 더 큰 혼란을 느끼지 않기 위한

중요한 초석이 될 것이라고 믿는다.

 

var a = 10;
var b = a;

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

 

변수 영역

주소	1001	1002	1003	1004
데이터	이름:a 값 : @5001	이름:b 값: @5001	이름:obj1 값 : @5002	이름:obj2 값 : @5002

데이터 영역

주소	5001	5002	5003	5004
데이터	값: 10	값: @7103 ~ ?	'ddd'

객체 @5002의 변수 영역

주소	7103	7104	----
데이터	이름:c 값: @5001	이름:d 값: @5003

 

기본형 데이터부터 보면, 변수 영역의 빈 공간 @1001을 확보하고, 식별자를 a로 지정한다.

숫자 10을 데이터 영역에서 검색하고 없으므로 빈 공간 @5001에 저장하고, 이 주소를 @1001에 넣었다. 

기본형 데이터에 대한 변수 선언 및 할당의 종료이다.

 

이제 복사를 보면,, 변수 영역의 빈 공간 @1002을 확보하고 식별자 b로 지정한다.

식별자 a를 검색해, 그 값을 찾아와야 한다. @1001에 저장된 값인 @5001을 들고 @1002에 값으로 대입한다.

 

참조형 데이터를 보면, 변수 영역 빈공간 @1003을 확보하고, 식별자 obj1로 지정한다.

데이터 영역 빈 공간 @5002를 확보하고, 데이터 그룹이 담겨야 하기 때문에, 별도 변수 영역 @7103~ ? 확보해 

그 주소를 값에 저장한다.

@7103에 식별자 c, @7104에 식별자 d로 지정후, c에 대입할 값 10을 데이터 영역에서 검색한다. @5001에 있으므로

이 주소를 @7103 주소에 값으로 대입하고, 문자열 'ddd'는 데이터 영여그이 빈 공간에 새로 만들어 @7104에 값으로 저장한다.

 

참조형 데이터의 복사를 보면, 변수 영역 빈 공간 @1004를 확보하고 , 식별자 obj2로 지정한다.

식별자 obj1을 검색해(@1003) 그 값인 @5002를 들고, @1004에 값으로 대입한다.

 

변수 복사하는 과정은 기본형 데이터와 참조형 데이터 모두같은 주소를 바라보게 되는 점에서 동일하다.

@1001과 @1002는 모두 값이 @5001이 됐고, @1003과 @1004는 모두 값이 @5002이 됏다. 복사 과정 동일하지만,

데이터 할당 과정에서 차이가 있기 때문에, 변수 복사 이후 동작에 큰 차이가 있다.

 

 

변수 복사 과정 이후 - 객체의 프로퍼티 변경시

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

6 b = 15;
7 obj2.c = 20;

1. 6번째 줄에서 데이터 영역에 아직 15가 없으므로 새로운 공간 @5004에 저장하고, 그 주소를 든 채로 변수 영역에서 

식별자가 b인 주소를 찾아 값을 변경한다. @1003의 값이 @5004가 된다.

 

2. 7번째 줄에서는 데이터 영역에 아직 20이 없으므로 새로운 공간 @5005에 저장하고, 그 주소를 든 채,

  다시 변수 영역에서 obj2를 찾고 (@1004), obj2의 값인 @5002가 가리키는 변수 영역에서 다시 c를 찾아(@7103)  

  그 곳에 @5005를 대입한다.

 

기본형 데이터를 복사한 변수 b의 값을 바꾸면, @1002의 값이 달라진 반면, 

참조형 데이터를 복사한 변수 obj2의 프로퍼티 값을 바꾸어도, @1004의 값은 달라지지 않는다.

 

즉, 변수 a와 b는 서로 다른 주소를 바라보게 되었고, 변수 obj1, obj2는 여전히 같은 객체를 바라보고 있는 상태이다.

이를 코드로 표현하면, 

 

a !== b
obj1 === obj2

어떤 데이터 타입이든 변수에 할당하기 위해서는 주솟값을 복사해야 되기 때문에, 자바스크립트의 

모든 자바스크립트의 모든 데이터 타입은 참조형 데이터일수 밖에 없다. 

기본형은 주솟값을 복사하는 과정이 한 번만 이뤄지고,

참조형은 한 단계를 더 거치게 된다는 차이가 있다는 것이다.

 

객체 자체를 변경 하게 되면 어떻게 될까?

 

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

 이런식으로 새로운 객체를 할당하게 되면, 값을 직접 변경하게 되는것이다. 그렇다면, 메모리의 데이터 영역의 

새로운 공간에 새 객체가 저장되고, 그 주소를 변수 영역의 obj2 위치에 저장 하게 될것이다.

객체에 대한 변경임에도 값이 달라지게 되는 것이다.

 

즉, 참조형 데이터가 '가변값' 이라고 설명할 때의 '가변'은 참조형 데이터 자체를 변경하는 것이 아닌,

그 객체의 내부 프로퍼티를 변경할 때만 성립한다.