[JavaScript] 기본형 데이터와 참조형 데이터의 변수 복사 비교

동작 방식은 이전 글을 참고해주세요

[JavaScript] 기본형 데이터와 참조형 데이터 비교

 

변수 복사 비교

var a = 10;
var b = a;

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

 

기본형

[ a ]
변수 영역의 빈 공간 @1001을 확보하고 식별자를 a로 지정한다.

데이터 영역에서 숫자 10을 찾고, 없다면 빈 공간 @5001에 10을 저장하고 이 주솟값을 @1001에 넣는다.

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

식별자 a에 값 @5001 주솟값을 @1002에 대입한다.

 

참조형

[ obj1 ]
변수 영역의 빈 공간 @1003을 확보해 식별자를 obj1로 지정한다.

데이터 영역의 빈 공간 @5002을 확보하고, 데이터 그룹이 담겨야 하기 때문에 별도의 변수 영역 @7103 ~ ? 을 확보해 주소를 저장한다.

객체 @5002 변수 영역에 @7103, 식별자 c 이름으로 선언하고 데이터 영역에 있는 10의 주솟값을 가져온다.

객체 @5002 변수 영역에 @7104, 식별자 d 이름으로 선언하고 데이터 영역에 'ddd'가 없으므로 새로 선언하고 주솟값을 가져온다.

[ obj2 - 복사 ]
변수 영역의 빈 공간 @1004을 확보하고 식별자를 obj2로 지정한다.

식별자 obj1에 값 @5002을 @1004에 대입한다.

 

결과

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

복사 과정은 동일하지만 데이터 할당 과정에서 이미 차이가 있기 때문에 복사 이후의 동작에도 차이가 발생한다.

 

---

변수 복사 이후 값 변경 결과 비교(1) - 객체의 프로퍼티 변경 시

var a = 10;
var b = a;

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

b = 15; 	// 1
obj2.c = 20;	// 2

변수 복사 비교 이후에 값을 변경하는 과정이다.

코드 1에서 데이터 영역에서 15를 찾고 없으므로 @5004에 새로운 공간을 만들어 저장한 뒤 주솟값을 @1002에 넣는다.

코드 2에서 데이터 영역에서 20을 찾고 없으므로 @5005에 새로운 공간을 만들어 저장한 뒤 주솟값을 @7103에 대입한다.

 

결과

a !== b
obj1 === obj2

기본형 데이터를 복사한 변수 b의 값을 변경하였더니 @1002의 값이 달라졌다.
참조형 데이터를 복사한 변수 obj2의 프로퍼티의 값을 변경하였더니 @1004의 값을 달라지지 않았다.

이 결과가 기본형과 참조형 데이터의 가장 큰 차이점이다.

 

---

변수 복사 이후 값 변경 결과 비교(2) - 객체 자체를 변경 시

var a = 10;
var b = a;

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

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

변수 복사 비교 이후에 값을 변경하는 과정이다.

 

변수 영역 @1004의 값이 변경되었다.

데이터 영역의 빈 공간 @5006을 확보하고, 데이터 그룹이 담겨야 하기 때문에 별도의 변수 영역 @8204 ~ ? 을 확보해 주소를 저장한다.

객체 @5006 변수 영역에 @8204, 식별자 c 이름으로 선언하고 데이터 영역에 @5005 주솟값에 20을 저장하고 주솟값을 @8204에 저장한다.

객체 @5006 변수 영역에 @8205, 식별자 d 이름으로 선언하고 데이터 영역에 'ddd'가 이미 있으므로 @5003의 값을 @8205에 저장한다.

 

 

결과

참조형 데이터가 '가변값'이라고 설명할 때의 '가변'은
참조형 데이터 자체를 변경할 경우가 아닌, 그 내부의 프로퍼티를 변경할때만 성립한다.

---

* 이 글은 코어 자바스크립트 책 내용을 참고하여 작성하였습니다.