[JS] 데이터 타입 - 모던 자바스크립트 Deep Dive

구분	데이터 타입	설명
원시 타입	숫자 타입 (Number Type)	숫자, 정수와 실수 구분없이 하나의 숫자 타입만 존재
	문자열 타입 (String Type)	문자열
	불리언 타입 (Boolean Type)	논리적 참(true)과 거짓(false)
	undefined 타입	값이 없다는 것을 의도적으로 명시할 때 사용하는 값
	null 타입	값이 없다는 것을 의도적으로 명시할 때 사용하는 값
	심벌 타입 (Symbol Type)	ES6에서 추가된 7번째 타입
객체 타입		객체, 함수, 배열 등

6.1 숫자 타입

var integer = 10; // 정수
var double = 10.12; // 실수
var negative = -20; // 음의 정수

var binary = 0b01000001; // 2진수
var octal = 0o101; // 8진수
var hex = 0x41; // 16진수

정수, 실수, 2진수, 8진수, 16진수 모두 메모리에 64비트 부동소수점 형식의 2진수로 저장된다.

 

JS의 숫자 타입은 정수만을 위한 타입이 없고 모든 수를 실수로 처리한다. 이는 정수로 표현된다고 해도 사실은 실수라는 것을 의미한다.

console.log(1 === 1.0); // true
console.log(4 / 2); // 2
console.log(3 / 2); // 1.5

숫자 타입은 다음 세 가지 특별한 값도 표현할 수 있다.

• Infinity: 양의 무한대
• -Infinity: 음의 무한대
• NaN: 산술 연산 불가(Not-a-Number)
  • ⚠️ JS는 대소문자를 구별하기 때문에 NaN을 사용하려면 Nan, NAN, nan등이 아닌 NaN을 정확하게 표기해야 한다.

console.log(10 / 0); // Infinity
console.log(10 / -0); // -Infinity
console.log(1 * 'String'); // NaN​

6.2 문자열 타입

문자열은 작은 따옴표(' '), 큰 따옴표(" ") 또는 백틱(` `)으로 텍스트를 감싸서 표현한다.

var string;
string = '문자열';
string = "문자열";
string = `문자열`;

JS에서 가장 일반적인 표기법 → 작은 따옴표(' ')

6.3 템플릿 리터럴

ES6부터 템플릿 리터럴이라는 새로운 문자열 표기법이 도입되었다. 일반 문자열과 비슷해 보이지만 백틱(` `)을 사용한다.

6.3.1 멀티라인 문자열

일반 문자열 내에서는 줄바꿈(개행)이 허용되지 않는다. 줄바꿈 등의 공백을 표현하려면 이스케이프 시퀀스를 사용해야 한다.

var template = '<ul>\n\t<li><a href="#">Home</a></li>\n</ul>';

console.log(template);

<ul>
  <li><a href="#">Home</a></li>
</ul>

탬플릿 리터럴을 사용하면 이스케이프 시퀀스를 사용하지 않고도 줄바꿈이 허용되며, 모든 공백도 있는 그대로 적용된다.

var template = `<ul>
  <li><a href="#">Home</a></li>
</ul>`;

console.log(template);

<ul>
  <li><a href="#">Home</a></li>
</ul>

6.3.2 표현식 삽입

일반 문자열은 문자열 연산자 +을 사용해 연결할 수 있다.

var first = 'Baek';
var last = 'Dohun';

console.log('My name is ' + first + ' ' + last + '.'); // My name is Baek Dohun.

템플릿 리터럴을 사용하면 ${}으로 표현식을 감싸주면 된다. 이때 표현식의 평가 결과가 문자열이 아니더라도 문자열로 타입이 강제 변환되어 삽입된다.

var first = 'Baek';
var last = 'Dohun';

console.log(`My name is ${first} ${last}.`; // My name is Baek Dohun.

6.4 불리언 타입

불리언 타입의 값은 논리적 참, 거짓을 나타내는 true와 false뿐이다.

var boolean = true;
console.log(boolean); // true

boolean = false;
console.log(boolean); // false

불리언 타입의 값은 조건문에서 자주 사용한다.

6.5 undefined 타입

undefined 타입의 값은 undefined가 유일하다. 앞에서 공부했듯이 var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화된다.

undefined는 개발자가 의도로 할당하기 위한 값이 아니라 JS 엔진이 변수를 초기화 할 때 사용하는 값이다.

6.6 null 타입

null 타입의 값은 null이 유일하다. NaN에서 말했듯이 JS는 대소문자를 구별하기 때문에 Null, NULL 등으로 잘못 적으면 안된다.

6.7 심벌 타입

심벌 타입은 ES6에서 추가된 7번째 타입으로 변경 불가능한 원시 타입이다. 심벌 값은 다른 값과 중복되지 않는 유일무이한 값이다.

var key = Symbol('key');
console.log(typeof key); // symbol

var obj = {};

obj[key] = 'value';
console.log(obj[key]); // value

6.8 객체 타입

JS는 객체 기반의 언어이며 JS를 이루고 있는 거의 모든 것이 객체이다.

6.9 데이터 타입의 필요성

6.9.1 데이터 타입에 의한 메모리 공간의 확보와 참조

JS 엔진은 데이터 타입에 따라 정해진 크기의 메모리 공간을 확보한다. 즉, 변수에 할당되는 값의 데이터 타입에 따라 확보해야 할 메모리 공간의 크기가 결정된다.

 

예를 들어 식별자 score를 통해 숫자 타입의 값 100이 저장된 메모리 공간의 주소를 찾아갈 수 있다고 하자. 정확히 말하면 숫자 값 100이 저장되어 있는 메모리 공간의 선두 메모리 셀의 주소를 찾아갈 수 있다.

 

이때 값을 참조하려면 한 번에 읽어 들여야 할 메모리 공간의 크기를 알아야 한다. 

 

score 변수의 경우 저장되어 있는 값이 숫자 타입이므로 8바이트 단위로 읽어 들이지 않으면 값이 훼손된다.

 

6.9.2 데이터 타입에 의한 값의 해석

식별자 score를 통해 메모리에서 읽어 들인 2진수를 어떻게 해석해야 하는지 고민해봐야 한다. 예를 들어 메모리에 저장된 0100 0001을 숫자로 해석하면 65지만 문자열로 해석하면 'A'다.

 

정리해보면

• 값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해
• 값을 참조할 때 한 번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해
• 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해

6.10 동적 타이핑

6.10.1 동적 타입 언어와 정적 타입 언어

Static/Strong Type Language(정적 타입 언어)

변수를 선언할 때 변수에 할당할 수 있는 데이터 타입을 사전에 선언해야 한다. 정적 타입 언어는 변수의 타입을 변경할 수 없고 변수에 선언한 타입에 맞는 값만 할당할 수 있다.

 

Dynamic/Weak Type Language(동적 타입 언어)

동적 타입 언어는 어떤 데이터 타입의 값이라도 자유롭게 할당할 수 있다. 값을 할당하는 시점에 변수의 타입이 동적으로 결정되고 변수의 타입을 언제든지 자유롭게 변경할 수 있다.

Type Inference(타입 추론)

변수의 타입이 선언이 아닌 할당에 의해 결정된다.