퍼블리싱/javascript&jQuery
[JAVASCRIPT]typeof 과 instanceof의 차이점
도라미도라미
2020. 6. 23. 19:32
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를 구분할때 활용하면 좋을 것 같다!