[Deep Dive] 6장 데이터 타입

팡긍·2022년 5월 4일

JavaScript Deep Dive

목록 보기

4/8

데이터 타입 Data Type 은 값의 종류를 말한다. 자바스크립트뿐만이 아니라 내가 알고 있는 모든 프로그래밍 언어는 데이터 타입을 갖는다. ES6 기준 자바스크립트는 총 7개의 데이터 타입을 제공한다.

구분	데이터 타입	설명
원시 타입	number	숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재
	string	문자열
	boolean	논리적 true와 false
	undefined	var 키워드로 선언된 변수에 암묵적으로 할당되는 값
	null	값이 없다는 것을 의도적으로 명시할 때 사용하는 값
	symbol	ES6에서 추가된 7번째 타입
객체 타입		객체, 함수, 배열 등

데이터 타입을 공부할 때에 undefined와 null이 좀 헷갈릴 수 있는데 흔히 인터넷에 돌아다니는 다음 짤을 보면 쉽게 이해가 될 것이다. 이에 대해서는 추후에 다시 다룰 예정이다.

자바스크립트 타입의 예시를 보자. number 타입의 값 1과 string 타입의 '1'은 1이 있기에 비슷해 보이지만 전혀 다르다. JS는 동적 타입을 가진 언어이다. 그렇기에 타입에 신경써주지 않으면 추후 개발을 할 때에 꽤 골치 아플 것이다. 나는 아직 TypeScript를 공부해보진 않았지만, TS는 JS와 다르게 변수에 Type 설정을 할 수 있다고 알고 있다. 이는 타입체크로 인하여 JS보다 속도가 조금 느릴 것 같지만 그만큼 타입에 대해서 안전할 것같다는 생각이 든다.

JS에서도 // @ts-check를 통하여 타입을 설정할 수 있지만, 이 책을 공부할 때에는 바닐라 JS에 대해 공부할 것이기에 지금 당장은 다루지 않을 것이다.

6.1 숫자 타입

C/C++이나 Java의 경우에는 정수와 실수를 구분해서 int, long, float, double 등으로 다양하게 숫자 타입을 정의해준다. 하지만 JS는 그런 것 따위 없다. 오로지 하나이다.
ECMAScript 에 따르면 숫자 타입은 64비트 부동소수점 형식을 따른다고 한다. 즉, 모든 수를 실수로 처리하고, 정수만 표현하는 데이터 타입은 존재하지 않는다.

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

// 표기법만 다를 뿐, 모두 같은 값이다.
var binary = 0b01000001
var octal = 0o101
var hex = 0x41

console.log(binary) // 65
console.log(octal)  // 65
console.log(hex)    // 65
console.log(binary === octal) // true
console.log(octal === hex)    // true

위에서 JS의 숫자 타입은 모두 실수로 처리한다고 말했다. 그렇기에 다음과 같은 코드처럼 정수로 표기해도 사실 실수라는 것을 잊지 말자.

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

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

Infinity : 양의 무한대
-Infinity : 음의 무한대
NaN : 산술 연산 불가 (not-a-number)

console.log (10/0)        // Infinity
console.log (10/-0)       // -Infinity
console.log(1 * 'String') // Nan

6.2 문자열 타입

String 타입은 텍스트 데이터를 나타내는 데 사용한다. 문자열은 0개 이상의 16비트 유니코드 문자(UTF-16)의 집합으로 전 세계 대부분의 문자를 표현할 수 있다.

var string
string = '문자열' // 작은 따옴표
string = "문자열" // 큰 따옴표
string = `문자열` // 백틱(ES6)

6.3 템플릿 리터럴

ES6부터 템플릿 리터럴 template literal 이라고 하는 새로운 문자열 표기법이 도입되었다. 이는 다음과 같은 기능을 제공한다

멀티라인 문자열 multi-line string
표현식 삽입 expression interpolation
태그드 템플릿 tagged template

👉 템플릿 리터럴은 런타임에 일반 문자열로 변환되어 처리된다.
👉 또한 백틱을 사용해 표현한다.

var template = `Template Literal`
console.log(template) // Template Listeral

6.3.1 멀티라인 문자열

일반 문자열 내에서는 개행이 허용되지 않는다. 따라서 개행이나 공백 등을 표현하려면 \으로 시작하는 이스케이프 시퀀스 escape sequence 를 사용해야 한다.

Escape Sequence	의미
`\0`	Null
`\b`	백스페이스
`\f`	Form Feed
`\n`	개행
`\r`
`\t`
`\v`
`\uXXXX`
\`	작은 따옴표
`\"`	큰 따옴표
`\\`	백슬래시

예를 들어, 줄바꿈과 들여쓰기가 적용된 HTML 문자열은 다음과 같이 작성하면 된다.

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

console.log(template)

출력한 결과는 다음과 같다.

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

사실 일반 문자열과 달리 템플릿 리터럴 내에서는 이스케이프 시퀀스를 사용하지 않고 백틱 안에서 개행 및 공백이 허용된다.

6.3.2 표현식 삽입

문자열은 문자열 연산자 + 를 사용해 연결할 수 있다. + 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작하게 된다.

var first = 'PanGeun'
var last = 'Jeon'

// ES5 : 문자열 연결
console.log('My name is ' + first + ' ' + last + '.')

// ES6 표현식 삽입
console.log('My name is ${first} ${last}')

ES6 표현식 삽입을 보면 ${}을 통해 할 수 있다. 이때, 평가 결과가 문자열이 아니더라도 문자열로 타입이 강제로 변환되어 삽입된다.

6.4 불리언 타입

Boolean 타입은 true와 false 뿐이다.

var foo = true
console.log(foo) // true

foo = false
console.log(foo) // false

6.5 undefined 타입

undefined 타입이 유일한 타입이다.
var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화된다. 다시 말해, 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이뤄질 때까지 빈 상태로 내버려두지 않고 자바스크립트 엔진이 undefined로 초기화한다.

즉, 변수를 참조했을 때 undefined가 반환된다면 참조한 변수가 선언 이후 초기화가 되지 않았다는 것을 알 수 있어야 한다.

👉 변수에 값이 없다는 것을 표현하고 싶으면 null 을 할당해 주면 된다.

6.6 null 타입

null 타입 또한 null이 유일하다. 이는 변수에 값이 없다는 것을 의도적으로 명시할 때 사용하며, null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미이다.

함수가 유효한 값을 반환할 수 없는 경우 명시적으로 null을 반환하기도 한다. 예를 들어, HTML 요소를 검색해 반환하는 document.querySelector 메서드는 조건에 부합하는 HTML 요소를 검색할 수 없는 경우 에러 대신 null을 반환한다.

<!DOCTYPE html>
<html>
<body>
  <script>
    var element = document.querySelector('.myClass');
    
    // HTML 문서에 myClass 클래스를 갖는 요소가 없다면 null을 반환한다.
    console.log(element); // null
  </script>
</body>
</html>