[Javascript 기초] 데이터 타입

최근 기초의 심화 과정이라고 해야할까...

읽고 까먹고 읽고 까먹고 했던 부분을 상기시키는 시간을 가지고 있다.

기초가 제일 어려워 🫨

 

Javascript의 데이터 타입에 대해 정리하려고 한다.

단순히 string, number, array 하나씩 이건 이겁니다 하는것은 아니고

크게 Primitive Type(원시타입)과 Reference Type(참조타입)에 대해 보려고한다.

 

Primitive Type

:: Null, Undefined, Number, String, Boolean, Symbol, BigInt ...

 

Reference Type

:: Object, Array, Function ...

---

 

Primitive Type의 변수는 크기가고정되어 있기때문에 스택 메모리에 저장되게 된다.

아래와 같은 코드를 예시로 실제 메모리에 어떻게 저장되는지 한번 알아보자 🤔

var a;
a = 1;
a = 2;

 

순서를 다 표현하진 안았고 일부 그려 왔다 😅

1. 변수 a가 1002 메모리에 선언 된다. 이때 값은 물론 undefined

2. 5002번 메모리에 값이 1들어가고 a의 값으로 5002번 메모리 주소가 들어간다.

3. 이후 2라는 값으로 재할당 하기위해 5003번에 2를 저장한 후에

4. 1002번 값이 5002에서 5003으로 변경 된다.

5. 5002번을 참조하는 카운트가 0이 되면서 갈비지 컬렉터에 의해 비워지게 된다.

이렇듯 Primitive Type을 보면 값이 변경될때마다 참조하는 메모리 주소가 변경된다.

---

Reference Type에 해당하는 Object, Array등을 보면 크기를 알 수 없다.

때문에 힙 메모리에서 동적으로 크기를 조절한다.

var obj = {
    x: 3,
    arr: [3, 4]
};

obj.arr = 'str';

출처: 인프런 코어 자바스크립트 강의

어으😐 더 복잡다!

1. 1002 메모리에 obj 객체를 선언해주고

2. 값으로 5002번을 저장하고 있는데 이때 Primitive Type과 다른 점을 볼 수 있다. 앞서 말했듯이 이 객체의 크기가 어느정도 될지 알 수 없다. 그래서 우선 임의의 영역을 확보하고 값을 저장한다.

3. 5002메모리는 7103을 참조하고 있고 7103부터 객체의 값들을 저장

.

.

.

4. 이후 obj.arr = 'str'을 만났을때의 이미지다. Primitive Type처럼 obj의 값이 변경 되는 것이 아니라 obj의 값 5002번이 참조하고 있는 메모리의 값이 변경되고, 실질적으로 obj의 값은 변경되지 않는다.

5. obj.arr='str'이 다 실행되었다면 7104의 값으로 5004 -> 5006으로 변경되었을 것이다.

 

많은 사람들이 이런 경험이 있을 것이라 생각한다.

코딩을 하다 배열 또는 객체를 복사했다고 생각하고 복사한 객체의 값을 변경했는데

원본 객체랑 같이 값이 변경되는!!

모든 이유가 참조 타입일 경우 위와 같이 흘러가기 때문이였던 것이다...