코어 자바스크립트 첫 포스팅!
자바스크립트 핵심 개념들을 글을 쓰면서 이해하고 싶어서 인프런 정재남 강사님의 코어 자바스크립트 강의를 참고하여 글을 작성해보려고 합니다!
코어 자바스크립트 시리즈 첫번째 글. "데이터 타입" 을 주제로 포스팅 시작합니다!
데이터 타입
자바스크립트의 데이터 타입은 크게 두가지로 나뉩니다!
- Primitive Type (
기본형 or 원시타입) - Reference Type (
참조형 or 객체타입)
그리고 또 각각은 다음과 같이 나뉩니다
Primitive Type
NumberStringBooleannullundefinedSymbol
등등..
Reference Type
Reference Type 의 대표적인 타입은 Object (객체) 이고
Object 에서 다음과 같이 나뉩니다. ( 그래서 객체 타입이라고 부르기도 하는 것 같습니다. )
ArrayFunctionRegExpSet / WeaksetMap / Weakmap
등등 ...
두 타입이 어떻게 다른지 구조적인 부분에서 한번 살펴볼까요?
우선, 자바스크립트의 메모리 구조을 간략하게 그려보면 다음과 같습니다.
Stack 과 Heap 두 영역으로 나뉘고, Stack 영역에는 변수, 기본형 타입이 할당되고 데이터들을 정적할당 하는 특징을 지닙니다.Heap 영역에는 참조형 타입이 할당되고 데이터들을 동적할당 하는 특징을 지닙니다.
두 타입이 각각 어떤식으로 메모리에 할당되는지 한번 살펴보면서 느낌을 한번 봅시다.
먼저 기본형(원시 타입)부터 살펴보겠습니다.
변수 선언
Primitive Type
var a;a 라는 이름의 변수를 선언 했습니다.
이후, 메모리 공간을 확보하고 그 확보한 공간에 a 라는 이름이 지정됩니다.
아직 값을 할당하지 않았으므로 우선은 값이 없습니다.
이제 다음 코드를 실행하여 값을 할당한다고 해봅시다.
a = 'abc''abc' 라는 문자열 값을 변수 a에 할당했습니다.
먼저 리터럴 'abc'를 비어있는 임의의 메모리 공간에 할당합니다.
그 다음 'abc' 가 할당되어 있는 메모리 공간의 주소값이 변수 a 의 값으로 들어갑니다.
그림으로 나타내면 다음과 같습니다.
위 예제가 기본형 데이터의 값을 메모리공간에 할당하는 기본적인 구조입니다.
만약 여기서 변수 a 에 대해서 새로운 값을 할당하게 되면 어떻게 될까요?
5001 번 주소에있는 리터럴 'abc' 를 변경해서 바꾸게 될까요? 그렇지 않습니다.
어떤식으로 재 할당되는지 살펴보겠습니다.
a = 'bbb''bbb' 라는 값을 a에 재할당 한다고 가정합니다.
'bbb' 가 임의의 메모리 공간에 새로 생기게됩니다. 주소는 5003 번 주소군요.
컴퓨터에 이제 이'bbb' 를 변수 a 에 할당하라는 명령이 들어왔으니 명령을 수행할 차례겠군요.
bbb 의 주소값이 변수 a 에 새롭게 할당됬습니다!
여기까지 기본형 타입이 메모리 공간에 어떻게 할당되는지에 대한 설명입니다.
이제 참조형 데이터에 대해서 한번 살펴보겠습니다.
Reference Type
다음과 같은 코드가 있습니다.
var obj = {
a : 1,
b: 'bbb'
}이 코드를 풀어쓰면 다음 코드와 같습니다.
var obj;
obj = {
a : 1,
b : 'bbb'
}이 코드는 어떤식으로 할당되게 될까요?
먼저 obj를 선언했으니, 메모리공간에 obj가 할당됩니다.
이제 obj에 객체를 할당해줘야겠죠.
그런데 메모리 구조 공간 한 칸에는 값 하나만 들어갈 수 있다는 특징이 있습니다.
{ a : 1, b: 'bbb' } 를 통쨰로 넣을 수 없다는 이야기입니다.
그러면 이 부분을 어떻게 처리할까요?
그림과 함께 설명하겠습니다.
화살표로 가르키는 부분이 객체의 메모리 공간입니다. { }
그 다음 각 객체에 들어가는 프로퍼티들을 위한 공간을 넉넉하게 확보합니다. (빨간색 사각형으로 감싼 부분)
그러면 이제 프로퍼티를 위한 별도의 공간이 할당이 됬으니, 여기에 프로퍼티들을 각각 할당하는 겁니다.
최종적으로는 위와 같은 구조가 되겠죠.
리터럴인 1, 'bbb' 를 임의의 메모리 공간에 할당하고, 각 프로퍼티의 값에 그 주소값들이 들어가는겁니다.
그림엔 빠졌지만 obj 의 값은 7000 이 되는 구조겠죠!
기본형같은 경우엔 간단하게 해당하는 데이터의 주소값을 한번만 할당하면 끝났는데, 참조형은 한 단계를 더 거치게 된거죠.
그러면 이후에 obj.a의 값을 다른 값으로 재할당하면 어떤식으로 될까요?
obj.a 의 값을 2로 바꾼다고 생각을 해봅시다.
obj.a = 2;2 는 조금 긴 모험을 하게 될겁니다.
순서를 나타내보겠습니다.
1. 7003번 주소에 2가 할당됩니다.
2. 2는 자기가 들어갈 obj 를 먼저 찾습니다.
3. obj를 찾았습니다! 이제 본인이 들어가야 할 객체(@7000)를 찾습니다.
4. @7000 을 찾았습니다! 이제 a를 찾습니다!
5. a 를 찾았습니다! a 안에 할당된 기존 값 (@7001) 을 대체합니다!
6. obj.a 의 값은 @7001 에서 @7003으로 대체됩니다!
obj.a 의 값이 바뀌었지만, obj 의 값인 @7000은 바뀌지 않는것을 확인할 수 있습니다.
기본형 타입과 비교해서 차이점이 느껴지지 않나요? 👀
기본형은 값이 바뀔때마다 해당 변수가 참조하는 값이 계속 바뀌었는데 참조형은 그렇지 않다는걸 확인할 수 있죠!
참조형 데이터 타입은 한번 더 참조 과정을 거친다고 생각하면 이해하기 쉽습니다!
var obj = {
x : 3,
arr : [3, 4]
}이런 구조가 있으면 어떻게 될까요? arr 부분을 할당 할 때 위에서 했던 과정이 한번 더 반복되는겁니다!
arr 또한 obj가 했던것처럼 넉넉한 메모리 공간을 우선 확보하고, 3, 4의 주소값이 이 각각 0 ,1 이라는 이름 (배열의 인덱스니깐 0, 1) 을 가진 메모리 공간에 할당이 되겠죠.
만약 arr 이 'str'이라는 문자열 값으로 변경되면 어떻게 될까요? 기존에 [3, 4] 를 품고 있는 메모리주소가 arr 에 할당되있었는데 arr에 할당된 값의 메모리 주소가 'str' 의 메모리 주소로 대체가 되겠죠.
그러면 [3, 4] 은 어떻게 될까요? 자기 자신을 아무도 메모리 공간상에서 참조하고 있지 않습니다. 참조 카운트가 0이 된거죠.
참조 카운트?
메모리 공간상에서 자기 자신을 참조하고있는 요소의 수입니다.
참조 카운트가 0이 되면 어떻게 될까요?
바로 가비지 컬렉터의 수집 대상이 됩니다.
아무도 참조를 안하고있다는말은, 아무도 저 데이터를 사용하지 않고 있다는 뜻이 됩니다.
그런데 계속 메모리 공간상에 존재한다는것은 민폐겠죠? 아무도 사용을 하지 않는데 자원을 먹고있으니깐요.
참조 카운트가 0 인 데이터들은 가비지 컬렉터에 의해 언젠가 사라지게 됩니다!
값의 복사
var a = 10;
var b = a;
var obj1 = {c: 10, d: 'bbb'};
var obj2 = obj1;이제 값의 복사에 대해서 알아봅시다.
우선 기본형 데이터에 대해서 먼저 빠르게 알아보겠습니다.
기본형 데이터
숫자 리터럴 10의 메모리 공간을 3001 이라고 가정합니다.
a의 값은 @3001이 되겠죠.
그리고 b에 a를 할당합니다.
변수에는 값 이 저장되어야 하니, b의 값은 @3001이 됩니다. 간단하죠?
이제 참조형은 값의 복사가 어떻게 이루어지는지 한번 살펴볼까요?
참조형 데이터
참조형 데이터도 우선은 크게 다르지 않습니다.
간단하게 요약하면 obj1, obj2도 {c: 10, d: 'bbb'} 의 메모리 주소값을 가지게 됩니다. 우선은요!
이제 비교를 한번 해봅시다!
비교
다음과 같은 코드가 실행됬다고 해봅시다.
b = 15;
obj2.c = 20;먼저 b 에 대해서 한번 살펴볼께요. 15라는 숫자 리터럴 값의 새롭게 할당되겠죠.
즉, a 와 값이 달라지게 됐습니다. 아까는 같이 @3001 을 참조하고 있었지만요!
참조 타입은 어떨까요?
결론은 obj1 과 obj2 가 가르키는 주소값은 변하지 않는다 입니다.
너무나도 당연하죠! 현재 obj1 obj2 가 가르키는 값은 같고, 그 안에 있는 프로퍼티의 주소값이 변경된 것 이니깐요!
이번 포스팅은 여기서 마무리 하겠습니다!
참고 👀
- 인프런 - 코어 자바스크립트 강의 (정재남)
