해당 시리즈는 온라인 강의 사이트 '유데미'에서 클린코드 자바스크립트 강좌를 시청하고 작성하는 글입니다.

📌 타입(Type)이란?

타입(Type)

타입(type) 또는 데이터 타입(data type)이란 프로그램에서 다룰 수 있는 값의 종류를 의미합니다.

자바스크립트에서는 여러 가지 형태의 타입을 미리 정의하여 제공하고 있으며, 이것을 기본 타입이라고 합니다.

동적 타입

JavaScript는 느슨한 타입(loosely typed)의 동적(dynamic) 언어입니다. JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 (및 재할당) 가능합니다.

let foo = 42 // 변수 foo의 타입은 숫자
foo = 'bar' // 재할당 후 변수 foo의 타입은 문자열
foo = true // 다시 재할당 후 변수 foo의 타입은 불리언

자바스크립트 타입의 종류

JavaScript는 원시 타입과 참조 타입이라는 두가지 자료형을 제공하며 Object를 제외한 모든것들은 Primitive한 성격을 갖고 있습니다.

• Primitive Type (원시 타입) : 데이터의 실제 값 할당
• Reference Type (참조 타입) : 데이터의 위치 값만 할당

Primitive Type (원시 타입)

• String
• Number
• Boolean
• Undefined
• Symbol

Reference Type (참조 타입)

• Object (Array, Date, Function, ... )

📌 타입 검사

개발을 하면서 타입 검사는 한 번씩 필요한 과정입니다.
그 이유는 자바스크립트 자체가 동적 타입인 언어라서 변수의 타입이 꽤나 자주 변경될 수도 있습니다.
그렇기 때문에 객체의 타입이 무엇인지 확인하고 어떤 동작을 처리할 때가 있습니다.
그렇다면 타입 검사를 하기 위해서는 어떤 방법이 있을까요?

typeof 연산자

typeof '문자열' // 'string'
typeof true // 'boolean'
typeof 123 // 'number'
typeof undefined // 'undefined'
typeof Symbol() // 'symbol'

첫번째로는 typeof 연산자를 이용한 방법이 있습니다.
사용 방법은 typeof 연산자 뒤에 검사를 하고 싶은 피연산자를 입력하면 됩니다.
그리고 검사 결과를 문자열로 반환하는게 특징입니다.

하지만 typeof 연산자는 몇가지 단점이 있습니다.
위의 코드에서 검사한 타입들은 모두 Primitive Type (원시 타입) 값인데요!
그렇다면 Reference Type (참조 타입)을 typeof로 검사하면 어떤 결과가 나올까요?

const arr = [];
const date = new Date();
const object = new Object();

typeof arr // 'object'
typeof date // 'object'
typeof object // 'object'

결과는 모두 object를 반환하였습니다.
이렇듯 typeof 연산자는 원시 타입 대부분을 잘 검사할 수 있지만, 참조 타입의 값들은 정확하게 감별하지를 못합니다.

typeof null

typeof null // 'object'

또한 typeof 연산자는 가장 치명적인 단점이 있습니다.
바로 null 자료형을 검사 시 object를 반환한다는 점입니다.
이 현상은 JavaScript 측에서도 인정한 오류이며, JavaScript가 계속 발전하면서 수정을 할 수 없다고 판단하여 이렇게 계속 남아있게 된 것입니다.

그렇다면 Reference Type (참조 타입)을 조금 더 자세하게 검사하고 싶으면 어떤 방법이 있을까요?

instanceof 연산자

instanceof 연산자를 사용하면 객체가 특정 클래스에 속하는지 아닌지를 확인할 수 있습니다.
문법은 아래와 같습니다.

obj instanceof Class

obj가 Class에 속하거나 Class를 상속받는 클래스에 속하면 true가 반환됩니다.
그렇다면 위의 typeof에서 사용한 예시를 다시 들고와서 보여드리겠습니다.

const arr = [];
const func = function() {};
const date = new Date();

arr instanceof Array // 변수 arr는 Array가 맞으므로 true
func instanceof Function // 변수 func는 Function이 맞으므로 true
date instanceof Object // 변수 date는 Object에 속하므로 true
true instanceof Object // true는 boolean 타입이므로 false

위의 코드를 보면 Reference Type (참조 타입)의 값들도 instanceof 연산자 기준 좌항과 우항을 비교하여 일치하거나 속한다면 true값을 일치하지 않거나 속하지 않는다면 false 값을 반환하는 것을 확인 가능합니다.

Object.prototype.toString

위에서 소개한 typeof와 instanceof 말고도 하나 더 소개할 메서드가 있습니다. 위에서 소개한 instanceof는 참조 타입의 값까지 계산을 할 수는 있지만 그 객체가 어떤 것인지를 반환하지 않고 true 아니면 false값을 반환합니다.

Object.prototype.toString을 사용하면 해당 객체의 정확한 타입을 문자열로 반환해줍니다.

const arr = [];
const func = function() {};
const date = new Date();

Object.prototype.toString.call(1) // [object Number]
Object.prototype.toString.call('문자열') // [object String]

Object.prototype.toString.call(arr) // [object Array]
Object.prototype.toString.call(func) // [object Function]
Object.prototype.toString.call(date) // [object Date]
Object.prototype.toString.call(null) // [object Null]

Primitive Type (원시 타입)과 Reference Type (참조 타입)의 값, 그리고 null까지 문제없이 계산하는 것을 확인할 수 있습니다.

📌 간단 요약

• JavaScript는 동적인 언어로서 변수의 타입이 변하기 쉬움.
• 그렇기 때문에 타입 검사를 하기 어려움이 있을 수 있음.
• 타입 검사를 할 때는 상황에 맞는 타입 검사 방법을 통해 올바른 기능을 구현할 수 있게 명심하자.