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

수정·2022년 10월 11일

목록 보기

3/33

데이터 타입은 값의 종류를 말한다. 자바스크립트(ES6)는 7개의 데이터 타입을 제공한다. 7개의 데이터 타입은 원시타입과 객체타입으로 분류할 수 있다.

1. 원시타입
- 숫자 타입 : 숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재
- 문자열 타입 : 문자열
- 불리언 타입 : 논리적 참(true)과 거짓(false)
- undefined 타입 : var 키웓로 선언된 변수에 암묵적으로 할당되는 값
- null 타입 : 값이 없다는 것을 의도로적으로 명시할 때 사용하는 값
- 심벌타입 : ES6에서 추가된 7번째 타입

2. 객체타입
- 객체, 함수 배열 등

#1 숫자타입

자바스크립트의 숫자 타입은 정수만을 위한 타입이 없고 모든 수를 실수로 처리한다고 했다. 숫자 타입은 추가적으로 세 가지 특별한 값도 표현할 수 있다.

Infinity : 양의 무한대

-Infinity : 음의 무한대

NaN : 산술 연산 불가(not-a-number)

자바스크립트는 대소문자를 구별하므로 NaN을 NAN, Nan, nan가 같이 포현하면 에러가 발생하므로 주의해야한다.

#2 문자열 타입

문자열 타입은 텍스트 데이터를 나타내는 데 사용한다. 문자열은 작은따옴표( ' ' ), 큰따옴표( " " ) 또는 백틱( ` ` )으로 텍스트를 감싼다. 자바스크립트에서 가장 일반적인 표기법은 작은따옴표를 사용하는 것이다.

#3 템플릿 리터럴

ES6부터 템플릿 리터럴이라고 하는 새로운 문자열 표기법이 도입되었다. 템플릿 리터럴은 멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등 편리한 문자열 처리 기능을 제공한다.

템플릿 리터럴은 작은따옴표 또는 큰따옴표 같은 일반적인 따옴표 대신 백틱을 사용해 표현하다.

멀티라인 문자열

[ES5:일반 문자열]
var str = 'Hello
world.';
// SyntaxError: Invalid or unexpected token

[ES6:템플릿 리터럴]
var template = `<ul>
  <li><a href="#">Home</a></li>
</ul>`;

console.log(template);
/*
<ul>
  <li><a href="#">Home</a></li>
</ul>
*/

일반 문자열 내에서는 줄바꿈(개행)이 허용되지 않는다.
템플릿 리터럴 내에서는 이스케이프 시퀀스를 사용하지 않고도 줄바꿈이 허용되며, 모든 공백도 있는 그대로 적용된다.

표현식 타입

var first = 'Ung-mo';
var last = 'Lee';

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

// ES6: 표현식 삽입
console.log(`My name is ${first} ${last}.`); 
// My name is Ung-mo Lee.

ES5 : 문자열은 문자열 연산자 + 를 사용해 연결할 수 있다.
ES6 : 템플릿 리터럴 내에서는 표현식 삽입을 통해 문자열을 삽입할 수 있다.
( 표현식을 삽입하려면 ${}으로 표현식을 감싼다. )
템프릿 리터럴이 아닌 일반 문자열에서의 표현식 삽입은 문자열로 취급된다.

#4 불리언 타입

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

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

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

#5 undefined 타입

undefined 타입의 값은 undefined가 유일하다.
변수에 값이 없다는 것을 명시하고 싶을 때는 null을 할당한다.

var foo;
console.log(foo); // undefined

#6 null 타입

null 타입의 값은 null이 유일하다. 자바스크립트는 대소문자를 구별하므로 null은 Null, NULL 등과 다르다.

함수가 유효한 값을 반환할 수 없는 경우 명시적으로 null을 반환하기도 한다.

<!DOCTYPE html>
<html>
<body>
  <script>
    var element = document.querySelector('.myClass');

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

#7 심벌타입

심벌은 ES6에서 추가된 7번째 타입으로, 변경 불가능한 원시 타입의 값이다. 심벌 이외의 원시 값은 리터럴을 통해 생성하지만 심벌은 Symbol 함수를 호출해 생성한다. 이때 생성된 심벌값은 외부에 노출되지 않으며, 다른 값과 절대 중복되지 않는 유일무이한 값이다.

// 심벌 값 생성
var key = Symbol('key');
console.log(typeof key); // symbol

// 객체 생성
var obj = {};

// 이름이 충돌할 위험이 없는 유일무이한 값인 심벌을 프로퍼티 키로 사용한다.
obj[key] = 'value';
console.log(obj[key]); // value

#8 객체 타입

자바스크립트는 객체 기반의 언어이며, 자바스크립트를 이루고 있는 거의 모든 것이 객체이다.

#9 데이터 타입의 필요성

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

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

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

데이터 타입은 값의 종류를 말한다. 자바스크립트의 모든 값은 데이터 타입을 갖는다. 데이터 타입이 필요한 이유는 다음과 같다.

값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해

값을 참조할 때 한 번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해

메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해

#10 동적 타이핑

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

C나 자바 같은 정적 타입 언어는 변수를 선언할 때 변수에 할당할 수 있는 값의 종류, 즉 데이터 타입을 사전에 선언해야 한다. 이를 명시적 타입 선언이라 한다. 정적 타입 언어는 컴파일 시점에 타입 체크를 수행한다. 대표적인 정적 타입 언어로 C, C++, 자바, 코틀린, 고, 하스켈, 러스트, 스칼라 등이 있다.

자바스크립트는 정적 타입 언어와 다르게 변수를 선언할 때 타입을 선언하지 않는다. 자바스크립트의 변수는 어떠한 데이터 타입의 값이라도 자유롭게 할당할 수 있다.

var foo;
console.log(typeof foo);  // undefined

foo = 3;
console.log(typeof foo);  // number

foo = 'Hello';
console.log(typeof foo);  // string

foo = true;
console.log(typeof foo);  // boolean

foo = null;
console.log(typeof foo);  // object

foo = Symbol(); // 심벌
console.log(typeof foo);  // symbol

foo = {}; // 객체
console.log(typeof foo);  // object

foo = []; // 배열
console.log(typeof foo);  // object

foo = function () {}; // 함수
console.log(typeof foo);  // function

자바스크립의 변수는 선언이 아닌 할당에 의해 타입이 결정 (타입 추론) 된다. 그리고 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다. 이러한 특징을 동적 타이핑이라고 하며, 자바스크립트를 정적 타인 언어와 구별하기 위해 동적 타입 언어라 한다. 대표적인 동적 타입 언어로는 자바스크립트, 파이썬, PHP, 루비, 리스프, 펄 등이 있다.