JavaScript의 데이터의 구조
데이터를 담는 변수는 식별자와 데이터 부분으로 나뉜다.
let a = 3; // 식별자 : a , 데이터 : 3변수는 메모리에 변수 영역과 데이터 영역으로 나뉘어 저장된다.
- 변수 영역
- 식별자의 정보와 실제 데이터 값의 주소를 가진다.
- 해당 변수가 변수인지 상수인지 구분하는 기준이 된다.
- 변수 : 변수 영역의 메모리를 변경할 수 있다.
- 상수 : 변수 영역의 메모리를 변경할 수 없다.
- 데이터 영역
- 데이터의 실제 값의 정보를 가진다.
- 해당 변수가 가변성을 띄는지 불변성을 띄는지 구분하는 기준이 된다.
- 가변성 : 데이터 영역의 메모리를 변경할 수 있다.
- 불변성 : 데이터 영역의 메모리를 변경할 수 없다.
원시형(기본형) vs 참조형
대표 데이터 타입
| 원시형 | 참조형 |
|---|---|
| Number(숫자), String(문자열) | Array(배열), Object(객체) |
원시형
: 변수 영역과 데이터 영역을 가진다.
let a = 3;-
원시형의 데이터 구조
-
변수 영역
주소 1001 1002 ... 데이터 a/@5002 ... -
데이터 영역
주소 5001 5002 ... 데이터 3 ...
-
참조형
: 변수 영역과 데이터 영역을 가지며, 해당 식별자의 데이터 영역을 별도로 가진다.
let obj = {a: 3, b: "aaa"}-
참조형의 데이터 구조
-
변수 영역
주소 1001 1002 ... 데이터 obj/@7104~ ... -
obj 데이터 영역
주소 7104 7105 ... 데이터 a/@5001 b/@5002 ... -
데이터 영역
주소 5001 5002 ... 데이터 3 "bbb" ...
-
변수의 복사와 값 수정
변수의 복사는 주소값을 복사한다.
// 선언
let a = 10;
let obj1 = {c: 10, d: "ddd"};
// 복사
let b = a;
let obj2 = obj1;
// 값 변경
b = 15;
obj2.c = 20;
obj2.d = "aaa";1. 선언
let a = 10;
let obj1 = {c: 10, d: "ddd"};-
변수 영역
주소 1001 1002 1003 1004 ... 데이터 a/@5001 obj1/@7103~ ... -
obj1 데이터 영역
주소 7103 7104 ... 데이터 c/@5001 d/@5002 ... -
데이터 영역
주소 5001 5002 5003 5004 5005 데이터 10 "ddd"
2. 복사
let b = a;
let obj2 = obj1; -
변수 영역
주소 1001 1002 1003 1004 ... 데이터 a/@5001 obj1/@7103~ b/@5001 obj2/@7103~ ... -
obj1 데이터 영역
주소 7103 7104 ... 데이터 c/@5001 d/@5002 ... -
데이터 영역
주소 5001 5002 5003 5004 5005 데이터 10 "ddd"
3. 값 변경
b = 15;
obj2.c = 20;
obj2.d = "aaa";-
변수 영역
주소 1001 1002 1003 1004 ... 데이터 a/@5001 obj1/@7103~ b/@5003 obj2/@8204~ ... -
obj1 데이터 영역
주소 7103 7104 ... 데이터 c/@5004 d/@5002 ... -
obj2 데이터 영역
주소 8204 8205 ... 데이터 c/@5004 d/@5005 ... -
데이터 영역
주소 5001 5002 5003 5004 5005 데이터 10 "ddd" 15 20 "aaa"
복사 후 값을 변경했을 때,
원시형 데이터를 가진 a와 b는 a !== b가 되지만,
참조형 데이터를 가진 obj1과 obj2는 obj1 === obj2가 된다.
변수의 복사는 값이 아닌 주소의 복사로 이루어지기 때문이다.
참조형을 문제 없이 복사할 수 있는 방법
: JSON을 활용하여 문자열화(stringify) 한 뒤 다시 JSON화(parse) 한다.let obj3 = JSON.parse(JSON.stringify(obj1));
얕은 복사 vs 깊은 복사
얕은 복사
- 객체의 주소를 복사하는 방식
- 단점 : 1 depth만 복사한다.
- 원시형 구조 : a/@5001 → 10
- 참조형 구조 : obj1/@7103~ → c/@5001 → 10
- 따라서, obj1에 얕은 복사를 수행하면, 10 이 아닌 c/@5001을 복사하기 때문에, 값 수정에 영향을 받을 수 있다.
깊은 복사
- 계속해서 얕은 복사를 수행해서 최종적으로 모든 값을 별개의 주소에 할당하는 복사 방식
- 하지만, 완전히 별개의 메모리를 추가로 차지하기도 하고, 실제로 많이 사용되지는 않는다고 함
쥐눈(Jin Hoon)