33 JavaScript Concepts - typeof


이 문서는 33 Concepts Every JavaScript Developer Should Know 주제로 노마드 코더(Nomad Coders)님이 강의한 내용을 정리하였습니다.


typeof

1
2
3
4
console.log(typeof "11212"); // string

console.log(typeof true); // boolean
console.log(typeof function() {}); // function
  • 거의 모든 primitive에서 다 작동한다.
  • Number, boolean, string, undefined…
  • type이 궁금하면 이렇게 typeof 뒤에 넣어서 작성해보면 된다.
1
2
3
4
console.log(typeof 1); // number
console.log(typeof false); // boolean
console.log(typeof ""); // string
console.log(typeof undefined); // undefined
  • 소괄호()로 감싸준 후 typeof를 붙여도 된다.
1
2
3
4
5
console.log(typeof undefined); // undefined
console.log(typeof undefined); // undefined

console.log(typeof true); // boolean
console.log(typeof true); // boolean
  • 버그가 하나 있다.
  • 자바스크립트에는 WTF 모먼트가 있다.
1
console.log(typeof null); // object
  • 자바스크립트를 만든 개발자들(브랜든, 더글라스)이 이 버그에 대한 논의를 한 적이 있다.
  • Object 대신에 Null -> null로 고쳐야 한다는 논의가 있었다.
  • 하지만 거절되었다.
  • 그 이유는 이걸 고치면 다른 여러 프로그램들이 영향을 받을 수 있기 때문이다.
  • 그래서 이 버그가 그대로 있는 것이다. (WTF 버그의 일종이다.)
  • 비슷한 WTF버그들을 보자.
1
2
3
console.log(typeof null); // object
console.log(typeof []); // object
console.log(typeof {}); // object
  • typeof를 사용하면 Array인지 object인지 체크하고 싶을 때 구분이 되지 않는다.
  • -> 이 때는 typeof 대신에 instanceof를 사용하면 된다.
  • instanceofprimitive(string, boolean, number 등)에서는 작동하지 않는다는 점을 유의해야 한다.
1
2
3
console.log([] instanceof Array); // true
console.log({} instanceof Array); // false
console.log({} instanceof Object); // true
  • instanceofprimitive에서는 작동하지 않는다.
1
2
console.log("" instanceof String); // false
console.log(true instanceof Boolean); // false
  • primitive에서는 typeof를 사용한다.
1
2
3
4
5
6
7
8
9
10
console.log(typeof 1);
// number
console.log(typeof "1");
// string
console.log(typeof true);
// boolean
console.log(typeof undefined);
// undefined
console.log(typeof function() {});
// function
  • array의 경우에는instanceof를 사용한다.
1
2
3
const he = [];

he instanceof Array;

정리

  • primitive(number, string, boolean, undefined, function)은 typeof를 사용한다.
    배열(Array)instanceof Array를 사용하고,
    객체(Object)instanceof Object를 사용한다.

주의할 점

  • Typeof nullobject이다!

참고 링크

노마드 코더 nomad coders-(ep 05.) 자바스크립트 개발자라면 알아야하는 핵심 컨셉 33개 | #5. typeof