[JavaScript] 원시 자료형 vs. 참조 자료형 개념 정리 (Primitive data type vs. Reference data type)

JavaScript의 데이터 타입(Data type) 는 크게 두 가지로 분류 된다.
1. 원시 자료형(Primitive data type)
2. 참조 자료형(Reference data type)

이 두 가지에 대해서 개념 정리를 해보자.

원시 자료형 (Primitive data type)

• 객체가 아니면서 method 를 가지지 않는 데이터 타입이다.
• 즉 number, string, boolean, bigint, symbol, null, undefined 이 이에 해당 된다.
• 고정된 저장 공간을 차지하는 데이터이다.
• 변수에 원시 자료형이 할당될 때는 값(value) 으로 할당 된다.
• 원시 자료형은 모두 하나의 정보를 담고 있다.
• 원시 값은 변경이 불가능한 값이다. (immutable)

원시 자료형의 예를 찾아보자.

let x = 10;
y = x;
y = 8;

console.log(x); // ?

여기서 console.log(x)는 무엇이 출력될까?
답은 10.
왜 8이 아니고 10인지 원리를 생각해보자.

• x 라는 변수가 선언이 되었으니 메모리 공간을 확보한다.
• 메모리 공간의 이름은 x 이다.
• 메모리 공간에 10 이라는 number 타입의 값이 들어간다.
• 변수 y에 변수 x를 할당할 경우, 먼저 y 라는 이름의 새로운 메모리 공간이 확보된다.
• 변수 y에 할당 받은 변수 x의 값이 10, 즉 원시 값이므로 그 값을 복사해서 y 라는 메모리 공간에 넣는다. (y 메모리 공간에 10이 담겨 있다.)
• 현재 x 라는 메모리 공간에 10, y 라는 메모리 공간에 10이라는 원시 값이 들어있다.
• y 에 8 이라는 원시값을 재할당 한다.
• 기존의 y 의 메모리 공간에는 이미 10 이라는 원시값이 있으므로, y는 새로운 메모리 공간을 확보하고 그 곳에 8을 담는다.
• 그리고 그 메모리 공간의 이름이 y 가 된다.

막상 이렇게 두서 없이 적고 보니.... 그림이 이해하기 쉽겠다는 생각이 든다...ㅋㅋ

결국 핵심은, y = x 의 의미는 y 가 10을 복사했다는 것이다.
x = 10 , y = 10
하지만 이 두 값은 다른 메모리 공간을 가지고 있는 별개의 값이다. (중요!!!!)
마지막 3번 줄에서 y에 3이라는 새로운 원시 값을 재할당했으므로, y = 3 이 되지만, x 는 그대로 10이다.

참조 자료형 (Reference data type)

• 원시 자료형이 아닌 모든 것은 참조 자료형이다.
  - JavaScript 에서 원시 자료형이 아닌 모든 것은 객체(object) 이다.
• array, object, function 이 이에 해당한다.
• 동적으로 크기가 변하는 저장 공간을 사용하는 데이터이다.
• 변수에 참조 자료형이 할당될 때는 주소(reference)가 할당된다.
• 참조 자료형의 값, ( = 객체; object) 는 변경이 가능한 값이다. (mutable)

참조 자료형의 예를 살펴보자.

let x = {a: 3};
let y = x;
y.a = 2;

console.log(x);

console.log(x) 는 무엇이 출력이 될까?
답은 {a: 2}.

그 이유를 살펴보자.

• 앞서 원시 자료형에서는 y = x 이었을 때, y에 x의 값을 복사해서 할당했다.
• 참조 자료형에서는 y = x 일 떄, 값이 아닌 x의 주소(reference) 를 가져온다.
• y = x 이 상태에서는, 변수 x와 변수 y는 {a: 3} 을 가리키는 같은 reference 를 가지고 있다.
• 그런데 y.a 가 2로 변경이 되었다. (* 참고: 참조자료형에서 객체타입의 값은 변경 가능, mutable 하다.)
• x 와 y는 같은 reference 를 가지고 있기 때문에 x.a 도 2가 되는 것이다.
• 그래서 x = {a: 2} 가 된다.