[JS] 데이터 타입

자바스크립트를 공부하다 보면 데이터타입이 있나? 라는 생각이 들 수 있을 정도로 타입이 자유롭습니다. 이번 글에서는 자바스크립트의 타입과 해당 타입들이 변수에 어떻게 저장되는지도 함께 알아보도록 하겠습니다.

동적타입

보통 자바스크립트를 동적 타입언어라고 합니다.

정적 타입 언어인 자바와 동적 타입 언어인 자바스크립트의 변수 선언을 살표보고 차이점을 통해 어떤 부분이 다른지 알아보겠습니다.

int a = 10;
boolean b = false;

var a = 10;
var b = false;

차이점이 느껴지시나요? 바로 선언시점에 데이터타입을 명시해주냐의 차이가 있습니다. 정적타입의 언어는 선언시 데이터타입을 정하지만 동적 타이핑언어는 할당 시 데이터타입을 추론하여 정합니다.

이렇게 비교적 넉넉해진 메모리로 인해 데이터 타입을 직접 선언시 해주지 않아도 되도록 만들어졌습니다.

이런 방식으로 인해 자바스크립트는 하나의 변수에 여러 데이터타입이 바뀌어가며 들어갈 수 있습니다.

동적타입에 대해 간단히 알아보며 데이터타입이 있다는 것과 자바스크립트에서 다른 타입들이 하나의 변수에 담길 수 있는지 알게되었습니다. 그렇다면 어떤 타입이 있을까요?

크게 기본형과 참조형이 있습니다. 각각에 어떤 타입이 있는지 알아보고 차이점도 살펴보도록 하겠습니다.

number, string, boolean, null, undefined, Symbol이 기본형에 속합니다. 기본형은 불변하다고 합니다.

참조형엔 Object만 존재합니다. 그렇다면 당연히 Object를 상속받는 Array, Function, Date, RegExp, Map, Set모두 참조형이라 볼 수 있습니다. 참조형은 가변하다고 합니다.

그렇다면 가변과 불변의 차이는 무엇일까요? 이는 자바스크립트의 변수 할당 원리를 이해하면 알 수 있습니다.

var a = 'hello';

위 코드값에 따른 변수 할당에 대한 그림입니다. 식별자 a가 주소-100을 가리키고 있습니다. 해당 주소-100에는 할당된 값 hello가 있습니다.

왜 이런 구조일까 의문이 들 수 있습니다. a가 hello를 가지고 있으면 안될까? 라고 생각이 든다면 정상입니다. 자바스크립트는 변수가 바로 값을 가지지 않습니다. 값의 주소를 가지고 있는데 이 이유를 이제 알아보도롤 하겠습니다.

var a = 'hello';
var b = 'hello';

이렇게 두 변수가 같은 값을 가지게 된다면 어떨까요?

이렇게 같은 주소-100을 가르키게 됩니다. 아까 위에서 바로 값을 가지지 않는 이유를 조금 아실것 같나요? 맞습니다. 중복된 값에 대해 메모리 효율을 높이기 위해서입니다. 중복된 값이 생길때 마다 새롭게 만들기 보다 기존에 있던 값을 참조하면 되기 때문이죠

재할당을 하면 어떻게 될까요?

var a = 'hello';
a = 'changed';

이런 식으로 새로운 값을 아예 새로 만든 후 변수의 참조를 바꿉니다

위와 같이 불변은 변수의 데이터가 바뀌더라도 값은 바뀌지 않는 것을 말합니다. 변수가 가르키는 주소만 바뀔 뿐 hello, changed와 같은 값 자체는 바뀌지 않습니다.

그렇다면 가변, 즉 참조형은 어떻게 할당이 될까요?

var obj = {
  key: 'hello',
  b: true
}

기본형이 할당될때와 달리 다른 프로퍼티를 관리하는 메모리 공간이 있습니다. 해당 공간에 프로퍼티들이 있으며 이 프로퍼티들이 값의 주소를 가르킵니다. 여기서의 값은 물론 불변입니다.

그러면 여기서 객체의 프로퍼티값을 수정해보겠습니다.

var obj = {
  key: 'hello',
  b: true
}

obj.a = 'changed';