자바스크립트의 데이터 타입

이 글은 C, C++에 익숙한 개발자의 시점으로 작성됐습니다.

Symbol과 Object는 다루지 않습니다. 이 두 가지는 다른 포스팅에서 자세히 다룰 예정입니다.

자바 스크립트의 데이터 타입은 크게 두 가지로 나눠질 수 있다. 첫 번째는 기본 타입, 두 번째는 객체(Object)이다. 기본 타입은 숫자, 문자열, 불리언, undefined, null, Symbol(ECMAscript6)로 나눠지며 객체는 배열, 함수, 정규표현식으로 나눠진다.

이 글에서는 기본 타입에 해당하는 데이터 타입들을 살펴볼 것이다.

숫자(Number)

---

C, C++, Java는 숫자를 정수, 실수로 나눠 \(int\),  \(float\),  \(double\) 등과 같은 다양한 타입이 존재한다. 하지만 자바스크립트에서는 모든 숫자를 64비트 부동 소수점으로 저장하기 때문에 숫자 타입이 하나밖에 없다. 이는 ECMAscirpt 명세서 4.3.20 에서 확인할 수 있다.

그렇기 때문에 변수에 값을 초기화 할 때 정수, 실수 구분없이 바로 저장이 가능하다. 아래 예제에서 \(num\)에는 10을, \(PI\)에는 3.14를 대입한 뒤 출력하면 10과 3.14가 출력되는 것을 확인할 수 있다.

var num = 10
var PI = 3.14

console.log(num, PI)

> 10 3.14

어떻게 보면 상당히 편리하다고 생각할 수 있다. 하지만 모든 수들이 부동 소수점으로 저장되기 때문에 연산을 할 때 주의해야 한다. 두 가지 예제를 보면서 어떤 위험이 도사리고 있는지 확인을 해 보자.

첫 번째 예제는 나눗셈에서 흔히 할 수 있는 실수다. 변수 \(a\)에는 정수 3을, \(\ b\)에는 정수 2를 대입한다. 그리고 \(a\ /\ b\)를 출력해 보자. C++에 익숙한 개발자라면 당연히 출력값이 1이라고 생각한다. 하지만 이는 잘못된 생각이다. 자바스크립트는 모든 숫자 타입이 부동 소수점으로 저장되기 때문에 두 숫자를 실수로 취급하고 계산을 한다. 그렇기 때문에 1.5가 출력된다.

원하는 값인 1을 얻으려면 내장 함수 Math.floor( )을 사용하면 된다.

var a = 3
var b = 2

console.log(a / b)
console.log(Math.floor(a / b))

> 1.5
> 1

두 번째 예제는 두 수를 더할 때 발생할 수 있는 부동 소수점 오차이다. 부동 소수점은 한정된 메모리 내에서 넓은 범위의 수를 표현하기 위해 사용된다. 하지만 정확한 수를 저장하는 것이 아니라 근삿값으로 저장을 하기 때문에 연산을 할 때 오차가 발생을 할 수 있다. 아래 예제를 보면서 확인을 해보자.

var a = 0.1
var b = 0.2

console.log(a * b, a + b)

> 0.020000000000000004 0.30000000000000004

우리가 원하는 값은 암산으로 계산할 수 있을 정도로 간단하다. 0.1과 0.2을 곱하면 0.02가 돼야하고 0.1과 0.2를 더하면 0.3이 돼야 한다. 하지만 실제로 출력된 값은 기괴하기 짝이없다. 이런 부동 소수점 오류는 개발자가 의도하지 않은 상황을 야기하기 때문에 항상 주의를 할 필요가 있다.

문자열(String)

---

문자열은 말 그대로 문자열을 표현할 수 있는 데이터 타입이다. C, C++에서는 문자열은 큰따옴표로 초기화 하고, \(char\)는 작은따옴표로 초기화를 했다. 하지만 자바스크립트는 다르다. 큰따옴표와 작은따옴표 모두 문자열을 초기화 하는데 사용할 수 있다. 그리고 위에서 언급을 안했듯이 자바스크립트에는 \(char\)타입이 없다.

var str1 = "hello world"
var str2 = 'hello world'
var ch = 'c'

console.log(
	typeof str1,
	typeof str2,
	typeof ch
)

> string string string

위 예제에서는 str1은 큰따옴표로 문자열을 초기화하고, str2는 작은따옴표로 문자열을 초기화했다. 마지막으로 ch 변수에 한 문자만 대입했다. 그리고 typeof 연산을 통해 str1, str2, ch의 데이터 타입을 출력한다. 세 변수 모두 string 데이터 타입을 갖는 것을 확인할 수 있다.

문자열에서 주의할 점은 한번 초기화 된 문자열은 변하지 않는다는 점이다. 아래 예제를 살펴보자.

var str = "hello world"
str[0] = "H"

console.log(str)

> hello world

위 코드를 작성한 개발자는 첫 글자를 대문자로 바꾸고 출력하길 원했다. 하지만 출력 결과는 의도와는 전혀 다르게 원래 문자열이 출력된다. 심지어 런타임때 에러도 발생하지 않는다!! 자바스크립트에서 문자열을 수정하려면 새롭게 문자열 변수를 만들어 줘야 한다.

불리언(Boolean)

---

불리언 타입은 C나 C++과 거의 비슷하다. true 또는 false의 값을 가진다. 불리언에 대해서는 자세히 다룰 내용이 없으므로 간단한 예제코드 하나를 보고 넘어가자.

var bool = true

console.log(typeof bool)

> boolean

undefined와 null

---

undefined와 null은 한 챕터에서 설명을 하려 한다. 두 개를 헷갈려서 사용하는 개발자들이 의외로 많기 때문이다. 특히 C++이나 JAVA를 다루다 자바스크립트를 처음 접하는 사람들은 이 두 개의 차이를 확실하게 알아 둘 필요가 있다.

undefined는 값이 정의되지 않은 상태다. 변수가 선언된 뒤 어떠한 값도 할당받지 못한 상태라 할 수 있다. undefined 타입은 값 또한 undefined이다. 즉 undefined는 타입과 값을 동시에 나타내는 것이다.

null은 개발자가 명시적으로 값이 없다는 것을 나타내는 것이다. 여기서 주의할 점은 null의 typeof 값은 object라는 점이다. 따라서 자바스크립트에서 null 값을 확인할 때 일치 연산자('===')를 사용해 값을 직접 비교해야 한다.

아래 예제에서 아무 값도 할당하지 않은 변수가 undefined 타입을 가지는 것을 확인할 수 있다.

var undefinedVal
var nullVal = null

console.log(undefinedVal, typeof undefinedVal) // undefined 'undefined'
console.log(nullVal, typeof nullVal) // null 'object'

console.log(typeof nullVal == null) // false
console.log(nullVal == null) // true

> undefined 'undefined'
> null 'object'
> false
> true