[TypeScript] Typeof VS Instanceof (타입 검사하기)

keynene·2023년 8월 3일

instanceof typeof typescript

TypeScript

목록 보기

5/5

"타입을 정확하게 지정하면 코드가 안전해진다."

Narrowing & Assertion 포스트에서 다뤘던 주제인데, Narrowing과 Assertion을 하기 전에 우선 타입검사가 우선시 된다.
타입을 알아야 타입에 따른 동작을 구분하던지 할 테니까...😅

TypeScript에서 타입을 검사하기 위한 방법으로 대표적으로 typeof와 instanceof라는 연산자가 있다.
사실 좀 더 있는데 이 두 가지 '연산자'가 타입을 엄격히 구분하는 데 많이 사용된다.

Typeof & Instanceof 공통점

1. 목적 : 타입검사

typeof와 instanceof의 가장 큰 공통점은 바로 Narrowing하기에 앞서 타입을 검사하는 것이다.

Narrowing & Assertion 포스트에서 Narrwoing이나 Assertion을 하려면 우선 어떤타입인지 파악해야하고, 이에 따라서 조건문으로 if, else if를 나눠, 타입에 따라 코드 동작을 구분해준다고 했는데!

바로 이러한 타입검사(조건문) 자체가 typeof와 instanceof의 주 목적이다.

2. 둘 다 연산자

typeof와 instanceof는 둘 다 어떠한 연산을 통해 결과물을 반환하는 '연산자'이다.

물론 그 결과물이 서로 달라 차이점이 있지만, 어떠한 타입에 대한 검사 라는 것이 주 목적이고, 그것을 위한 연산작업을 수행한다.

Typeof VS Instanceof 차이점

📝 typeof

typeof는 string으로 해당 데이터의 타입을 출력해준다.

function func(){ return 0 }
let obj = {name : 'keynene'}

typeof 'string' // 'string'
typeof true // 'boolean'
typeof undefined // `undefined`
typeof 123456 // 'number'
typeof func() // 'function'
typeof obj // 'object'

typeof null // 'object' : 자바스크립트 언어적 오류

이렇듯 typeof는 원시 값에 대한 타입만 string으로 출력해준다.
하지만 참조 값 (원시 값이 아닌 모든 값)은 typeof로 타입을 출력하는 데 어려움이 있다.
위의 예제에서 null에 대한 타입도 object로 출력되고 있는데 이 또한 JavaScript가 가진 언어적 오류라고 한다.

따라서 null타입에 대해 검사할 때는 데이터 !== null 와 같은 방법을 사용하거나,
null이 아닐 때의 타입에 대한 Narrowing을 빡세게 해놓고 else부분으로 날려버리거나 하는 방법을 사용할 수 있을 것 같다.

📝 instanceof

instancof는 비교연산자로, 해당하는 변수가 사용하고 있는 객체 체인을 검사한다.
쉽게 말해서, 해당하는 변수의 클래스와 비교해서 true/false를 반환해준다고 생각하면 된다.

/* html */
<p id="title">타이틀</p>
<a class="link" href="/">링크</a>
<button id="button">버튼</button>

/* typescript로 데이터 받아오기 */
let title = document.querySelector('#title')
let link = document.querySelector('.link')
let button = document.getElementById('button')

const arr = [];
const func = function(){};
const date = new Date();


/* 출력결과 */
title instanceof HTMLElement   //true
link instanceof HTMLAnchorElement   //true
button instanceof HTMLButtonElement   //true

arr instanceof Object  //true : array 최상위 프로토타입이 Object라서
func instanceof Object  //true : function 최상위 프로토타입이 Object라서
date instanceof Object  //true : class 최상위 프로토타입이 Object라서

instanceof는 왼쪽에 데이터가 오른쪽의 객체 안에 포함이 되면 (자식이면) true를 아니면 false를 출력해준다.
하지만 JavaScript에서는 function, class모두 최상위 프로토타입은 Object이기 때문에, 위 예제의 arr, func, date모두 Object타입으로 비교해봤을 때 true를 출력하는 것을 확인할 수 있다.