📖6. 기본형 데이터와 참조형 데이터

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

• 앞으로 나올 그림들은 실제 메모리를 나타낼 수 없기에 메모리를 추상화한 그림입니다.

• 변수명과 주소로 된 표가 있고 주소와 데이터로 구성된 표가 있는데 이 두개는 별개의 저장공간을 가지는 것이 아니라 편의상 흐름도 파악을 위해 표기한 것입니다.

---

🚀 1. 기본형 데이터(Primitive Type)의 정의

• 기본형에는 바로 값을 그대로 할당한다.

• 기본(원시)형에는 Number, String, Boolean, null, undefined 가 있으며 ES6 에서는 Symbol 도 추가되었습니다.

---

▶️ var a;

• 변수 a 를 선언하면 컴퓨터는 우선 메모리 안에 데이터를 담을 공간을 미리 확보합니다.

• 그림에서는 임의로 아래 표의 주소 313번 공간을 확보했습니다.

• 그 다음으로 확보한 주소값을 변수명 a 와 매칭시킵니다.

▶️ a = 10;

• 이후 코드 진행중에 a 에 10을 할당하라는 명령을 만나면 컴퓨터는 변수 a를 찾아서 변수 a와 매칭되어 있는 주소값인 @313번을 읽고 그 주소로 이동해서
  그 공간에 10을 집어 넣습니다.

▶️ var b = 'abc';

• 이번에는 변수 b 를 선언하고 문자열 abc 를 할당하라는 명령어(var b = 'abc')를 내려봅니다.
  우선 데이터가 담길 314번의 공간을 확보하고 확보된 공간의 주소값을 가지고 변수명 b 와 주소 @314에 매칭시킵니다.

• 그리고 다시매칭된 주소의 314번으로 이동해서 문자열 'abc'를 저장합니다.
  즉, var b = 'abc' 라는 문장은 앞서 실행했던 var a; a = 10; 를 하나로 합쳐놓은 문장에 불과합니다.

• 이러한 것을 선언과 할당이라고 합니다.

---

🔎 선언과 할당 ?

• 선언 과정 : 공간을 확보하고 변수명과 주소를 매칭시키는 과정
• 할당 과정 : 해당 변수가 가리키는 주소의 공간에 데이터를 저장하는 과정

---

▶️ b = false;

• 그 다음 문장에서 다시 b에 false 를 할당(b = false)하라고 명령하면 false 를 들고있는 채(var 라는 키워드가 없기 때문에)로 현재 가지고 있는 변수명들 중에 b 가 있는 지를 검색합니다.

• 만약 b 를 찾지 못하면 앞서와 마찬가지로 선언 과정을 거치게 됩니다.

• b 는 현재 메모리상에 존재하기 때문에 b 가 가리키는 주소(@314)값을 읽어서 해당 주소위치로 이동한 다음 그 자리에 false 를 덮어쓰게 됩니다.

▶️ var c = b;

• 그리고 다음 문장에 var c = b; 을 수행하면 먼저 var 키워드가 있으니 선언과정부터 거치게 됩니다.
• 빈 공간인 315번을 확보하고 그 주소를 변수 c 와 매칭시킵니다. 그리고 314번으로 이동하여 b값인
  false 값을 읽어옵니다.
• 그리고 읽어들인 값 false 를 가지고 c 를 찾아서 c가 가리키는 315번 공간에 false 를 넣게됩니다.

• 여기서 중요한 것은 이렇게 저장된 기본형 데이터들은 그 자체로 비교가 가능하다는 것입니다.
  

• b 가 가리키는 메모리 공간상에 저장된 false 와 c 가 가리키는 메모리 공간상에 저장된 false 는 완전히 같은 값입니다.

• false 라는 명칭 자체는 세상에 단 하나뿐인 키워드입니다. 우리는 이 하나뿐인 단어를 이곳저곳에서 사용하고 있는 것입니다.

• 하나뿐인 단어를 서로 비교하려고 하니까 당연히 완전히 같다(b === c)고 볼 수 밖에 없습니다.

▶️ c = 20;

• 다시 c 에 20을 할당하라(c = 20)고 하면 20을 가지고 c 가 저장된 메모리 공간을 찾아서 원래있던 false 대신 20을 넣습니다.

• 그런데 이 동작은 false 란 값이 20 으로 변하는 것이 아니라 메모리 공간에 있던 false 대신 20이란 값을 덮어씌워 버리는 것입니다.

• 이제 b 가 가리키는 곳의 값인 false 와 c 가 가리키는 공간의 값인 20 은 서로 완전히 다른 값이 되었으므로 b 와 c 는 같지않다(b !== c)라는 조건이 성립합니다.

---

🚀 2. 참조형 데이터의 정의

• 참조형에는 값이 저장된 주소값을 할당(참조)한다.

• 참조형은 대표적으로 객체(Object)가 있고 그 하위에 배열(Array), 함수(Function), 정규표현식(RegExp) 등이 있으며, ES6에서는 Map, Set, WeakMap, WeakSet 등도 추가되었습니다.

---

• 기본형 타입과 마찬가지로 메모리 공간을 확보하고 주소를 변수명과 매칭시키는 과정은 동일합니다.
  

• 다음으로 할당과정을 할 차례인데 할당을 하려고 보니 그 값이 기본형이 아니고 참조형입니다.

• 참조형 데이터들은 프로퍼티(property)와 데이터(data), 즉 key : value로 묶인 쌍들로 이루어져 있습니다.

• 프로퍼티명은 변수와 비슷한 성질을 지니고 있고 변수명과 실제 데이터는 주소값을 통하여 연결되어 있는데 프로퍼티와 데이터 사이에서도 같은 동작을 합니다.

• 우선 각 프로퍼티명과 value 가 담길 주소를 매칭하기 위해서 공간을 새로 확보합니다.
  여기선 새로 임의로 1011번에 공간을 확보합니다

• 그리고 나서 1012번에 a 프로퍼티의 value 가 담길 공간을 확보하고 확보된 주소를 a 프로퍼티와 매칭시킵니다.

• 그리고 1013번에 b 프로퍼티의 value 가 담길 공간을 확보하고 그 할당된 주소의 1013번을 b 프로퍼티와 매칭시킵니다.
  

• 이제 다시 각각의 주소값마다 기본형 데이터값을 할당하게 됩니다.

• 1012번에는 1 을 1013번에는 'b' 가 저장됩니다.
  

• 이제 앞서 어딘가에 저장되어 있을 객제 저장 정보의 주소 즉, 여기서는 1011번을 413번에 매칭시키게 됩니다.
  

• 이러한 과정을 데이터 공간의 기본형 데이터가 담길 때까지 반복하게 됩니다.

• 즉, 참조형 데이터는 결과적으로 기본형 데이터들의 집합이라고 볼 수 있습니다.

▶️ var obj2 = obj;

• 그렇다면 이 상태에서 obj2 에 obj 를 할당하라고 하면 어떠한 일이 벌어질까요?

• 414번에 공간을 확보하고 obj2 와 매칭시킨 다음 obj 가 가리키고 있는 데이터인 1011번이라고 하는 주소를 obj2 에 할당하게 됩니다.
  

• 이것이 바로 참조가 이루어지는 형식입니다.

• 객체는 어딘가에 따로 저장되어 있는데 그객체가 저장된 주소만을 복사해 온 것입니다.

▶️ obj2.a = 10;

• 그래서 obj2 의 a 프로퍼티(obj.a)에 10을 할당(obj2.a = 10;)하라고 하면 obj2 에 매칭된 414번 주소로 가서
• 다시 1011번으로 이동한 다음 1011번 안에서 a 프로퍼티를 찾고 a 와 매칭되어 있는 1012번 주소로 이동하여 1 대신에 10 을 넣게됩니다.
  

• 여기서 당연하게도 obj2.a 값은 10이 나오는데 원본인 obj.a 값도 마찬가지로 10 이 출력됩니다.

• obj2 객체가 obj 객체와 다른 새로운 객체를 만든 것이 아니라 본래 obj 가 바라보던 객체를 함께 바라보고 있기 때문입니다.

• 즉, obj === obj2 는 완벽히 동일한 객체를 참조한다고 말합니다.

• 그리고 이를 같은 곳을 바라보고 있다고 하여 포인터(pointer)가 같다 혹은 같은 포인터를 바라본다고 표현하기도 합니다.

• 지금까지의 과정이 기본형 데이터와 참조형 데이터의 가장 큰 차이점이고

• 이 원리를 이해해야만 이후에 접할게 될 얕은 복사, 깊은 복사 개념들이 등장하는 이유를 이해하실 수 있게 됩니다.

---

🚀 3. 중첩된 객체타입

• 이번에는 중첩된(nested) 객체를 살펴보도록 하겠습니다.
• 참고로 여기서 말하는 중첩된 객체는 참조형 데이터 안에 참조형 데이터가 있는 경우들을 nested, 즉 중첩되어 있다고 표현합니다.

---

• 공간을 확보하고 선언과정은 위에서 살펴본 것과 같이 동일합니다.
  

• 해당 표에서는 1184번을 확보하고 확보된 해당 공간에 프로퍼티별로 저장될 공간을 다시 확보하게 됩니다.

• 예제 코드에서는 a 프로퍼티 하나뿐이므로 1185번을 a 프로퍼티가 저장될 공간으로 삼도록 하겠습니다.

• 이제 1185번에 a 프로퍼티의 value 를 할당해야 하는데 할당하려고 보니 그 값이 인덱스로 이루어진 value 값들의 집합인 배열입니다.
• 그래서 1326 ~ 1328번까지 공간을 다시 확보하고 1185번에는 확보된 공간의 주소값들로 이루어진 배열이 넣어지게 됩니다.

• 위와 같은 과정을 거친 후에 각 주소마다 value 들을 대입하게 됩니다.
• 이번에는 요소들이 모두 기본형 데이터이기 때문에 더이상의 공간 확보 작업을 하지 않을 것입니다.

▶️ obj.a = 'new';

• 그런데 만약 이 상황에서 'new' 라고 하는 문자열인 기본형 데이터를 obj3.a 에 할당하라고 하면 어떻게 될까요?

• 배열 정보에 있던 자리에 순수 데이터인 new 문장열이 들어옴으로써 1326 ~ 1328번까지 저장되어 있던 데이터들은 링크가 사라지고 맙니다.

• 즉, 주소를 참조하고 있는 곳이 어디에도 없게 되게 되는 것입니다.

• 이들은 가비지 콜렉터라고 불리는 메모리 청소기인 청소 대상에서 언젠가 쥐도새도 모르게 사라지게 됩니다.

---