웹/JS핵심개념 JS Flow

[JS Flow] 01. 데이터 타입

onwah 2021. 1. 18. 19:17

JS에는 두 가지 데이터 타입이 있다.

  1. Primitive Type
    • string
    • number
    • boolean
    • null
    • undefined
    • symbol
  2. Reference Type
    • Object (Array, function, regExp, Set, weakSet, Map, weakMap)

이 둘을 왜 구분하는가?

메모리에 값을 저장하는 방식의 차이이다.

Primitive Type

위와 같이, 메모리 공간이 컴퓨터에 있다고 가정하자.

let a;
a = 'hi'

위 코드를 js엔진이 읽어 실행하면

let a; // 메모리의 5001번 주소에 이름이 a가 된다.
a = 'hi' // 메모리의 8001번 주소에 값 'hi'가 저장이 되고, 이름 a를 갖고있는 5001번 주소에는 8001번의 주소값이 저장된다.

위의 주석과 같이 실행이 된다.

Reference Type

Reference Type은 복수 개의 Primitive Type을 저장한다.

let b;
b = {
     c: 123,
      d: 'ho'
}

위 코드를 js엔진이 읽어 실행한다면

let b; // 메모리의 5002번 주소에 이름이 b가 된다.
b = {  // 메모리의 8002번 주소에 c와 d를 저장할 메모리 영역 주소값(ex. 9001 ~ 9002)이 저장되고, 변수명 b를 갖고있는 5002번 주소에는 8002번의 주소값이 저장된다.
     c: 123, // 메모리의 9001번 주소에 변수명 c가 저장되고, 다른 공간에 123값이 저장된 뒤 해당 공간의 주소를 9001번에 저장한다
      d: 'ho' // 메모리의 9002번 주소에 변수명 d가 저장되고, 다른 공간에 'ho'값이 저장된 뒤 해당 공간의 주소를 9002번에 저장한다
}

위의 주석과 같이 실행 된다.

재할당이 일어난다면

primitive type

let a = 1;
a = 2;

2가 저장된 메모리주소를 찾고, 존재하지 않는다면 새로운 메모리 주소에 값을 저장한 다음, 해당 주소값을 변수a 메모리에 저장한다.

reference type

let b = {
  c: 1,
  d: 2
};
b.c = 3;

사실 primitive type의 재할당과 다르지 않다. 변수 c의 주소까지 찾아가 값을 저장하는 주소값을 바꿔준다 생각하면 된다.

재할당이 일어나서 c의 기존값인 1은 어떻게 되나?

1이 연결(link)된 변수가 없다면 (이를 link count가 0이 된다라고 한다) Garbage Collector(GC)가 해당 할당된 메모리를 해제한다.