1. 데이터 타입

---

Primitive Type

• Number
• String
• Boolean
• null
• undefined
• Symbol

Reference Type

• Object
  • Array
  • Function
  • RegExp
  • Set / WeakSet
  • Map / WeakMap

---

자바스크립트 메모리 구조

• stack memory
  : 변수, 기본형 데이터, 정적 할당

• heap memory
  : 참조형 데이터, 동적 할당

---

메모리에 할당되는 방식

⭐Primitive Type

var a; // a가 1002번에 선언
a = 'abc'; // abc가 5004에 할당되고 1002번 메모리는 @5004라는 주소를 가리키는 값을 가짐
a = 'abcdef'; // abcdef가 5005에 할당되고 1002번 메모리 값의 주소가 5005로 변경

⭐Reference Type

var obj = {
  a: 1,
  b: 'bbb',
}
// 1. obj 1002번에 선언
// 2. 객체 값을 담기 위해 5002번 메모리로 이동했으나 여러 값을 담아야 하므로 @7103 ~ ? 라는 값을 가지게 됨
// 3. 7103번 메모리에 이름: a를 담고 1이라는 값을 담아야함
// 4. 1을 비어있는 5003번에 할당하고 7103번 메모리의 값에 @5003을 넣어줌
// 5. 7104번에 b라는 이름을 붙이고 비어있는 5004번에 'bbb' 할당
// 6. 7104번의 값에 @5004를 대입
// 7. 1002번 메모리의 값에 @5002 할당

// 위에 이어서
obj.a = 2; 
// 1. 5005번에 2라는 값 할당
// 2. obj.a 찾기 (obj(1002번) => @5002 => @7103~? => 7103부터 이름이 a인것 탐색
// 3. 7103번의 값을 @5005로 교체

참조 카운트가 0인 메모리는 가비지 컬렉터의 수집 대상이 된다.

Q. 왜 데이터의 값에 직접 값을 저장하지 않고 다른 곳에 할당한 후 주소 값을 주는걸까?

: 할당 할 당시에는 기존에 저장된 값과 동일성을 판단하느라 시간이 더 걸리지만 그 후에는 비교 과정이 발생했을 때 같은 주소를 보고 있는지만 확인하면 되므로 비용이 발생하지 않는다.
또한 메모리도 훨씬 덜 차지한다.

---

변수 복사

var a = 10;
var b = a;
var obj1 = { c: 10, d: 'ddd' };
var obj2 = obj1
// 과정 위와 동일
// 1005번에 이름 obj2로 지정하고 obj1의 값인 @5003을 동일하게 할당

// 위와 이어서
b = 15;
obj2.c = 20;
// 1. 5004번에 15 할당 후 b를 찾아가서 값을 @5004로 변경
// 2. 5005번에 20 할당 후 obj2 찾아가기
// 3. obj2의 값인 @5003으로 이동
// 4. 5003의 값인 @7103 ~ ? 으로 이동
// 5. 7103부터 c 찾기
// 6. c의 값을 @5005로 변경
// 결론 : a와 b는 값이 따로 바뀌지만 obj1과 obj2는 여전히 같은 주소값을 가리키므로 obj2를 변경해도 원본 객체인 obj1 또한 변경

더 읽어볼 자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures#%EC%A0%91%EA%B7%BC%EC%9E%90_%EC%86%8D%EC%84%B1