참조형 데이터의 변수 할당 과정
var obj = {
a : 1;
b : 'bbb',
}
| 변수 영역 | 주소 | 1001 | 1002 | 1003 | 1004 |
|---|---|---|---|---|---|
| 데이터 | obj1 / 7103~ | ||||
| 데이터 영역 | 주소 | 5001 | 5002 | 5003 | 5004 |
| 데이터 | 1 | ‘bbb’ |
| 프로퍼티 영역 | 주소 | 7103 | 7104 | 7105 | 7106 |
|---|---|---|---|---|---|
| 데이터 | a / 5001 | b / 5002 |
- 참조형 데이터를 위한 별도 공간 존재
- 객체의 변수(프로퍼티) 영역
과정
- 프로퍼티 a와 프로퍼티 b 세팅
- a는 1이라는 데이터가 필요 → 데이터 영역에서 찾자 → 주소 5001 가지고 옴
- b도 같은 과정 → 주소 5002 가지고 옴
- 세팅이 된 프로퍼티 영역의 주소들을 변수 영역으로 가지고 옴
참조형 데이터가 불변하지 않은 이유
- 데이터 영역에 저장된 값은 여전히 불변값이지만 별도 영역은 얼마든지 변경이 가능하기 때문이다! obj1 의 데이터를 변경했을 때 데이터 영역의 새로운 주소에 변경 값을 넣고 그 주소를 프로퍼티 영역으로 가져올 때 변경이 가능하다.( ex) 7103의 a / 5002 →a / 5003으로)
중첩 객체의 할당
중첩 객체 : 객체 안에 또 다른 객체가 들어가는 것
var obj = {
x : 3,
arr : [3,4,5]
}| 주소 | 1001 | 1002 | 1003 | 1004 | 1005 | … |
|---|---|---|---|---|---|---|
| 데이터 | obj / 7103~ |
| 주소 | 5001 | 5002 | 5003 | 5004 | 5005 | … |
| 데이터 | 3 | 4 | 5 | | | |
| obj | 주소 | 7103 | 7104 | … |
|---|---|---|---|---|
| 데이터 | x /5001 | arr / 8104~ |
| arr | 주소 | 8104 | 8105 | 8106 | … |
|---|---|---|---|---|---|
| 0 / 5001 | 1 / 5002 | 2 / 5003 |
-
변수 영역 1001에 obj 저장 별도의 영역에 x, arr 저장(7103, 7104)
-
x의 값 3 데이터 영역에 저장 5001 주소 가지고 오기
-
arr을 위한 또 다른 별도 영역에 인덱스 0,1,2 저장
-
arr의 값인 3 4, 5를 데이터 영역에 저장하기 위해 빈자리를 훑는다
-
3은 이미 5001에 있고 4, 5 저장 (5002, 5003)
-
주소 가지고 오기
-
완성된 arr 주소 넣어주기(8104~)
-
완성된 obj 주소 넣어주기 (7103~)
-
참조 카운트가 0 이면 더 이상 사용되지 않기때문에 가비지 컬렉터에 의해 메모리에서 제거된다.
변수 복사의 비교
// STEP01. 선언
var a = 10; //기본형
var obj1 = { c: 10, d: 'ddd' }; //참조형
// STEP02. 복사를 수행
var b = a; //기본형
var obj2 = obj1; //참조형| 주소 | 1001 | 1002 | 1003 | 1004 | 1005 | … |
|---|---|---|---|---|---|---|
| 데이터 | a / 5001 | obj1 /7103~ | b / 5001 | obj2 / 7103~ | ||
| 주소 | 5001 | 5002 | 5003 | 5004 | 5005 | |
| 데이터 | 10 | ‘ddd’ |
| 주소 | 7103 | 7104 | … |
|---|---|---|---|
| 데이터 | c /5001 | d / 5002 |
b에 a를 복사할 때는 값을 바로 넣지 말고 a가 가지고 있는 주소를 넣어주자
복사 이후 값 변경 (객체의 프로퍼티 변경)
b = 15, obj2.c=20으로 바꿔보자
| 주소 | 1001 | 1002 | 1003 | 1004 | 1005 | … |
|---|---|---|---|---|---|---|
| 데이터 | a / 5001 | obj1 /7103~ | b / 5003 | obj2 / 7103~ | ||
| 주소 | 5001 | 5002 | 5003 | 5004 | 5005 | |
| 데이터 | 10 | ‘ddd’ | 15 | 20 |
| 주소 | 7103 | 7104 | … | |
|---|---|---|---|---|
| 데이터 | c /5004 | d / 5002 |
-
15 없으니까 추가해주기 (5003)
-
b 주소 바꿔주기 (5003으로)
-
7103을 찾아가니 c의 주소가 5001
-
그 데이터 대신 20을 넣어야되는데 없으니까 새로 추가해주기 (5004)
-
c 주소 바꿔주기 (5004 로)
-
문제 발생
obj1 도 obj2도 7103~ 주소를 가지고 있다. 이렇게 주소를 바로 복사해버렸을 때 obj2만 바꿨어도 obj1.c도 20이 되어버린다. obj === obj2
복사 이후 값 변경 (객체 자체를 변경)
obj2 = { c:20, d : ‘aaa’) 로 바꿔보자
| 주소 | 1001 | 1002 | 1003 | 1004 | 1005 | … |
|---|---|---|---|---|---|---|
| 데이터 | a / 5001 | obj1 /7103~ | b / 5003 | obj2 / 7103~ | ||
| 주소 | 5001 | 5002 | 5003 | 5004 | 5005 | |
| 데이터 | 10 | ‘ddd’ | 15 | 20 | ‘aaa’ |
| 주소 | 7103 | 7104 | … |
|---|---|---|---|
| 데이터 | c /5004 | d / 5002 |
| 주소 | 8104 | 8105 | … |
|---|---|---|---|
| 데이터 | c / 5004 | d /5005 |
- 별도 공간이 또 생김
- 별도 공간에 c, d 추가해줌(8104, 8105)
- c에 20을 넣어야되니 찾아보자. 5004에 있음
- 주소 가져오기 (c/5004)
- d 에 넣을 ‘aaa’는 없으니까 새로 추가 (5005)
- 주소 가져오기(d/5005)
- obj 2의 7103~이었던 주소를 8104~로 변경
