[JavaScript] 자바스크립트 typeof, instanceof 차이

typeof란?

typeof는 피연산자의 데이터 타입을 반환하는 연산자이다. 하나의 피연산자를 오른쪽에 두며 피연산자의 원시 타입(primitive type)을 string 형태로 반환한다.

 

예를 들어 

[그림 1] typeof 예시

 

위와 같이 string 타입 변수를 피연산자로 받으면 'string'을 반환한다.

 

 

typeof가 반환하는 값은 다음과 같다.

 

• 'boolean'  : 불리언
• 'number' : 숫자
• 'string' : 문자열
• 'object' : 객체
• 'function' : 함수
• 'undefined' : undefined
• 'symbol' : ES6부터 추가된 Symbol 타입

 

typeof를 사용하는 다양한 예시를 보자.

 

 

[그림 2] typeof 다양한 예시

 

특이한 경우 몇 개만 짚어보겠다.

 

{ }는 객체기 때문에 'object'를 반환한다. 또한 배열인 [ ] 도 객체로 취급해 'object'를 반환한다.

 

null 값의 type은 객체로 판단해 'object'를 반환한다. 

var x = null;
 
if(typeof x === 'object'){
	// 실행됨
}

 

 

위와 같이 x가 객체일 때만 코드를 실행하려 한다고 하자. null은 object로 취급되기 때문에 위 코드는 실행되어 버린다.

따라서 의도대로 하려면 아래와 같이 코드를 작성해야 한다.

 

if(x != null && typeof x === 'objcet'){
	// null 값 걸러짐
}

 

위와 같이 null 값 처리를 해줘야 한다.

 

instanceof란?

instanceof는 피연산자가 특정 클래스의 인스턴스인지 비교해 boolean 값(true/false)을 반환해 주는 비교연산자이다.

 

예를 들어 

 

[그림 3] instanceof 예시

 

 

Student라는 클래스의 inst라는 인스턴스를 생성한 뒤 instanceof로 비교해 보면

inst가 Student의 인스턴스라는 것을 알 수 있다.

 

또한, 모든 클래스는 Object를 확장하기 때문에 inst는 Object의 인스턴스이기도 하다.

 

instanceof는 원시 값과의 비교는 불가능하다.

 

예를 들어

 

[그림 4] instacneof와 원시 값

 

 

원시 값인 string을 String 클래스와 비교하면  false를 반환한다.

반면 new String() 생성자를 이용해 생성한 인스턴스는 true를 반환한다.

 

[그림 5] instancof와 null

 

 

null 값은 Object의 인스턴스가 아니다. 따라서 false를 반환한다.

 

 

 

typeof와 intanceof의 차이

1. typeof는 피연산자의 원시 타입을 string 형태로 반환한다. 반면 intanceof는 피연산자가 특정 클래스의 인스턴스인지 판단하여 boolean 값을 반환한다.

 

2. typeof는 원시 타입을 비교할 수 있고, instanceof는 원시 타입을 비교할 수 없다.

 

3. typeof는 undefined를 비교할 수 있지만, instanceof는 비교할 수 없다.

 

[그림 6] undefined 비교

 

위와 같이 정의되지 않은 변수 undefinedValue를 typeof로 비교하면 'undefined'를 반환한다.

반면 instanceof로 비교하면 에러가 발생한다.

 

4. null 값 처리에는 instanceof가 유리하다.

var x = null;

if(x !== null && typeof x === 'object'){
	// ...
}

if(x instanceof Object){
	// ...
}

 

개발자가 x가 객체일 경우에만 코드를 실행하고 싶다면 typeof를 사용하는 것보다

위와 같이 instanceof를 사용하는 것이 더 간단하다.

instanceof는 null 값을 Object의 인스턴스라고 판단하지 않지만 typeof는 object라고 판단하기 때문이다.