Primative-Data&Referenced-Data.md

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

기본형 데이터 (primitive type)

• Number
• String
• Boolean
• Null
• Undefined
• Symbol
• .etc

참조형 데이터 (reference type)

• Object
• Array
• Function
• Date
• regexp
• Map, WeakMap
• Set, WeakSet

기본형과 참조형을 구분하는 기준

기본형과 참조형을 구분 짓는 가장 큰 점은 실제 값 전체 복사 vs 실제 값이 들어있는 주소 값 복사이다.

▷ 기본형 (copy value of a)

let a = 1;
let b = a;

a += 10;
console.log(a) //11
console.log(b) //1

위의 코드를 살펴보면 a의 값이 변하더라도 b의 값은 그대로 인 것을 볼 수 있다.
let b = a; 코드를 통해 a값 전체가 복사되어 b라는 변수에 담겼다.
a, b는 서로 영향을 받지 않고 독립적으로 존재하는 것을 볼 수 있다.

[기본형 데이터가 저장되는 순서]

1. 변수 영역에서 빈 공간(@1003 : 임의의 주소 값)을 확보한다.

2. 확보한 공간의 식별자(변수명)를 a로 지정한다.

3. 일단 데이터 영역에서 1을 찾고, 없으면 데이터 공간을 하나 만들어(@5004)에 숫자 1을 저장한다.

4. 변수 영역에서 a라는 식별자를 검색한다.(@1003).

5. 앞서 저장한 문자열의 주소(@5004)를 @1003의 공간에 연결한다.
   a += 10 코드 처리

6. 1이 저장된 공간에 11을 할당하는 대신 데이터 영역에서 11을 찾고, 없으면 새로 만들어 별도의 공간에 저장한다.

7. 그 주소를 1003의 공간에 연결한다.

• 불변값 (immutable)

위의 처리 과정에서 한 번 만든 값은 다른 값으로 변경되지 않는다.
대신 새로 만드는 과정을 통해서만 변경이 일어나고 있다. 이것이 불변 값의 성질이다.
한 번 만들어진 값은 가비지 컬렉팅을 당하지 않는 한 영원히 변하지 않는다.

▷ 참조형 ( a has address of "{ x : 1}" )

let a = { x : 1 };
let b = a;

a.x += 10;
console.log(a.x); //11
console.log(b.x) //11

기본형과 다르게 let b = a; 코드를 통해 {x : 1} 의 주소 값이 b라는 변수에 담겼다.

a, b를 콘솔로 찍어보면 a값만 변화시켰지만, b값도 +10이 된 것을 알 수 있다.

즉 a, b는 서로 영향을 받고 있는 것을 볼 수 있다.

[참조형 데이터가 저장되는 순서]

1. 변수 영역에서 빈 공간(@1002 : 임의의 주소 값)을 확보한다.

2. 확보한 공간의 식별자(변수명)를 a로 지정한다.

3. 임의의 데이터 저장 공간(@5001) 에 데이터를 저장하려고 보니 여러 개의 프로퍼티로 이뤄진 데이터 그룹이다.
   이 그룹 내부의 프로퍼티(x) 들을 저장하기 위해 별도의 변수 영역을 마련하고, 그 영역의 주소(@7103~ ?)를 @5001에 저장한다.

4. @7103 에 x라는 프로퍼티 이름을 지정한다.

5. 데이터 영역에서 숫자 1을 검색하고 없으면, 임의로 @5003에 저장하고, 이 주소를 다시 @7103에 저장한다.
   a.x += 10 코드 처리

6. 데이터 영역에서 숫자 11을 검색한다. 검색 결과가 없으면 빈 공간인 @5005에 저장하고 그 주소를 @7103에 저장한다.

• 가변값 (mutable)

위의 처리 과정에서 10을 더하기 전과 더한 후 변수 a가 바라보고 있는 주소는 여전히 @5001로 변하지 않는 것을 볼 수 있다.
즉 '새로운 객체'가 만들어진 것이 아니라 기존의 객체 내부의 값만 1에서 11로 바뀐 것이다.
데이터 영역에 저장된 값은 모두 불변값이지만(1,11), 변수(@7103)에는 다른 값을 얼마든지 대입할 수 있다.

• 변수 호이스팅

자바스크립트는 변수 호이스팅이라는 특징을 갖고 있다.

console.log(val1);
var val1;

콘솔창에 변수 val1을 출력하는 코드를 입력했다. 그런데 변수 val1은 아직 선언되기 전이다.
원래대로라면 자바스크립트 코드는 순차적으로 위에서 아래로 실행되기 때문에 참조할 수 없다는 에러가 뜰 것이다.

console.log(vall);
var vall;
undefined
undefined

하지만 결과적으로는 undefined가 뜬다.
자바스크립트 엔진이 변수 선언 코드는 어디에 있든 가장 먼저 실행시키기 때문이다. 그리고 그 후에 다시 순차적으로 코드를 실행시킨다.

이렇게 변수 선언문이 다른 코드들보다 위로 끌어올려져 먼저 실행되는 것을 변수 호이스팅이라고 한다.

[Reference] https://www.youtube.com/watch?v=vMsK5f_0938