자바스크립트 데이터 타입

var num = 1;
var string = '1';
console.log(num + 1); // 2
console.log(string + 1); // '11'

자바스크립트의 모든 값은 데이터 타입을 갖는다. 예를 들어 숫자 1과 문자열 '1'은 같아 보이지만 더하기를 연산자를 사용해 보면 전혀 다른 결과가 나온다. 이처럼 의도에 맞게 정확하게 타입을 지정해 변수에 값을 할당해야 컴퓨터가 메모리에서 읽어 들인 데이터를 정확하게 해석할 수 있을 것이다.

 

⭐ 기본형 데이터(원시 타입)와 참조형 데이터(객체 타입)

기본형과 참조형은 불변성에 따라 나뉘어 지는데 이 때 불변성의 여부는 데이터 영역의 메모리가 변하는지에 따라 판단한다.

var a = 'aaa';		// 기본형
var obj = {		// 참조형
    b : 2,
    c : 'bbb'
};

위와 같이 기본형 데이터 primitive와 참조형 데이터 object를 만든다면 메모리 영역에서는

 

📝 기본형 데이터 할당 과정

1. 빈 공간(0x0000FA32)을 찾아 식별자(a)를 지정한다.
2. 기존 데이터 영역에 저장할 값('aaa')이 이미 있는지 찾아보고 없다면 새로운 공간(0x00000001)을 찾아내 저장한다.
3. 식별자(a)를 찾아 데이터를 저장한 주소와 매핑한다.

📝 참조형 데이터 할당 과정

1. 빈 공간(0x0000FFC8)을 찾아 식별자(obj)를 지정한다.
2. 여러 개의 프로퍼티로 이루어진 데이터 그룹을 저장하기 위해 임의의 데이터 공간(0x0000FFAB)에 프로퍼티의 값들을 저장할 주소를 저장한다.
3. 기본형 데이터 할당 과정처럼 각 프로퍼티를 저장한다.

이제 변수에 값들을 재할당해보자.

a = 3;
obj.c = 'aaa';

📝 기본형 데이터 재할당 과정

1. 식별자(a)를 검색해 저장된 주소를 찾아낸다.
2. 기존 데이터 영역에 저장할 값(3)이 이미 있는지 찾아보고 없다면 새로운 공간(0x00000004)을 확보해 저장한다.
3. 식별자(a)를 찾아 데이터를 저장한 주소와 매핑한다.

📝 참조형 데이터 재할당 과정

1. 식별자(obj)를 검색해 저장된 주소를 찾아낸다.
2. 연결된 데이터 그룹에서 변경할 프로퍼티의 값이 저장된 곳을 찾는다.
3. 기본형 데이터 할당 과정처럼 변경할 프로퍼티를 저장한다.

참조형 데이터는 기본형 데이터와는 다르게 별도의 데이터 그룹을 가리키고 있고 그 영역의 데이터는 얼마든지 바뀔 수 있지만 최종적으로 참조형 데이터로 선언된 변수가 가리키고 있는 데이터 그룹에 저장된 값은 새로운 프로퍼티가 추가되거나 변경된다면 변한다. 이 때문에 참조형 데이터는 불변하지 않다고 한다. 반면, 기본형 데이터는 변수 값이 바뀔 때마다 새로운 공간을 확보하거나 찾아내 변수가 가리키고 있는 주소는 계속 변하지만 그 변수 값 자체는 바꿀 수가 없기 때문에 기본형 데이터는 불변하다 라고 한다.

 

⭐ 기본형 데이터 타입

🧷 숫자 타입

정적 데이터 타입 언어들은 정수와 실수를 구분해 int, long, float, double 등 다양한 숫자 타입이 있지만 자바스크립트는 모든 수를 실수로 처리하며 정수형 데이터 타입이 없다. 

정수	10
실수	9.5
2진수	0b1010
8진수	0o12
16진수	0xa

위 표와 같이 다양한 값들을 표현할 수는 있지만

console.log(0b1010);		// 10
console.log(0o12);		// 10
console.log(0xa);		// 10

콘솔에 출력해보면 결과는 모두 실수로 출력된다. 이는 ECMAScript 사양에 따르면 숫자 타입 값은 모두 64비트 부동소수점 형식의 2진수로 저장되며 2진수, 8진수, 16진수 등을 표현하기 위한 데이터 타입을 지원하지 않기 때문이다.

 

🧷 문자열 타입

문자열 타입은 작은 따옴표(''), 큰 따옴표(""), 백틱(``)으로 텍스트를 감싸 표현할 수 있으며 텍스트를 감싸지 않는다면 토큰으로 인식해 버리기 때문에 꼭 따옴표나 백틱으로 감싸줘야 한다. 

백틱은 ``으로 감싼 값으로 백틱 안에서 ${}을 사용해 문자열 안에서 변수를 사용할 수 있다.

var single = 'hello';
var double = "world";
var backtick = `${single} ${double} 입니다.`;
console.log(single); // hello
console.log(double); // world
console.log(backtick);	// hello world 입니다.

🧷 불리언 타입

불리언 타입은 참(true)과 거짓(false) 두 가지를 표현할 수 있다.

🧷 undefined 타입

undefined는 처음 변수 선언을 한 후 아직 값이 할당되지 않았을 때, 객체 내부의 존재하지 않는 프로퍼티에 접근하려고 할 때, return 문이 없는 함수의 실행 결과 자바스크립트 엔진에서 자동으로 반환되는 값으로 의도적으로 사용하는 것은 권하지 않는다.

🧷 null 타입

null은 undefined와 다르게 개발자가 의도적으로 값이 비었다는 것을 명시하기 위해 사용한다. 주의할 점은 typeof null은 'object'이기 때문에 값의 null 여부를 판단하기 위해서는 일치 연산자(===)를 사용해 'null === 값'으로 판단하는 것이 좋다.

🧷 Symbol 타입

Symbol 타입은 ES6에서 추가된 타입으로 다른 값과 중복되지 않는 유일한 값이다. 다른 기본형 데이터들은 리터럴을 통해 생성하지만 심볼은 Symbol 함수를 호출해 생성한다. 이 때 생성한 심볼은 다른 값과 절대 중복되지 않으며 같은 원시값으로 심볼을 만들더라도 같지 않다.

var symbol1 = Symbol('abc');
var symbol2 = Symbol('abc');
console.log(symbol1); // Symbol(abc)
console.log(symbol1 === symbol2); // false
console.log(symbol1 === 'abc'); // false

⭐ 참조형 데이터 타입

참조형 데이터 타입은 객체이고 객체는 프로퍼티의 수가 정해져 있지 않으며 동적으로 추가, 제거가 가능하다. 프로퍼티의 값에 무엇이든 들어갈 수 있어 메모리 공간의 크기를 사전에 정해둘 수 없다. 

 

🧷 Date 타입

자바스크립트에서 시간을 나타내는 객체이다. new Date() 또는 Date()로 생성할 수 있다.

🧷 배열 타입

배열은 하나의 변수명 아래에 데이터 아이템의 리스트를 0번 인덱스부터 저장할 수 있는 객체이다. 저장된 아이템들에 순차적으로 접근하고 싶을 때 사용하면 좋다. 별도의 프로퍼티명 없이 인덱스로 값을 저장할 수 있어 간편하다. 아래와 같은 다양한 방법으로 생성해 활용할 수 있다.

var arr1 = ['a', 'b', 'c'];
// ['a', 'b', 'c']
var arr2 = new Array(3);
arr2[0] = 'a';
arr2[1] = 'b';
arr2[2] = 'c';
// ['a', 'b', 'c']
var arr3 = new Array();
arr3.push('a');
arr3.push('b');
arr3.push('c');
// ['a', 'b', 'c']
var arr4 = 'a,b,c'.split(',');
// ['a', 'b', 'c']

🧷 정규표현식

문자열에 나타나는 특정 문자 조합과 대응 여부를 판단하기 위한 패턴으로 RegExp의 exec, text 메소드, String의 match, replace, search, split 등의 메소드와 함께 쓰인다. 아래와 같은 방법으로 만들 수 있다.

var regExp1 = /pattern/g;	// 리터럴
var regExp2 = new RegExp('pattern', 'g');	// 생성자

 

이외에 Map, WeakMap, Set, WeakSet 등 ES6에서 추가된 타입들이 있다.

😊 주의

자바스크립트는 선언이 아닌 할당에 의해 타입이 추론되는 동적 타입 언어이다. 변수 자체는 타입을 가지지 않지만 그에 할당된 값은 데이터 타입을 갖는다. 이는 변수를 사용할 때는 매우 편하지만 프로그램의 규모가 커지면 계속 변하는 변수 값의 추론이 어려울 수도 있고 자바스크립트에서 개발자의 의도와는 다르게 자동으로 타입 변환을 해버릴 수도 있다. 따라서 전역 변수의 사용을 줄이고 변수 보다는 상수(변하지 않는 값)를 사용해 추론이 쉽고 가독성 좋은 코드를 만들도록 노력해보자!