typeof , instanceof 에 대한 공부

출처: https://unikys.tistory.com/260 [All-round programmer:티스토리]

[Javascript] typeof 와 instanceof의 차이, 타입 또는 클래스 구분하기

위 자료를 타이핑하며 정리한 내용입니다. 자세한 내용은 위 자료를 참고해주세요.

typeof 와 instanceof는 어떠한 변수가 문자열인지아닌지, 특정한 객체인지 아닌지를 판단할때 사용하는 '연산자'들이다. 이들 둘이 어떻게 다른지 살펴보고 사용하면서 있을 수 있는 약점들도 같이 살펴보자.

typeof

typeof 는 unary 오퍼레이터이다. unary 오퍼레이터로는 ! 라던가 -등과 같이 인자를 하나만 받을 수 있는 연산자를 뜻한다. 즉, 함수가 아니고 연산자이기 때문에 괄호를 사용하면 안된다.

unary operator란?

typeof yourVariable;
위와 같이 실행하고 나면 리턴 값으로는 해당하는 변수의 primitive 타입을 스트링으로 준다. 돌려주는 primitive 타입의 종류는 아래와 같다.

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

위의 기본 형식 중 하나를 스트링 형태로 리턴하기 때문에 어떠한 형인지 스트링으로 구분을 하면 된다. 즉, typeof를 사용해서 object인지 아닌지를 판별하는 경우 아래와 같이 하면된다.

if (typeof yourVariable === "object") console.log("first"); //first 출력

하지만 위 같이 하게 되면 만약 yourVariable 이 null 이라면 결과가 true 로 나타난다. 따라서 null 인 경우 false의 결과를 나타내고 싶다면

if(yourVariable != null && typeof yourVariable === 'object') {/*오브젝트 처리*/}
if(!!yourVariable && typeof yourVariable === 'object') {/*오브젝트 처리*/}
// 출처: https://unikys.tistory.com/260 [All-round programmer:티스토리]

위 방법 둘 중 하나를 선택하면 된다. 변수가 string인 경우를 판별하고 싶다면 위의 'object'를 'string'으로 바꿔주면 된다. 간단한 예들을 들어보면, 다음과 같다.

typeof 3;    // === 'number'
typeof 'str';    // === 'string'
typeof {};    // === 'object'
typeof [];    // === 'object'
typeof function () {};    // === 'function'
typeof null; // === 'object'
// 출처: https://unikys.tistory.com/260 [All-round programmer:티스토리]

Instanceof

instanceof 는 비교 연산자로 >, <, = 와 같이 두개의 인자를 받는 연산자로 앞의 비교 연산자들을 이용하는 기분으로 사용하면 된다. 하지만 결과로 리턴하는 것은 typeof와는 성질이 조금 다르다. intanceof는 해당하는 변수가 사용하고 있는 prototype의 chain을 2번째 인자와 쭉 비교해서 true/false 값을 비교한다.

var Person = function(){
    this.name = "unikys";
};
var inst = new Person();

inst instanceof Person; // === true
inst instanceof Object; // === true
typeof inst; // === 'object'
// 출처: https://unikys.tistory.com/260 [All-round programmer:티스토리]

instanceof는 클래스의 타입을 감지하는 역할을 하고, 위의 예를 통해 모든 클래스는 기본 클래스인 Object를 확장한다는 것을 알 수 있다.

하지만 자바스크립트라는 언어의 특징 때문에 그 동작하는 것은 부분부분 매우 다르기도 하다. instanceof가 동작을 다르게 한다기 보다는 자바스크립트라는 언어 자체가 다르게 동작을 하는 것으로 보면 된다. 가장 대표적인 예로는 {}는 new Object()와 같은 의미를 가지며, []는 new Array()와 같은 의미를 가지므로 위에 대해서 instanceof를 사용해보면 true가 나올 것이다. 하지만 다른 primitive type들에 대해서는 클래스로 instanceof를 할 수 없다.

정리 - primtive type 과 String, Object, Boolean 등 과 비교하면 false 가 리턴된다.
하지만 [], {} 를 비교했을때는 true가 리턴된다.

"foo" instanceof String; // === false
"foo" instanceof Object; // === false
true instanceof Boolean; // === false
true instanceof Object; // === false

[0,1] instanceof Array; // === true
{0:1} instanceof Object; // === true

var color1 = new String("red");
var color2 = "red";
color1 == color2; // === true
color1 instanceof String; // === true
color2 instanceof String; // === 무엇일까요?
// 출처: https://unikys.tistory.com/260 [All-round programmer:티스토리]

위의 맨 아래 구문은 true/false 중에 무엇일까? 정답은 바로 false이다. 다음과 같은 경우 자바스크립트를 처음 접해봤다면 이해할 수 없을 것이다. color1의 경우는 String이 맞지만 color2는 primitvie type string으로 다르다. 하지만 비교연산자 ==는 true 가 나온다 어떻게 보면 편하면서도 잘못사용하면 원인도 모르고 삽질을 할지도 모른다. 위에서 object literal인 [] 와 {}에 대해서 typeof는 둘다 object를 리턴했지만, instanceof는 각각 Array와 Object을 리턴한 것도 관심을 가져야할 결과이다.

이렇게 살펴보면 결국 두가지의 연산자는 각각 다른 용도로 활용하면 될 것이다. primitive type을 구분할 때에는 typeof를 사용하고 클래스의 타입을 구분할 때에는 instanceof를 사용하면 된다.

추가: instance에서 비교연산자 주의점

다음 코드에서 콘솔에는 true/false 중 어떤 값이 찍힐까?

function HI() {}
let a = new HI();
let b = new HI();
console.log(a == b);

false


다음 코드에서 콘솔에는 true/false 중 어떤 값이 찍힐까?

function HI() {}
let a = new HI();
let b = a;
console.log(a == b);

true

참고자료

출처: https://unikys.tistory.com/260 [All-round programmer:티스토리]

[Javascript] typeof 와 instanceof의 차이, 타입 또는 클래스 구분하기

https://www.youtube.com/watch?v=bRlyueg-gKs

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/instanceof

instanceof - JavaScript | MDN