자바스크립트 개발자라면 알아야 할 Concept 33 [#5. Typeof]
미음제
·2021. 1. 18. 22:37
2020/11/03 - [Developer/Javascript] - 자바스크립트 개발자라면 알아야 할 Concept 33 [#1. Call Stack]
2020/11/06 - [Developer/Javascript] - 자바스크립트 개발자라면 알아야 할 Concept 33 [#2. Primitive Types]
2021/01/06 - [Developer/Javascript] - 자바스크립트 개발자라면 알아야 할 Concept 33 [#4. Type Coercion]
"자바스크립트 개발자라면 알아야하는 핵심 컨셉 33개"
33개의 개념은 다른 개발자가 Github에 올려준 내용을 바탕으로 한다. [https://github.com/yjs03057/33-js-concepts]
Typeof
자바스크립트는 항상 Type을 체크해야 한다.
Boolean, String, number ...
등의 Type을
체크해야 하는 것이다.
Type을 확인하는 방법은?
typeof를 사용하면 된다.
console.log(typeof "123")
console.log(typeof 123)
console.log(typeof true)
console.log(typeof function(){})
위와 같은 코드처럼 작성하면 된다.
결과는 다음과 같다.
또한 typeof()처럼 사용해도 된다.
console.log(typeof ("123"))
console.log(typeof (123))
console.log(typeof (true))
console.log(typeof (function(){}))
결과는 똑같이
나오게 된다.
typeof는 대부분의
primitive type에서 작동된다.
primitive type에는
Boolean
number
String
null
undefined
가 있다.
내가 사용하고자 하는 것의
type을 확인해보고 싶다면
typeof 혹은
typeof()를 사용하면 된다.
그러나 typeof 에는 버그가 있다.
다음과 같은 코드를 실행해보면,
console.log(typeof null)
console.log(typeof [])
console.log(typeof {})
위와 같은 결과가 나온다.
null은 null을 반환하고
[]은 Array를 반환하고
{}는 object를 반환하면 좋겠지만,
모두 object를 반환하고 있다.
자바스크립트 개발자들 사이에서
이 같은 버그를 고치자고 제안하였지만
거절되었다.
현재 사용되고 있는 자바스크립트에서
에러가 많이 발생할 수 있다는 이유에서이다.
그래서,
Array인지 Object인지
구별을 못하는데
Array인지 Object인지
구별을 하고 싶다면?
typeof 대신에
instanceof 를 사용하면 된다.
instanceof는 typeof와 비슷하지만
primitive type에서는 작동하지 않고,
object와 array에서 작동한다.
console.log([] instanceof Array)
console.log({} instanceof Array)
console.log({} instanceof Object)
위와 같은 코드를 입력하면,
다음과 같은 결과를 얻는다.
[]이 Array인지 물었을 때
true를 반환했고,
{}가 Array인지 물었을 때
false를 반환했고,
{}가 Object인지 물었을 때,
true를 반환했다.
object와 array를
구별할 수 있는 것이다.
그러나,
instance of는
primitive type에서는 작동되지 않는다.
console.log("" instanceof String)
console.log(true instanceof Boolean)
""는 String이 맞기 때문에
true를 반환해야 하지만
false를 반환하고
true는 Boolean이 맞기 때문에
true를 반환해야 하지만
false를 반환하고 있다.
작동이 되지 않고 있는 것이다.
Primitive Type을 체크하고 싶다면?
typeof 를 사용
Array, Object를 체크하고 싶다면?
instanceof 를 사용
'Developer > Javascript' 카테고리의 다른 글
[자바스크립트] 생성자 함수, 객체 생성 (0) | 2021.12.03 |
---|---|
[Chart.js] Chart.js로 차트 그리기 (1) | 2021.04.24 |
자바스크립트 개발자라면 알아야 할 Concept 33 [#4. Type Coercion] (5) | 2021.01.06 |
자바스크립트 개발자라면 알아야 할 Concept 33 [#3. Value Types and Reference Types] (0) | 2020.11.16 |
자바스크립트 개발자라면 알아야 할 Concept 33 [#2. Primitive Types] (0) | 2020.11.06 |