JS문법 - 데이터타입 심화(level1) - 기본형 데이터와 참조형 데이터

자바스크립트에서는 값의 저장방식과 불변성 여부에 따라 기본형 / 참조형 데이터로 나뉘게 된다.

• 기본형 : 값이 담긴 주소값을 바로 복제
• 참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 "주소값 자체" 를 복제 (크기가 크기 때문에!!)

 

메모리와 데이터에 관한 배경지식

• 비트 :
  • binary digit"의 줄임말  : 컴퓨터가 이해할수 있는 가장 작은 단위
  • 0,1을 가지고 메모리를 구성하기 위한 작은 조각이다. > 이게 모여서 메모리가 된다.
• 바이트 : 
  • 비트8개가 모여 한 묶음이 되는것 (byte)

 

JAVA,C  와 다른 JavaScript 메모리 관리방식

자바에서
byte a = 8(1byte)
short a = 8(2byte)
int a = 8(4byte)
long a = 8(16byte)

 

자바,씨언어는 1960년대쯤 등장하게 되었는데 그때당시만 해도 메모리가 빵빵하지 않아서 이렇게 개발자가 직접 크기를 정해주어야 한다. (byte, short, int, long으로 정의 해주어야 함)

 

하지만 자바스크립트는 이런 메모리 이슈를 고려하지 않아 매우 편리하다 !!

let a = 8(8byte)

 

변수선언과 데이터 할당

var str = 'test!';

 

이렇게 변수를 선언했을때 실제 메모리에는 어떻게 저장될까?

이런식으로 변수를 저장하는 데이터, 실제 데이터 값을 저장하는 데이터가 따로 있다.

1. str의 변수가 변수영역에 저장된다
2. 데이터 영역에 데이터 값이 저장된다.
3. str의 변수 영역에 데이터영역에 저장된 값의 주소를 참조하도록 한다.

변수영역	주소	1000	1001	1002	...
	데이터	변수명 : str 참조주소 : @2000
데이터영역	주소	2000	2001	2002	...
	데이터	'test!'

 

여기서 1000번지에 바로 데이터를 저장하지 않고 데이터영역의 2000번지에 데이터를 따로 저장시는 이유는 뭘까?

1. 자유로운 데이터 변환을 위해서
   • 이미 입력한 문자가 길어진다면? (숫자는 고정 8byte이지만 문자는 고정이 아님.) 그러면 str다음에 저장되어 있던 데이터를 다 미뤄야함😅
2. 메모리를 효율적으로 관리하기 위해서
   • 만약 만개의 변수에 숫자1을 할당하려면 ? 모든 변수를 다 따로 한다면 만개의 변수공간이 필요하다.
     • 1만개 * 8byte => 8만byte
   • 변수에 별도로 저장 
     • 변수영역 : 2byte * 1만개 => 2만byte!

 

메모리를 기준으로 다시한번 생각해보는 두 가지 주요 개념

 

변수 VS 상수

변수 : 변수영역 메모리 변경 가능
상수 : 변수영역 메모리 변경 불가능

 

불변하다 VS 불변하지 않다.

불변하다 : 데이터 영역 메모리를 변경할 수 없다.
불변하지 않다 : 데이터 영역 메모리를 변경할수 있다.

 

 

참조형 데이터 변수 할당

var obj1 = {
	a: 1,
	b: 'bbb,
};

 

왜 참조형 데이터이냐?

아까 말했듯이 크기가 크기떄문에 별도 메모리에 따로 저장해야한다.

1. 변수영역 - obj1 저장
2. 별도obj1 영역 - 변수 할당
3. 데이터 영역 - 실제 데이터 저장
4. 별도 obj영역 > 데이터 주소값 저장

변수영역	1000	1001	...
	변수명 : obj1
데이터 영역	2000	2001	...
	1	'bbb'
obj1영역	3000	3001	...
	key:a @2000	key:b @2001

 

이렇게 객체 변수 영역의 별도 메모리 공간이 필요하다!

 

⭐참조형 데이터가 불변하지 않다 (가변하다) 라고 하는 이유!! ⭐

위에 표에서 데이터의 변경이 들어왔다고 생각해보자

obj1.a = 2;

 

1. 일단 변경할 데이터 숫자 2가 없으니 데이터 영역에 추가해준다.
2. 해당 주소를 obj1.a에 변경해준다

변수영역	1000	1001		...
	변수명 : obj1
데이터 영역	2000	2001	2002	...
	1	'bbb'	2
obj1영역	3000	3001		...
	key:a @2002	key:b @2001

 

데이터 영역에 저장된 값은 여전히 불변 이지만 obj1영역은 변경되었다.

이것 때문에 참조형 데이터를 불변하지않다.(가변하다)라고 한다!

 

중첩객체의 할당

중첩객체 ?

객체 안에 또 다른 객체가 들어가는것. 

var obj = {
	x: 3,
	arr: [3, 4, 5],
}

 

이거도 메모리에 넣어보자.

변수영역	주소	1000			...
	데이터	변수 명 : obj
데이터영역	주소	2000	2001	2002	...
	데이터	3	4	5
obj 영역	주소	3000	3001		...
	데이터	변수명 : x  참조주소 : @2000	변수명 : arr 참조 주소 : @4000~
arr 영역	주소	4000	4001	4002	...
	데이터	index0 참조주소 : @2000	index1 참조주소 : @2001	index2 참조주소 : @2002

 

참조카운트 ? :

객체를 참조하는 변수나 다른 객체의 수를 나타내는 값.

참조카운트가 0인 객체는 더이상 사용하지 않으므로 가비지 컬렉터에 의해 메모리에서 삭제.

 

가비지 컬렉터 : 

더이상 사용되지 않는 객체를 자동으로 메모리에서 제거하는 역할.

개발자가 삭제하는게 아니고 자바스크립트 자체에서

 

 

사실 이까지는 한 2번 반복하면 아주 쉽게 이해가고 할만하다.

다음단계에서는 내가 제일 헷갈렸던 변수복사 이후의 비교(객체의 프로피터 변경 vs 객체 자체를 변경)를 통해 결론을 짓도록 하겠다.!!!

 

(사실 이 전체를 이해하는데 하루종일 걸림😅)