JavaScript - 타입 다루기

타입 검사

typeof

typeof는 피연산자를 검사해서 타입을 문자열로 반환하는 함수이다.

Primitive value (원시적인 string, integer 등)는 typeof로 감별하기가 쉽지만 
Reference value (참조되는 Object, Array 등)는 object라는 결과 값으로만 출력이 되므로 정확한 판별에 어려움이 있다.
Object, Array 동일하게 object 결과를 가져오게 된다.

typeof {} == 'object' // true
typeof [] == 'object' // true

instanceof

instanceof 연산자는 생성자의 프로토타입 (prototype) 속성이 객체의 프로토타입 (prototype) 체인 어딘가 존재하는지를 판별할 때 사용한다. instanceof로 프로토타입 체인을 타고 올라가다 보면 Array, Function, Date 모두 Object라는 객체에 포함된 것을 알 수 있다. Reference value를 검증할 수 있지만 100% 확인은 할 수 없다.

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

console.log(arr instanceof Array) // true
console.log(func instanceof Function) // true
console.log(date instanceof Date) // true

console.log(arr instanceof Object) // true
console.log(func instanceof Object) // true
console.log(date instanceof Object) // true

Object.prototype.toString.call()

Object 객체가 가지고 있는 내장 메서드인 toString()에 call을 호출해 검사하고자 하는 object를 넣어주면 
위와 같이 해당 객체의 클래스를 가져올 수 있다.

console.log(Object.prototype.toString.call(arr)) // [object Array]
console.log(Object.prototype.toString.call(func)) // [object Function]
console.log(Object.prototype.toString.call(date)) // [object Date]

 

 

undefined & null

쉽게 이야기하여 undefined는 정의되지 않음이고 null는 객체이다. 두 가지를 확실히 구분해서 사용해야 할 것이다.

var test;
console.log(test); // undefined
console.log(typeof test); // undefined

var test = null;
console.log(test); // null
console.log(typeof test); // object

null === undefined // false
null == undefined // true
null === null // true

 

 

eqeq 줄이기 (비교 연산자 == vs ===)

쉽게 생각하자. == 는 값만 비교하는 것이고 === 값과 데이터형까지 비교한다.

느슨한 (loose) 체크보다 엄격한 (strict) 체크를 하는 것이 더 명확하다.

예시)

'01' == 1  //true
1 == true  //true
0 == false //true

== 사용하였을 경우

참고 : https://dorey.github.io/JavaScript-Equality-Table/

=== 사용하였을 경우

참고 : https://dorey.github.io/JavaScript-Equality-Table/

 

 

형 변환 주의

JS에는 명시적 변환과 암묵적 변환이 있는데, 암묵적 변환이 일어나는 부분도 명시적으로 코드를 작성하여,  코드를 보는 사람으로 하여금 혼란을 발생하지 않도록 한다.

암묵적 변환 (Implicit Conversion)

12 + ""    // 결과값이 12이고 string으로 변환한다
"15" * 2    // 결과값이 30이고 number로 변환한다.
"15" - "11" // 결과값은 4이고 둘 다 데이터형은 number로 변환한다.
undefined + 6 // 결과값은 NaN이고 undefined를 number로 변환하지 못한다.
"Hello" + null  // 결과값은 "Hellonull"이고 null을 string으로 변환한다.

명시적 변환 (Explicit Conversion)

Number("25") // 결과값은 "25"이고 number로 변환한다.
String(25) // 결과값은 "25"이고 string로 변환한다.
Boolean(25) // 결과값은 true이고 boolean로 변환한다.

 

 

NaN 처리 (isNaN vs Number.isNaN)

ES6에서 새로 개선된 방식이므로 ES5 만 되는 환경에서 무작정 사용하지 말자.

ES6 Number 개선 내용은 여기를 https://ponyfoo.com/articles/es6-number-improvements-in-depth 

참조해보면 될 것이다.

isNaN

전달된 값이 숫자가 아닌지 또는 숫자로 변환할 수 없는지 여부만 확인한다. 인수를 변환하고 Number결과 값이 이면 true를 반환한다.

Number.isNaN

값이 같은지 여부도 확인한다. 인수를 변환하지 않고 인수가 Number일 때 true를 반환한다.

예시)

Number.isNaN({});
// <- false, {} is not NaN
Number.isNaN('ponyfoo')
// <- false, 'ponyfoo' is not NaN
Number.isNaN(NaN)
// <- true, NaN is NaN
Number.isNaN('pony'/'foo')
// <- true, 'pony'/'foo' is NaN, NaN is NaN

isNaN({});
// <- true, {} is not a number
isNaN('ponyfoo')
// <- true, 'ponyfoo' is not a number
isNaN(NaN)
// <- true, NaN is not a number
isNaN('pony'/'foo')
// <- true, 'pony'/'foo' is NaN, NaN is not a number


                |       Number.isNaN()       |        isNaN()
----------------+----------------------------+-----------------------
value           | value is a Number | result | Number(value) | result
----------------+-------------------+--------+---------------+-------
undefined       | false             | false  | NaN           | true
{}              | false             | false  | NaN           | true
"blabla"        | false             | false  | NaN           | true
new Date("!")   | false             | false  | NaN           | true
new Number(0/0) | false             | false  | NaN           | true