[JS] 클린코드 - 타입 검사하기(typeof, instanceof, Object.prototype)

typeof, instanceof, Object.prototype의 차이점을 알아보기 전에 

JS의 타입들을 간단히 살펴보자!

 

JS 타입

PRIMITIVE(원시값) vs REFERENCE(자료형 객체)

PRIMITIVE(원시값)	REFERENCE(자료형 객체)
string, boolean, number..	Array, function, Date, String...

그렇다면 타입 검사할때 'typeof'로 모든 것을 구별할 수 있을까? NO!

 

REFERENCE(자료형 객체)는 'typeof'로 간별해내기 어렵다. 

왜냐면, JS는 동적으로 변하는 언어로, 타입도 동적으로 변화하기때문이다.

// 이번 코드에서 console.log()를 생략했다.
function a(){}
class b{}

typeof a //function
typeof b //function -> b는 class가 정답임. 잘못 간별함.

 

또한 'typeof'는 Wrapper객체도 간별하지 못한다.

const str = new String('먀')
typeof str //object -> str은 String임. 잘못 간별함.

더불어 js에서 인정하는 언어적인 오류가 존재한다.

바로 그건 << 'typeof'에서 null을 object로 인식하는 것 >>

console.log(typeof null) // object

 

 

그렇다면 'instanceof'는 어떨까?

'instanceof': 객체의 프로토타입 체인을 검사한다. (즉 Parent를 검사한다고 이해하면 되겠다.)

unction Pet(name,age){
    this.name=name;
    this.age=age;
}

const cat=new Pet('루키',2)

const c={
    name:'test',
    age:1
}
cat instanceof Pet //true
c instanceof Pet //false

위의 예제를 보면 instanceof로 REFERENCE 객체를 제대로 간별하는 것 같지만,

함정이 있다!

<< 모든 REFERENCE의 Parent는 Object>> 라는 점이다.

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

arr instanceof Array //true
func instanceof Function //true
date instanceof Date //true

// 최상위는 Object가 있기때문에 type을 구별하는데 어려움이 있음
arr instanceof Object //true
func instanceof Object //true
date instanceof Object //true

 

우리가 REFERNCE를 간별해내기 위한 해결방법은!

Object가 모든 객체의 최상위 객체임을 활용해서 Object.prototype을 이용해서 간별하는 것이다.

Object.prototype.toString.call(arr) // object Array
Object.prototype.toString.call(func) // object Function
Object.prototype.toString.call(date)) // object Date