데이터 타입

첫 글로 자바스크립트의 데이터 타입에 대해 정리해보겠다.

 

 

자바스크립트 데이터 타입은 크게 기본형과 참조형으로 분류할 수 있다.

 

기본형

기본형에는 Number, String, Boolean, null, undefined, Symbol 타입이 있다.

여기서 Number는 정수형, 부동소수형 상관없이 모두 8byte를 할당한다.

 

문자열은 글자당 영어는 1byte, 한글은 2byte 가 할당된다. 그래서 문자열에 대해서는 메모리가 가변적이다.

 

 

참조형

참조형에는 객체(Object)가 있다. 

 

그리고 객체의 하위로

Array, Function, Date, RegExp, Map/weakMap, Set/WeakSet이 속해있다.

 

 

 

자바스크립트 데이터 타입 기본형과 참조형

 

 

 

기본형의 특징과 데이터 처리 과정

그렇다면 이러한 데이터들이 자바스크립트에서 어떻게 처리되는지도 알고싶어진다.

그래서 먼저 기본형의 특징과 데이터 처리 과정을 정리해보겠다.

 

기본형은 '불변성'을 띄고있다.

 

여기서 불변성이란 '변하지 않는다' 라는 것을 뜻한다.

 

진짜 변하지 않는지 코드로 살펴보겠다.

 

let value= 'test';
console.log(value); //test

value= 'test2';
console.log(value); //test2

값이 변한것을 볼 수 있다;;;;;

 

그렇다면 도대체 뭐가 불변성이라는 것인가.

 

 

 

 

 

그건 바로 메모리 영역의 변화를 보면 알 수 있다.

 

먼저 위의 코드에서 value='test' 일 경우,

 

변수 영역

주소	1001	1002	1003	1004	1005	...
데이터		이름: value 값: @3002

 

데이터영역

주소	3001	3002 (4byte)	3006	3007	3008	...
데이터		'test'

 

(참고로 메모리 영역을 다 표현하기에는 벅차다. 그러니깐 대략적으로 표현하겠다. 어차피 데이터 처리 과정이 어떻게 되는지만 이해하면 되니깐)

 

변수영역과 데이터 영역에 나뉘어서 각각 값이 저장된 모습을 볼 수있다.

 

그리고 이걸 과정으로 표현하자면,

 

1. 변수 영역의 주소 1002번에 공간을 확보하고, 확보한 공간의 식별자 명을 value로 지정된다.

2. 그리고 데이터 영역의 주소 3002번에 'test'가 저장된다. 

3. 데이터영역의 주소 3002를 변수 영역의 식별자 value(주소 1002)의 값으로 지정된다.

 

 

 

그렇다면 위의 코드에서 value='test2'로 값을 변경할 경우, 

 

변수 영역

주소	1001	1002	1003	1004	1005	...
데이터		이름: value 값: @3006

 

데이터영역

주소	3001	3002 (4byte)	3006 (5byte)	3011	3012	...
데이터		'test'	'test2'

 

기존의 데이터 영역에 있는 'test'의 값이 변하지 않는 것을 볼 수 있다.

대신 'test2' 라는 값이 주소 3006번에 새로 생겨 데이터영역의 3006주소에 할당된 모습을 볼 수 있다.

 

이처럼 기존의 값을 변경하면 기존의 값은 그대로 메모리에 유지되고, 새로운 값이 데이터 영역의 주소에 할당 된다.

결국, 기존의 값은 변하지 않는다. 그러므로 불.변.성이다.(불변성 여부를 구분할 때의 변경 가능성의 대상은 데이터 영역 메모리이다)

 

이러한 이유 때문에 기본형이 불변값을 띈다고 하는거다.(예시를 문자열로만 들었지만, 숫자형, boolean, null 등 기본형 타입은 모두 이와 동일하게 불변값이다.)

 

(아 참고로 기존의값 'test'를 더이상 참조(사용)하는 변수가 없으면 가바지컬렉터의 수거 대상이 되어 정리된다.)

 

 

 

 

그런데 왜 변수 영역의 주소 1002번 값에 'test'를 바로 집어넣지 않고,

데이터 메모리 영역을 따로 만들어서 'test'를 할당한 후, 그 값을 변수영역 주소 1002번의 값에 데이터 영역 3002번주소('test'값이 있는 주소)를 할당하였는가? 

 

그건 바로 메모리를 효율적으로 관리함과 동시에 데이터 변환을 자유롭게 하기 위해서이다.

 

2가지 경우를 예로 들자면,

 

1. 만약, 미리 확보한 메모리 영역 공간의 주소1002번의 값이 'test' 라고 생각해보자.(주소 1002의 값에 'test'할당) 

   그리고 그 값('test')이 'testm9m9' 라고 바뀌었다고 가정하자.(주소1002의 값을 'testm9m9'로 변경

    그러면 test뒤에 m9m9 4byte가 추가되었기 때문에 4byte의 영역을 더 가져가야한다.

    그런데 주소1002번의 뒤에 이미 메모리가 할당된 변수들이 존재한다면, 그 변수들은 m9m9가 추가된 만큼 주소를 뒤로 이동시켜야한다.

     그리고 이동한 주소를 다시 식별자에 연결해야하는 작업을 해야한다.

     이러한 경우는 굉장히 컴퓨터 연산이 많아질 것이다.

 

2. 정수형 데이터의 값 7 을 가지고 있는 변수 500개를 생성한다고 하자.

    그리고 그 변수들의 값을 데이터 영역으로 분리시키지 않고, 한 메모리 영역에 모두 집어넣었다고 가정하자.

   그러면 메모리는 정수형 데이터 값 7의 byte는 8이고, 변수 500개가 메모리에 할당됐으니 500*8byte =총 4000byte를 차지하는 것이다.

 

   그런데 만약 변수 영역과 데이터 영역으로 나눈다면, 

   데이터 영역에 정수형 데이터 값 7을 할당하고, 변수 영역에 500개의 변수를 생성한다. 그리고 그 변수에 데이터 영역에 7의 주소를 입력한다.(즉 500개가 7의 주소 값을 공유한다.)

  그러면 결국 메모리는 7에 대한 메모리 8byte가 한번만 할당되게 되고, 변수영역에 해당하는 메모리만 필요로 하게 되므로

   결과 값은 (500+8byte) = 총 508 byte가 된다.  (변수 영역의 할당된 변수들의 크기를 1개당 1byte로 가정했을 때)

    

 

메모리를 굉장히 효율적으로 사용할 수 있기 때문에 자바스크립트는 변수영역과 데이터 영역을 분리하여 저장하며, 기본형 타입들이 불변값을 띄는거다.

     

 

 

 

참조형의 특징과 데이터 처리 과정

기본형 타입을 알아봤으니, 이제는 참조형 타입의 특징과 데이터 처리과정을 정리해보겠다.

 

참조형 데이터는 대부분 가변값인 경우가 많지만, 어떻게 설정하냐에 따라 불변값도 될 수 있다.

 

그렇다면 참조형 데이터 타입이 왜 대부분 가변값인지 메모리 영역을 그려보며 확인해보겠다.

 

 

let object = {
	a:1,
    b: 'ccc'
};

 

 

변수 영역

주소	1001	1002	1003	1004	1005	...
데이터		이름: 객체1 값: @5002

 

데이터영역

주소	5001	5002	5003	5004	5005	...
데이터		@7002~7003		1	'ccc'

 

주소 5002의 변수 영역

주소	7001	7002	7003	7004	7005	...
데이터		이름:a 값: @5004	이름:b 값: @5005

 

과정을 살펴보면,

먼저 주소 1002에 식별자명을 '객체1'로 지정한다.

그리고 값을 저장하려고보니 객체이면서 속성으로 a와 b를 가지고 있는 데이터 그룹이다.

그리고 a와 b도 각각 1와 'ccc'라는 값을 가지고 있다.

그래서 먼저, 주소 5002에 a와 b가 할당된 공간이 저장된다.(7002~7003)

그리고 주소 7002와 7003에 각각 식별자 a, b라는 이름이 붙는다

그 후, 메모리 영역에 1과 ccc를 검색하는데 존재하지 않으니깐, 5004주소와 5005 주소에 1과 ccc를 할당한다.

그리고 그 주소를 식별자 a의 값(주소 7002)과 식별자b의 값(주소7003)에 각각 할당한다.

 

 

이렇게 보면 결국 기본형과 원리는 비슷한데, 객체의 변수 영역이 따로 존재하고 있는 차이점이 있다.(데이터 영역이 불변값인것은 기본형과 똑같다.)

 

 

그렇다면 왜 참조형 데이터가 가변값이라고 불리는것인가? 

그 이유는 객체의 값은 변할 수 있기 때문이다.

 

let object = {
	a:1,
    b: 'ccc'
};

object.b='ddd';

만약 object.b의 값을 ccc로 바꾸게 되면 

 

 

 

변수 영역

주소	1001	1002	1003	1004	1005	...
데이터		이름: 객체1 값: @5002

 

데이터영역

주소	5001	5002	5003	5004	5005	5006
데이터		@7002~7003		1	'ccc'	'ddd'

 

주소 5002의 변수 영역

주소	7001	7002	7003	7004	7005	...
데이터		이름:a 값: @5004	이름:b 값: @5006

 

주소 1002와, 5002가 가리키는 값은 변하지 않고, 객체 내부의 값만 바뀌었다. 즉 새로운 객체가 만들어진게 아니라 기존의 객체 내부의 값이 바뀌었으니 이것은 가변 값이라고 할 수 있다. 

 

 

 

 

 

참고자료: https://book.naver.com/bookdb/book_detail.nhn?bid=15433261

코어 자바스크립트