[JavaScript]타입 확인 방법

JavaScript는 타입을 유연하게 처리할 수 있는 프로그래밍 언어입니다.

 

그래서 변수에 어떠한 값이 할당될지 예상하기가 어렵습니다.

 

이번 포스팅은 JavaScript에서 타입을 체크하는 3가지 방법인 typeof, instanceof, Object.prototype.toString을 정리합니다.

 

목차

1. typoeof
2. instanceof
3. Object.prototype.toString

---

typeof

typeof 연산자는 우측 피연산자의 타입을 문자열로 반환합니다.

typeof 1
// "number"

typeof 'code'    
// "string" 

typeof undefined
// "undefined"

typeof function () {console.log('code')}   
// "function" 

typeof Symbol
// "function"

주로 원시 타입을 체크하기 위한 용도로 사용합니다.

 

typeof [1, 2, 3]
// "object" 

typeof {name: 'code' }
// "object"

typeof null
// "object"

typeof /^\d/  
// "object"

typeof new Date()
// "object"

Date, RegExp, Error, 배열, 객체 등 객체가 우측 피연산자에 올 경우 typeof 연산자는 object를 반환하므로 객체의 세부적인 타입을 체크하기에는 제한적입니다.

 

우측 피연산자	typeof 연산자의 반환 값
string	string
number	number
boolean	boolean
null	object
undefined	undefined
symbol	function
object	object

null은 자바스크립트를 처음 구현할 때, 타입 태그를 0x00으로 표시되었습니다.

 

객체의 타입 태그는 0으로 시작하는데, null의 타입 태그도 0으로 시작하는 이유로 object를 반환합니다.

 

즉, typeof null이 object를 반환하는 이유는 자바스크립트 설계의 실수입니다.

반응형

---

instanceof

typeof 연산자는 원시 타입을 체크하기 위해서 유용했으나 객체를 세부적으로 체크하지 못하고 object로 반환하는 문제가 있습니다.

 

반대로 instanceof 연산자는 객체를 세부적으로 체크할 수 있지만, 원시 타입을 체크하는 용도로는 적합하지 않습니다.

 

insatnceof 연산자는 왼쪽 피연산자가 우측 피연산자의 인스턴스인지 체크합니다.

A instanceof B

 

A가 B의 인스턴스이면 true를 반환하고 그렇지 않으면 false를 반환합니다.

[] instanceof Array
// true

[] instanceof Object
// true

new Array ([1, 2, 3]) instanceof Array
// true 

new Array ([1, 2, 3]) instanceof Object
// true

// error가 발생합니다.
// Uncaught SyntaxError: Unexpected token 'instanceof'
{} instanceof Object

// Object.create(null) 는 프로토타입에 정의되어 있지 않습니다.
Object.create({ 'name' : 'JavaScript' }) instanceof Object 
// true

new Date() instanceof Date
// true 

new Date() instanceof Object
// true

'JavaScript' instanceof Object  
// false

'JavaScript' instanceof String
// false

new String( "JavaScript" ) instanceof Object
// true 

new String( "JavaScript" ) instanceof String
// true

1 instanceof Object
// false

1 instanceof Number
// false 

new Number( 1 ) instanceof Object
// true

new Number( 1 ) instanceof Number
// true

true instanceof Object 
// false

true instanceof Boolean 
// false 

new Boolean(true) instanceof Object
// true

new Boolean(true) instanceof Boolean
// true

null instanceof Object
// false

undefined instanceof Object
// false

Symbol() instanceof Symbol
// false

instanceof 연산자의 특징

• 리터럴로 생성된 배열 또는 생성자 키워드로 생성된 배열은 Object와 Array에 속합니다.
• 객체 리터럴로 생성된 객체 {} instanceof Object는 에러를 반환합니다.
• 생성자로 생성된 객체는 Object에 속합니다.
• 원시 타입은 Object에 속하지 않습니다. 생성자 키워드를 사용하여 생성된 문자열, 숫자, 불리언은 Object 및 해당 타입에 속합니다.

---

Object.prototype.toString

toString()은 Object의 프로토타입(prototype) 함수입니다.

 

재정의되지 않은 toString()을 호출하면, [object type]을 문자열로 반환합니다.

 

type은 검사하고자 하는 객체를 call 함수나 apply 함수를 사용해서 전달한 첫 번째 파라미터의 타입입니다.

Object.prototype.toString.call([])
// "[object Array]"

Object.prototype.toString.call(new Array ([1, 2, 3]))
// "[object Array]" 

Object.prototype.toString.call({})
// "[object Object]"

Object.prototype.toString.call(Object.create({ 'name' : 'JavaScript' }))
// "[object Object]"

Object.prototype.toString.call(new Date())
// "[object Date]" 

Object.prototype.toString.call('JavaScript')
// "[object String]"

Object.prototype.toString.call(new String('JavaScript'))
// "[object String]"

Object.prototype.toString.call(1)
// "[object Number]" 

Object.prototype.toString.call(new Number(1))
// "[object Number]" 

Object.prototype.toString.call(true)
// "[object Boolean]"

Object.prototype.toString.call(new Boolean(true))
// "[object Boolean]"

Object.prototype.toString.call(null)
// "[object Null]"

Object.prototype.toString.call(undefined)
// "[object Undefined]"

Object.prototype.toString.call(Symbol())
// "[object Symbol]"