본문 바로가기

퍼블리싱/javascript&jQuery

[JAVASCRIPT]typeof 과 instanceof의 차이점

typeof

피연산자의 데이터 타입을 반환하는 연산자

 

문법

1
2
typeof variable
cs

 

반환 값

  • undefined
  • boolean
  • string
  • number
  • object
  • function

예시

1
2
3
4
5
6
7
8
typeof 5// return 'number'
typeof 'haha'// return 'string'
typeof {}; // return 'object'
typeof []; // return 'object'
typeof function () {}; // return 'function'
typeof null// return 'object'
 
cs

 


instanceof

개체가 특정 클래스의 인스턴스인지 여부를 나타내는 boolean값으로 반환하는 비교연산자

 

문법

1
Object instanceof constructor
cs

반환 값

  • true 
  • fasle

예시

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 생성자 정의
function C(){}
function D(){}
 
var o = new C();
 
// true, 왜냐하면 Object.getPrototypeOf(o) === C.prototype
o instanceof C;
 
// false, 왜냐하면 D.prototype이 o 객체의 프로토타입 체인에 없음
o instanceof D;
 
o instanceof Object// true, 왜냐하면
C.prototype instanceof Object // true
 
C.prototype = {};
var o2 = new C();
 
o2 instanceof C; // true
 
// false, 왜냐하면 C.prototype이
// 더 이상 o의 프로토타입 체인에 없음
o instanceof C; 
 
D.prototype = new C(); // C를 D의 [[Prototype]] 링크로 추가
var o3 = new D();
o3 instanceof D; // true
o3 instanceof C; // true, 왜냐하면 이제 C.prototype이 o3의 프로토타입 체인에 존재

출처 : https://developer.mozilla.org/
cs

 

Array / Object

1
2
3
4
arguments instanceof Array //return false 배열이 아님
[0,1] instanceof Array//return true 
{0:1} instanceof Object//return true 
 
cs

클래스 비교 o / primitive type string은 비교 불가

1
2
3
"string" instanceof String//return false //primitive type string은 false를 반환
var a = new String("hello");
a instanceof String// return true
cs

특징*

typeof는 데이터 타입을 반환하고, instanceof는 불리언을 반환한다.

두 연산자는 반환하는 값이 다르고, 연산가능한 타입도 다르기 때문에 다른 용도로 활용될 것이다. 

typeof의 경우 primivite tpye를 구분할때

instanceof는 class, array, object를 구분할때 활용하면 좋을 것 같다!