[코어JS] 1. 데이터 타입

자바스크립트의 데이터타입은 크게 두 가지로 분류 됨.
Primitive Type(기본형) / Reference Type(참조형).

기본형에는 숫자, 문자열, boolean, null, undefined, symbol(ES6에서추가)가 있음.
참조형에는 객체(배열, 함수, 정규표현식 등)이 있음.

이들을 구분하는 이유와, 어떤 차이가 있는지는 각 데이터가 메모리상에서 저장되는 형태를 통해서 알 수 있음.

자바스크립트 메모리 구조는 스택 메모리와 힙 메모리 영역으로 나뉘어 있음. 스택 영역에는 변수와 함께 기본형 데이터가 저장이 되고, 힙 영역에는 참조형 데이터가 저장 됨. 여기서는 이 둘을 뭉뚱그려서 전체 메모리로 생각하기로 함.

기본형의 데이터 할당순서

var a;

변수 a를 선언하면, 메모리에서 데이터가 담길 임의의 공간(1003)을 확보함. 확보한 공간의 이름에 식별자(a)를 지정함.

a = 'abc';

코드를 진행하다 할당하는 명령을 만나면 문자열 'abc'를 비어있는 다른 임의의 메모리 공간(5004)에 저장. 이 주소를 든 채로 변수 a가 있는 주소로 이동하여 값에 5004를 넣음.

a = 'abcdef';

재할당을 하면 새 메모리에 값을 저장하고 a를 찾아 주소를 바꿈.

참조형의 데이터 할당순서

var obj = {
  a: 1,
  b: 'bbb'
};

변수를 선언하고 할당하는 것 까지 기본형과 동일. 컴퓨터는 아래의 코드처럼 선언과 할당을 분리해서 실행.

var obj;

obj = {
  a: 1,
  b: 'bbb'
};

선언을 하면 임의의 공간(1002)의 이름을 obj라고 함. 값을 할당하려고 임의의 공간(5002)를 확보했지만 여러개의 데이터가 필요한 상황. 임의의 공간(7103~?)을 확보하고 이 공간의 데이터들을 이 객체의 프로퍼티로 지정. 기본형 변수를 할당하는 것 처럼 이름에 프로퍼티명을 지정하고, 값을 임의의 공간(5003)에 할당한 뒤 주소를 지정. 5002의 주소에 값을 다 할당한 후 이 주소를 들고 obj에 할당.

obj.a = 2;

재할당을 하면 임의의 공간(5005)에 값을 지정하고, 이것을 든 채로 obj.a를 찾아감. 그리고 값을 5005의 주소로 변경.
여기서 기본형의 경우에는 데이터의 주소가 바뀌었으나, 참조형의 경우 obj의 주소는 유지 됨.

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

배열 역시 참조형 데이터로, 여유롭게 공간을 확보하고 할당.
다른 얘기지만 3과 같이 재사용되는 데이터가 있을 경우 새로 메모리를 소모하지 않고 해당 주소를 여러번 참조하는 특징이 있음(값을 직접 저장하지 않고 값의 주소를 저장함). 특정 값을 저장할 때 사용된 적이 있는지 확인해야 하는 단점이 있지만, 같은 주소를 보고있으면 무조건 같은 값이기에 비교과정에서 소모되는 시간이 줄어들음. 중복사용의 빈도가 늘어날 수록 차이는 커짐. 즉, 할당시에 느리지만 비교에 비용이 들지 않고 메모리 낭비가 줄어듦. 비교에 비용이 들지 않는다는 것은 같은 값이 전체 메모리 공간상에 오직 하나만 존재한다는 뜻. 이 때문에 기본형 데이터가 불변값이라고 함.

obj.arr = 'str';

문자열로 재할당 하게되면 새 메모리에 문자열을 저장하고, 해당 프로퍼티에 대한 값을 변경 함. 이후 참조카운트가 0이된 데이터들은 가비지컬렉터에 의해 제거 됨.

var a = 10;
var b = a;
var obj1 = { c: 10, d: 'ddd' };
var obj2 = obj1;

이와 같이 기본형이든 참조형이든 초기에는 복사하게 되면 값이 같음.

b = 15;
obj2.c = 20;

수정시에 기본형은 값이 바로 변경되나, 참조형은 여전히 같은 값(객체)을 가리키고 있음.
객체 복사 후 복사한 객체의 값을 수정하면 원본 객체의 값이 같이 바뀌는 현상도 이것 때문임.
이에 대한 해결책으로 매번 새로운 객체를 만드는 불변객체와 같은 개념으로 연계 됨.