[자바스크립트] 데이터 타입의 종류

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

자바스크립트는 느슨한 타입(loosely typed)의 동적(dynamic)언어이다. 그렇기 때문에 자바스크립트의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당(및 재할당)이 가능하다.

 

그렇다하더라도, 자바스크립트의 타입에 대해서는 알고 있어야 한다. 동적 타입을 제공하지만, 값이 할당되는 순간에는 해당 변수의 타입이 정해지고, 이 때 어떠한 타입으로 정해지는지를 정확히 알고 있어야 원하는 결과대로 동작하는 코드를 작성할 수 있다.

 

자바스크립트에서는 여러가지 형태의 타입을 미리 정의하여 제공하고 있으며, 이것을 기본타입이라고 한다. 자바스크립트의 기본 타입은 원시 타입과 객체 타입으로 구분된다.

 

 

원시타입

원시타입으로는 다음과 같다.

Type	Description
number	숫자 값
string	문자열
boolean	true / false
null	값이 없음을 명시
undefined	변수가 초기화 되지 않음을 암시
symbol	ES6에서 등장한 타입, 변경 불가능한 유일한 값을 생성(값자체의 확인X -> 외부로 노출되지 않는다.)
BigInt	ES2020에서 등장한 새로운 데이터 타입, Number 보다 큰 정수를 표현

원시타입은 값을 저장하기 위해 Call Stack의 타입에 따른 고정된 메모리 공간을 사용하고, 실제 데이터가 변수에 할당된다. 즉, 원시타입은 값을 가지는 데이터 타입인 것이다.

 

Null vs Undefined

자바스크립트의 데이터 타입을 접할 때, 가장 많이 어려워 하는 것이 null과 undefined의 차이점이다. 둘 다 null 또는 undefined라는 하나의 값만을 가질 수 있고 값이 없을 때 사용하는 타입이기 때문에 더욱 둘의 차이점이 구분이 가지 않는 것이다.

 

먼저 null 타입은 해당 변수의 값이 없음을 의도적으로 명시하기 위한 데이터 타입이다. 즉, null 타입은 값이 없는 것이 실수가 아니라는 것이다!!(이 포인트가 핵심이다) 또한, null은 원시타입이지만 typeof 연산자를 통해 출력을 하면 object 타입이 출력이된다.

 

반면에 undefined는 해당 변수가 초기화가 되지 않았음을 암시한다. 즉, 개발자의 실수로 값이 없는 변수가, 또는 메모리 공간이 할당되었을 때, 자바스크립트가 undefined 타입으로 초기화를 시켜주는 것이다. 그렇기 때문에 코드 실행 도중, undefined가 나오면, 초기화 되지 않은 변수나 존재하지 않는 값에 접근하고 있다는 의미이다.(코드가 이상하다는 의미..)

 

 

객체(Object) 타입

자바스크립트에서는 숫자, 문자열, boolean, undefined 타입을 제외한 모든 것이 객체이다. 심지어, 앞서 언급하였던 숫자, 문자열 boolean 또한 값이 정해진 객체로 취급되어, 객체로서의 특징도 함께 가지고 있다.

 

객체의 타입은 Object로 표시되고, 자바스크립트에서는 Object라는 타입 아래에 여러 객체 타입을 가지고 있다. 

• Object : {}
• Array : []
• Date : Date()

이 외에도, 기본 타입의 null 또한 객체 타입을 가지고 숫자, 문자열, boolean의 Wrapper 객체 또한 여기에 속한다.

 

 

function 타입

자바스크립트에서는 함수(function)을 데이터로 취급한다. 그렇기 때문에 함수를 저장하고 있는 데이터를 함수 타입이라 한다. 함수 타입의 데이터를 이용한다면 아래와 같은 표현이 가능해진다.

//변수 addNum에 매개변수 2개를 전달받아 더한 값을 반환하는 함수 데이터를 대입
const addNum = (a, b) => a + b;
console.log(addNum(1, 2)); //3

//함수 데이터이기 때문에 매개변수로 넘겨줄 수 있음
function param(add) {
    return add(1, 2);
}

console.log(param(addNum));

 

 

 

typeof 연산자

typeof 연산자는 피연산자를 하나 가지는 단항 연산자로서, 피연산자의 타입을 반환하는 연산자이다.

//typeof 연산자를 이용하여 데이터 타입 확인
console.log(typeof 'hello' === 'string');
console.log(typeof 123 === 'number');
console.log(typeof 123n === 'BigInt');
console.log(typeof false === 'boolean');
console.log(typeof null === 'object');
console.log(typeof [] === 'object');
console.log(typeof {} === 'object');
console.log(typeof function() {} === 'function');


//배열과 객체 구분법
console.log([].constructor === Array);
console.log({}.constructor === Object);

 

하지만 typeof 연산자를 이용하면, 객체 타입을 가지는 데이터들은 구분할 수 없다는 단점이 있다. 배열과 객체의 구분할 수 있는 방법도 다른 object 타입은 구분할 수 없다.

 

이 때에 다음과 같은 방법을 사용한다면 Object 타입의 데이터를 세세하게 구분할 수 있다.

// 먼저, 다음 코드가 무엇을 출력하는지 확인해보자
console.log(Object.prototype.toString.call(null));  //[Object Null]

// 위의 출력 결과에서, 뒷부분만 잘라내기
// Null이 잘 출력됨
console.log(Object.prototype.toString.call(null).slice(8, -1));  //Null

// 위의 형식은 모든 Object 객체에서 가능
// => 함수로 만들어서 사용
function checkType(data) {
    return Object.prototype.toString.call(data).slice(8, -1);
}

// 해당 함수로 Object 타입 비교
console.log(checkType(null) === 'Null'); //true
console.log(checkType([]) === 'Array');  //true
console.log(checkType({}) === 'Object'); //true