JS문법종합반 정리 3주차 01 - 메모리, 기본형 데이터, 참조형 데이터

데이터 타입 심화

1. 데이터 타입의 큰 종류

• 기본형 : Number, String, Boolean, null, undefined, Symbol 
• 참조형 : Object (Array, Function, Date, RegExp, Map, Set)

둘의 구분은 값의 저장방식과 불변성 여부로 함

• 값의 저장방식 (= 복제 방식)
  • 기본형 : 값이 담긴 주소값을 바로 복제
  • 참조형 : 값이 담긴 주소값들의 묶음의 주소값을 복제
• 불변성 여부
  • 기본형 : 불변성 O / 참조형 : 불변성 X

 

2. 메모리와 데이터에 대한 배경지식

2-1) 메모리에는 비트와 바이트

• 비트 : 컴퓨터가 이해할 수 있는 최소 단위 (0과 1의 작은 조각) 
• 바이트 : 비트 8개 묶음, 비트를 일일이 찾기 부담돼서 생김

비트와 바이트

 

• 메모리는 바이트 단위로 구성 (64비트 정수를 저장한다고 하면, 먼저 8개의 바이트로 분할하고, 각 바이트를 메모리에 연속되게 저장)
• 메모리 주소값은 바이트 단위의 식별자, 이를 바탕으로 모든 데이터를 구분 (자바스크립트는 초기 언어가 아니라서 개발자가 메모리 이슈를 덜 신경 쓰게 된 탓에, 다른 언어처럼 크기에 따라 식별자를 다르게 하지 않아도 됨. int, short, long 같은 거 없음)

2-2) 데이터

• 값은 데이터, 식별자는 변수명
• 각각 메모리에 저장될 때 식별자는 변수영역에, 값은 따로 데이터 영역에 저장됨

var A = 3;
// 식별자 : var A
// 값 : 3

 

 

3. 변수 선언과 데이터 할당

변수 영역	주소	...	1002	1003	1004	1005
	데이터	식별자 / 데이터 주소	A / @5002
데이터 영역	주소	...	5002	5003	5004	5005
	데이터	값	3	4	5

 

3-1) 데이터를 식별자와 함께 위치시키지 않는 이유

•   자유로운 데이터 변환 : 데이터의 크기가 기존보다 커지는 경우 이웃 주소에 있는 데이터도 다 밀려남
•   메모리의 효율적 관리 : 크기가 10인 데이터가 할당된 변수 10개를 생성한다고 할 때, 둘을 같은 주소에 일일이 위치시키면 데이터가 차지하는 메모리 크기가 100이나 됨. 반면 둘을 구분해서 위치시키는 경우 데이터는 한 주소만 차지하고 식별자 10개 위치만 잡으면 되니 데이터가 차지하는 크기는 10이면 되는 겨

 

4. 기본형 데이터와 참조형 데이터

4-1) 변수 상수와 불변성 가변성은 다른 개념

• 상수 : 변수 영역의 메모리를 변경할 수 없음 / 변수 : 변경할 수 있음
• 불변 : 데이터 영역의 메모리를 변경할 수 없음 / 가변 : 변경할 수 있음

4-2) 기본형 데이터 

// 데이터 3의 주소가 @5003일 때,
var A = 3;
// 아래와 같이 재할당이 된다고 해서 @5003의 데이터가 8로 변하는 게 아님
A = A + 5;

 

기본형 데이터에서 값을 저장하는 방식 (= 복제하는 방식)

  1.  숫자 3이란 값이 데이터 영역에 있는지 검색 후 있다면 그 값의 주소를 변수영역에서 할당된 식별자에게 부여

  2. 없다면 데이터 영역의 새로운 주소에 값을 생성하고, 새로운 주소를 식별자에게 부여

 

위의 경우에선 새로운 주소인 @5005에 8이 위치하게 되고, 식별자 A가 데이터를 가져오는 주소만 변경될 뿐임.

변수 영역	주소	...	1002	1003	1004	1005
	데이터	식별자 / 데이터 주소	A / @5005
데이터 영역	주소	...	5002	5003	5004	5005
	데이터	값	3	4	5	8

 

즉 A의 기존 데이터 영역 주소인 @5003은 그대로 3인, 불변 상태고, 변수 영역에서 주소 값이 변했음을 알 수 있음.

∴  A는 변수 영역의 메모리를 변경할 수 있는 "변수"면서, 데이터 영역의 메모리를 변경할 수 없는 "불변성"을 가짐

 

4-3) 참조형 데이터

var obj = {key1 : value1, key2 : value2};

 

참조형 데이터에서 값을 저장하는 방식 (= 복제하는 방식)

  1. value1, value2이라는 값들이 데이터 영역에 존재하는 지 검색 후 없다면 생성

  2. 기존 주소든 새로 받은 주소든 별도 영역에 있는 프로퍼티에게 짝이 맞게 부여

  3. 마지막으로 변수 영역의 식별자에 프로퍼티들의 주소를 부여

 

위 객체가 메모리에 저장되는 형태는 아래와 같음. 기본형 데이터와의 차이는 객체의 변수인 프로퍼티가 담길 영역이 별도로 존재하는가의 차이임.

변수 영역	주소	...	1002	1003	1004	1005
	데이터	식별자 / 데이터 주소	obj / @7102~
데이터 영역	주소	...	5002	5003	5004	5005
	데이터	값	value1	value2
별도 데이터 영역	주소	...	7102	7103	7104	7105
	데이터	프로퍼티 / 데이터 주소	key1 / @5002	key2 / @5003

 

변수 영역에서 물결 기호 ~의 의미는 @7102 주소부터 연속된 주소를 다 가져온다는 뜻

// 기존의 객체에서
var obj = {key1 : value1, key2 : value2};
// key1 프로퍼티의 값을 변경
obj.key1 = 5;

 

위처럼 값을 바꾸게 되면, 메모리에선 아래와 같은 변화가 발생함

변수 영역	주소	...	1002	1003	1004	1005
	데이터	식별자 / 데이터 주소	obj / @7102~
데이터 영역	주소	...	5002	5003	5004	5005
	데이터	값	value1	value2	5
별도 데이터 영역	주소	...	7102	7103	7104	7105
	데이터	프로퍼티 / 데이터 주소	key1 / @5004	key2 / @5003

 

이 경우엔 데이터 영역에서의 변동만 있었기 때문에, 가변성을 갖는다고 말할 수 있음. 이때 참조형 데이터 자체가 가변하다곤 말하기 어렵고, 그 내부의 프로퍼티가 가변하다고 하는 게 정확