1장. 데이터 타입(04. 기본형 데이터와 참조형 데이터 - 변수 복사 비교)

변수 복사 비교

// 1.
var a = 10;
var b = a;

// 2.
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

1. 기본형 데이터의 변수 복사
   • 변수 영역의 공간을 확보합니다. (@1001)
   • a라는 식별자를 지정합니다.
   • 데이터 영역에서 10이라는 데이터를 검색합니다. → 존재하지 않음
   • 데이터 영역의 공간을 확보합니다. (@5001)
   • 확보한 공간(@5001)에 숫자형 데이터 10을 할당합니다.
2. 참조형 데이터의 변수 복사
   • obj1
     • 변수 영역의 공간을 확보합니다. (@1003)
     • obj1이라는 식별자를 지정합니다.
     • 할당할 값을 확인 → 프로퍼티 그룹이기 때문에 데이터 영역을 확보합니다. (@5002)
     • obj1의 프로퍼티 데이터를 저장할 임의의 주소 공간을 확보합니다. (@5002 → @7103 ~ ?)
     • @7103에는 c라는 식별자를 지정합니다.
     • c 식별자에 할당할 10이라는 값이 데이터 영역에 있는지 검색합니다. → @5001에 존재
     • c 식별자에 @5001 주소값을 할당합니다.
     • @7104에는 d라는 식별자를 지정합니다.
     • d 식별자에 할당할 'ddd'라는 값이 데이터 영역에 있는지 검색합니다. → 존재하지 않음
     • 데이터 영역의 공간을 확보합니다. (@5003)
     • 확보한 공간(@5003)에 문자열 데이터 'ddd'를 저장합니다.
     • d 식별자의 값에 해당 주소(@5003)을 저장합니다.
   • obj2
     • 변수 영역의 공간을 확보합니다. (@1004)
     • obj2라는 식별자를 지정합니다.
     • 할당할 값을 확인 → 식별자 obj1이 가리키는 주소입니다. (@1003)
     • 값으로 @5002를 할당합니다.

 

객체의 프로퍼티 변경 시

// 1.
var a = 10;
var b = a;

b = 15;

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

obj2.c = 20;

• 변수 영역

주소	1001	1002	1003	1004	1005
데이터	이름: a 값: @5001 (값이 달라짐)	이름: b 값: @5001 @5004 (값이 달라짐)	이름: obj1 값: @5002 (값이 달라지지 않음)	이름: obj2 값: @5002 (값이 달라지지 않음)

• 데이터 영역

주소	5001	5002	5003	5004	5005
데이터	10	@7103 ~ ?	'ddd'	15	20

• 객체 @5002의 변수 영역

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

1. 기본형
   • b 식별자에 재할당할 15라는 데이터가 데이터 영역에 있는지 검색합니다. → 존재하지 않음
   • 데이터 영역의 공간을 확보합니다. (@5004)
   • 확보한 공간(@5004)에 숫자형 데이터 15를 저장합니다.
   • b 식별자에 해당 주소(@5004)를 저장합니다.
2. 참조형
   • obj2의 프로퍼티 식별자 c에 재 할당할 20이라는 데이터가 데이터 영역에 있는지 검색합니다. → 존재하지 않음
   • 데이터 영역의 공간을 확보합니다. (@5005)
   • 확보한 공간(@5005)에 숫자형 데이터 20을 저장합니다.
   • c 식별자에 해당 주소(@5005)를 저장합니다.

a !== b // @5001 !== @5004
obj1 === obj2 // @5002 === @5002

• 기본형은 주소값을 복사하는 과정이 한번만 이뤄집니다.
• 참조형은 한 단계를 더 거치게 됩니다.

 

객체 자체를 변경했을 때

// 1.
var a = 10;
var b = a;

b = 15;

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

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

• 변수 영역

주소	1001	1002	1003	1004	1005
데이터	이름: a 값: @5001 (값이 달라짐)	이름: b 값: @5001 @5004 (값이 달라짐)	이름: obj1 값: @5002 (값이 달라짐)	이름: obj2 값: @5002 @5006 (값이 달라짐)

• 데이터 영역

주소	5001	5002	5003	5004	5005	5006
데이터	10	@7103 ~ ?	'ddd'	15	20	@8204 ~ ?

• 객체 @5002의 변수 영역

주소	7103	7104	...	8204	8205
데이터	이름: c 값: @5005	이름: d 값: @5003		이름: c 값: @5005	이름: d 값: @5003

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

 

 

 

출처 : 코어 자바스크립트

코어 자바스크립트 - YES24

---

잘못되어 수정해야 하거나 피드백 주실 부분이 있으시면 언제나 환영입니다!