typeof vs instanceof

typeof

피연산자의 타입을 알 수 있는 연산자입니다. 연산자 이므로 괄호를 사용하지 않으며 변수나 값의 자료형을 문자열로 반환합니다. 반환 값들은 number, string, function, boolean, object, undefined 6가지가 있습니다.

console.log(typeof 5); // 'number'

console.log(typeof "text"); // 'string'

console.log(typeof function(){}); // 'function'

console.log(typeof true); // 'boolean'

console.log(typeof {}); // 'object'

console.log(typeof undefined); // 'undefined'

이때 undefined의 자료형이 'undefined'이기 때문에 null의 자료형도 'null'로 예상할 수 있는데 null의 typeof값은 'object'입니다. 이는 자바스크립트 초기에 등장한 버그이지만 현재 자바스크립트가 많은 발전을 이루면서 버그를 수정할 수 없는 상황이라고 판단되어 그대로 값을 유지한다고 합니다.

const N = null;
console.log(typeof N); // 'object'

 

instanceof

변수나 값이 특정 객체의 인스턴스인지를 판단하여 boolean타입으로 반환하는 비교 연산자입니다. 클래스의 타입을 감지하는 역할을 합니다. 이때 해당 변수나 값이 사용하고 있는 prototype의 chain을 계속 비교하며 모두 해당하지 않으면 false, 하나라도 있다면 true를 반환합니다.

class Person {
	constructor(name, age) {
    	this.name = name;
        this.age = age;
    }
}

const person = new Person('스카이코', 27);

console.log(person instanceof Person); // true

그리고 만약 참조 타입이라면 결국 최상위 prototype이 객체이므로 모두 true를 반환합니다.

console.log(person instanceof Object); // true

 

문제

typeof, instanceof에 관하여 헷갈리는 부분이 몇몇 존재합니다. 몇가지를 예시로 들겠습니다.

 

1. 다음 결과 값은 어떻게 될까요?

console.log("string" instanceof String);
console.log(5 instanceof Number);
console.log(true instanceof Boolean);

위 값은 모두 객체가 아닌 primitive value이므로 모두 false 값을 갖습니다.

 

2. 다음 결과 값은 어떻게 될까요?

class Question {}

console.log(typeof Question)
console.log(typeof new Question())

class의 경우는 ES6에 등장한 문법으로 생성자 함수를 기반으로 합니다. 그러므로 typeof A의 값은 'function'입니다.

class로 생성한 값은 객체입니다. 그러므로 typeof new A()의 값은 'object'입니다.