*🔐Study Keyword :

✅데이터를 처리하는 과정을 살펴봄으로서 1> 🔑데이터 타입이 왜 필요한지와 2> 🔑기본형과 참조형 데이터 타입이 서로 다르게 동작하는 이유를 이해하고 적절히 활용해보자

데이터 타입을 구분하는 이유

1. 값을 저장할 때 확보해야하는 메모리가 공간의 크기를 결정하기 위해
2. 값을 참조할 때 한 번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해
3. 메모리에서 읽어들인 2진수를 어떻게 해석할지 결정하기 위해

- 데이터 타입(Data Type)의 종류

• 자바스크립트의 데이터 타입의 종류는 크게 기본형 타입(primitive type)과 참조형 타입(Reference Type) 두 가지로 나눠집니다.
  

<요약>
기본형 - 1> 할당이나 연산시📍값이 담긴 주솟값을 복제하고 2> 📌불변성을 띈다.
참조형 - 1> 할당이나 연산시📍값이 담긴 긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제하고 2>📌가변성을 띈다.

원시타입과 객체타입의 다른 세가지 측면
1> 원시타입의 값, 원시값은 변경 불가능한 값이다. 반면 개개체 타입의 값, 객체는 변경 가능한 값이다.
2> 원시값을 변수에 할당하면 확보된 메모리 공간인 변수에는 실제 값이 저장된다. 반면 객체를 변수에 할당하면 변수에는 참조 값이 저장된다.
3> 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시값이 복사되어 전단될다., 이를 값에 의한 전달이라고 하낟. 반면 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조값이 복사되어 전달된다. 이를 참조에 의한 전달이라고 한다.

💡불변값과 상수의 POINT)

• 변수와 상수를 구분 짓는 변경 가능성의 대상은 변수 영역의 메모리이다.
  변수 영역의 메모리안에서 한 번 데이터 할당이 이뤄진 변수 공간에 다른 데이터를 재할당할 수 있는지 여부가 관건으로 데이터를 바꿀 수 없으면 상수, 있으면 변수이다.
• 불변성의 여부를 구분할 때 변경 가능성의 대상은 데이터 영역의 메모리이다.
  데이터 영역의 메모리안에 데이터 값의 변경은 새로 만드는 과정으로만 이뤄지며 가비지 컬렉팅을 당하지 않는 한 만들어진 값은 영원히 변하지 않는다.

-WHAT IS❓

1. 🔑기본형 타입(primitive type)은 더 이상 작은 단위로 나눠질 수 없는 한 가지 아이템(single item)을 의미합니다.

• 기본형 타입에는 숫자, 문자열, boolean, null, undefined이 있고 ES6에서 Symbol이 추가되었다.

-WHAT IS❓

2. 🔑참조형 타입(Reference Type)은 single item을 여러개 묶어서 한 단위로(box container) 관리할 수 있게 해주는 것을 의미합니다.

• 참조형 타입에는 객체(Object)가 있고 배열, 함수, Date, 정규표현식 등과 ES6에서 추가된 Map, WeekMap, Set, WeekSet 등이 객체의 하위 분류에 속합니다.

-Difference❓

차이1. 불변성의 여부

1-1. 📌기본형 데이터 타입은 불변성을 띄고 있습니다.

<script>
var a = 'abc'
a =  a + 'def' //'abc'와'abcdef'는 별개의 데이터이다.
var b = 5
var c = 5;
b = 7; //5와 7 역시 다른 값으로 변경할 수 없다.
</script>

-step1. 변수 a에 문자열 'abc'를 할당한다.
-step2. 새로운 문자열 'abcdef'를 만들어 그 주소를 변수 a에 저장한다.
-step3. 변수 b에 숫자 5를 할당시 데이터 영역에서 5를 찾고 없으면 데이터 공간을 하나 만들어 저장한다.
-step4. 변수 c에 같은 수인 5를 할당 할 때 데이터 영역에서 5를 찾아 만들어 놓은 값이 있으니 그 주소를 재활용한다.
-step5. 변수 b의 값을 7로 바꿀 때 기존에 저장했던 7을 찾아서 있으면 재활용하고 없는 경우 새로 만들어 b에 저장한다.

💡1-1. conclusion)

• 기본형 데이터 타입은 문자열 값도 한 번 만든 값을 바꿀 수 없고, 숫자 값도 다른 값으로 변경할 수 없다. (=🎇불변값의 성질)
• 어떤 변환을 가하든 상관없이 무조건 새로 만들어 별도의 공간에 저장하는 과정을 거친다.

1-2. 📌참조형 데이터 타입은 가변성을 띄고 있다.

<script>
var obj1 = {
	a :1,
    b ; 'bbb'
};
obj.b = 2;
</script>

-step1. 변수 영역의 빈공간(@1002)을 확보하고 확보한 공간의 식별자를 obj1로 지정한다.
-step2. 임의의 데이터 저장 공간 (@5001)에 데이터를 저장하려보니 여러 개의 프로퍼티로 이뤄진 데이터 그륩이므로 그륩 내부의 프로퍼티들을 저장하기 위해서 별도의 변수영역을 마련하고, 그 영역의 주소(@7103~?)를 @5001에 저장한다.
-step3. @7103 및 @7104에 각각 a와 b라는 프로퍼티 이름을 지정한다.
-step4. 데이터 영역에서 숫자 1을 검색하고 검색 결과가 없으므로 임의로 @5003에 저장하고 이 주소를 @7103에 저장한다. 마찬가지로 문자열 'bbb' 역시 임의로 @5004에 저장하고, 이 주소를 @7104에 저장한다.
-step5. obj의 a 프로퍼티에 숫자 2를 재할당시 데이터영역에서 숫자 2를 검색하고 없으면 빈 공간인 @5005에 저장하고 이 주소를 @7103에 저장한다.

💡1-2. conclusion)

• 기본형 데이터와의 차이는 '객체의 변수(프로퍼티) 영역'이 별도로 존재한다는 점이다.
• obj1이 바라보고 있는 주소 @5001는 변하지 않았지만(=데이터 영역에 저장된 값은 불변) 기존 객체의 변수(프로퍼티) 영역 값(=🎇가변값의 성질)은 바뀌었다.

차이 2. 변수 복사 비교

-📍기본형타입은 주솟값 자체가 메모리에 저장됩니다.
따라서 복제시 값이 담긴 주소값을 바로 복제합니다.
-📍참조형 타입은 용량이 커서 한 번에 메모리에 올릴 수 없고 객체를 가르키는 레퍼런스가 메모리에 저장이 됩니다. 따라서 복제시 값이 담긴 긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제합니다.
-변수를 복사하는 과정은 기본형과 참조형 데이터 모두 같은 주소를 바라보게 되는 점에서 동일하다.

<script>
var a = 10
var b = a; //변수 a와 b 모두 값이 같아졌다.
var obj1 = { c: 10, d: 'ddd'}
var obj2 = obj1; //객체1과 객체2 역시 모두 값이 같아졌다. (=같은 주소를 향한다.)
</script>

💡2. conclusion)

• 기본형 데이터 타입은 실제로 📍주솟값(=값이 담긴)을 복사하는 과정이 1번만 이뤄진다.
• 참조형 데이터 타입의 과정은 📍한 단계를 더 거친다(=객체의 변수[프로퍼티] 영역)는 차이를 가진다.

2-1) 변수 복사 이후 값 변경 결과 - 객체의 프로퍼티를 변경했을시

<script>
//1-4 코드라인은 위의 코드와 일치
b = 15; // 변수 b의 값이 달라졌다.
obj2.c = 20; // obj2의 프로퍼티 값을 바꿔도 객체 1과 객체 2의 값은 같다. 
</script>

💡2-1. conclusion)

• 변수 a와 b는 다른 주소를 향하지만 obj1과 obj2는 여전히 같은 객체를 바라보고 있다.

<script>
//이를 코드로 표현하면 다음과 같다.
a !== b
obj1 === obj2
</script>

2-2) 변수 복사 이후 값 변경 결과 - 객체 자체를 변경했을 때

<script>
//1-4 코드라인은 위의 코드와 일치
b = 15;
obj2 = { c: 20, d: 'ddd'} 
// obj2에 새로운 객체를 할당함으로써 값을 직접 변경
</script>

💡2-2. conclusion)

• 메모리 데이터 영역의 새로운 공간에 새 객체가 저장되어 그 주소
  를 변수 영역의 obj2 위치에 저장하여 값이 달라졌다.
• 즉 참조형 데이터의 '가변'은 데이터 자체를 변경할 경우가 아니라 내부의 프로퍼티를 변경할 때만 성립됩니다.

📑Study Source

1.책 - 코어 자바스크립트