데이터 타입의 종류 ( 기본형 vs 참조형 )

Javascript에서는 데이터의 타입은 크게 기본형과 참조형으로 나뉘어집니다.

기본형과 참조형의 구분은 값의 저장 방식과 불변성의 여부입니다.

Untitled

복제의 방식
1. 기본형 : 값이 담긴 주소값을 바로 복제
2. 참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제
불변성의 여부
1. 기본형 : 불변성을 띔
2. 참조형 : 불변성을 띄지 않음

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

메모리, 데이터
1. 비트
  1. 컴퓨터가 이해할 수 있는 가장 작은 단위죠
  2. 0과 1을 가지고 있는 메모리를 구성하기 위한 작은 조각을 의미한다고 보면 될 것 같아요!
  3. 이 작은 조각들이 모여서 여러분들이 흔히 들으시는 **‘메모리’**가 만들어지는 것이죠.
2. 바이트
  1. 0과 1만 표현하는 비트를 모두 찾기는 부담
  2. 1개 → 2개 → … → 8개(새로운 단위 : byte)
    
    (이미지 출처 : https://namu.wiki/w/바이트)
3. 메모리(memo + ry) : byte 단위로 구성
  1. 모든 데이터는 byte 단위의 식별자인 메모리 주소값을 통해서 서로 구분이 됩니다.
  <aside> 💡 만일, 64비트(8바이트) 정수는 메모리에 어떻게 저장할 수 있을까요? ⇒ 64비트를 8개의 바이트로 분할하고, 각 바이트를 메모리에 저장해야 해요. 각 바이트는 8개의 비트를 가므로 64비트 정수는 메모리에서 8개의 연속된 바이트에 저장된답니다.
  
  </aside>
4. java, c와 다른 javascript의 메모리 관리 방식(feat. 정수형)
  1. 8을 저장하는 방법
    1. JS : let a = 8(8byte)
    2. JAVA
      1. byte a = 8(1byte)
      2. short a = 8(2byte)
      3. int a = 8(4byte)
      4. long a = 8(16byte)
  2. java 또는 c언어가 초기에 등장했을 때 숫자 데이터 타입은 크기에 따라 다양하게 지정해줘야 할 만큼 개발자가 handling 할 요소들이 많았어요. 하지만 javascript는 이런 부분에서는 상당히 편리하죠. 메모리 이슈까지는 고민하지 않아도 되니까요 😎
식별자, 변수
1. var testValue = 3
2. 변수 = 데이터 ( 3 )
3. 식별자 = 변수명 ( testValue)

변수 선언과 데이터 할당

예시

/** 선언과 할당을 풀어 쓴 방식 */
var str;
str = 'test!';

/** 선언과 할당을 붙여 쓴 방식 */
var str = 'test!';

주소	…	1002	1003	1004	1005	…
데이터		str @5002
주소	…	5002	5003	5004	5005	…
데이터		test!

값을 바로 변수에 대입하지 않는 이유(=무조건 새로 만드는 이유)
1. 자유로운 데이터 변환
  1. 이미 입력한 문자열이 길어진다면?
  2. 숫자는 항상 8byte로 고정이지만, 문자는 고정이 아니에요(영문 : 1byte, 한글 : 2byte). 그래서, 이미 1003 주소에 할당된 데이터를 변환하려 할 때 훨씬 더 큰 데이터를 저장하려 한다면 → 1004 이후부터 저장되어있는 모든 데이터를 오른쪽으로 다~~~ 미뤄야 하겠죠..!?
2. 메모리의 효율적 관리
  1. 똑같은 데이터를 여러번 저장해야 한다면?
  2. 1만개의 변수를 생성해서 모든 변수에 숫자 1을 할당하는 상황을 가정해 봅시다. 모든 변수를 별개로 인식한다고 한다면, 1만개의 변수 공간을 확보해야 해요.
    1. 바로 대입하는 case) 숫자형은 8 바이트 고정이죠?
      1. 1만개 * 8byte = 8만 byte
    2. 변수 영역에 별도 저장 case)
      1. 변수 영역 : 2바이트 1만개 = ****2만바이트
        
        <aside> ℹ️ 이해를 돕고자, 변수 영역에 저장되는 데이터는 2바이트로 가정했어요!
        
        </aside>
      2. 데이터 영역 : 8바이트 1개 = 8바이트
      3. 총 : 2만 8바이트

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

메모리를 기준으로 다시 한번 생각해보는 두 가지 주요 개념
1. 변수 : 변수 영역 메모리 변경 가능
2. 상수 : 변수 영역 메모리 변경 불가능
불변 vs 불변X
1. 불변하다 : 데이터 영역 메모리 변경 불가능
2. 불변하지 않다 : 데이터 영역 메모리 변경 가능
가변값과 가변성 ( 참조형 데이터 )
1. 참조형 데이터 변수 할당
```
// 참조형 데이터는 별도 저장공간(obj1을 위한 별도 공간)이 필요합니다!
var obj1 = {
	a: 1,
	b: 'bbb,
};
```
  주소 1001 1002 1003 1004
  
  데이터 obj1/7103~7104
  
  주소 5001 5002 5003 5004
  
  데이터 1 bbb
  
  주소 7103 7104 7105 7106
  
  데이터 a/5001 b/5002
2. 참조형 데이터가 불변하지 않은 이유 (가변한 이유)
```
var obj1 = {
	a: 1,
	b: 'bbb',
};

// 데이터를 변경해봅시다.
obj1.a = 2;
```
  주소 1001 1002 1003 1004
  
  데이터 obj1/7103~7104
  
  주소 5001 5002 5003 5004
  
  데이터 1 bbb 2
  
  주소 7103 7104 7105 7106
  
  데이터 a/5003 b/5002
  
  위 예시와 같이 데이터 영역에 저장된 값은 여전히 불변!
  
  obj1을 위한 별도 영역은 변경이 가능!
  
  → 따라서 참조형 데이터를 불변하지 않다 라고 합니다. ( 가변 )
  
  c. 중첩객체의 할당
```
var obj = {
	x: 3,
	arr: [3, 4, 5],
}

// obj.arr[1]의 탐색과정은 어떻게 될까요? 작성하신 표에서 한번 찾아가보세요!
```
  주소 1001 1002 1003 1004 1005 …
  
  데이터 obj1
  
  주소 5001 5002 5003 5004 5005 …
  
  데이터 3 4 5
  
  주소 7103 7104 …
  
  데이터 x arr
  
  주소 8104 8105 8106 …
  
  0/5001 1/5002 2/5003
  
  d. 참조 카운트가 0인 메모리 주소의 처리
  1. 참조카운트란 무엇일까요?
    
    <aside> 💡 객체를 참조하는 변수나 다른 객체의 수를 나타내는 값입니다. 참조 카운트가 0인 객체는 더 이상 사용되지 않으므로, 가비지 컬렉터에 의해 메모리에서 제거됩니다.
    
    </aside>
  2. 가비지컬렉터(GC, Garbage Collector)
    
    <aside> 💡 더 이상 사용되지 않는 객체를 자동으로 메모리에서 제거하는 역할을 합니다. 자바스크립트는 가비지 컬렉션을 수행함으로써 개발자가 명시적으로 메모리 관리를 하지 않아도 되도록 지원합니다. 자바스크립트 엔진에서 내부적으로 수행되며, 개발자는 가비지 컬렉션에 대한 직접적인 제어를 할 수 없습니다.
    
    </aside>
변수 복사의 비교

우리가 지금까지 작성했던 방법과 상당히 유사합니다. 먼저 기본형 및 참조형 데이터의 선언과 할당을 해보고, 변수 복사까지 진행해봅시다! 강의를 참고하여 역시 표를 작성해주세요 😎
```
// STEP01. 쭉 선언을 먼저 해볼께요.
var a = 10; //기본형
var obj1 = { c: 10, d: 'ddd' }; //참조형

// STEP02. 복사를 수행해볼께요.
var b = a; //기본형
var obj2 = obj1; //참조형
```
| --- | --- | --- | --- | --- | --- | --- |

| --- | --- | --- | --- |
복사 이후 값 변경(객체의 프로퍼티 변경)