타입 다루기 1

타입을 다뤄야 하는 이유는 무엇일까요? 우리는 결국 타입스크립트를 배워야 할 운명이기 때문입니다.
자바스크립트 언어 자체가 너무 동적입니다. 그로 인해 변수의 값 뿐만 아니라 타입 또한 동적으로 변할 수 있습니다.
api를 호출해서 받아오는 response값이 string 타입에서 number 타입으로 바뀌어도 '그랬구나.' 할 수 있는 언어가 바로 자바스크립트 입니다. 때문에 기대했던 데이터 타입이 아니더라도 실망하지 않고 먼저 타입을 검사하고 데이터를 다루는 습관을 들이도록 해야 하겠습니다.

타입을 검사하자.

가장 손쉬운 방법인 typeof는 피연산자를 검사해서 타입을 문자열로 반환합니다.

Primitive value는 typeof로 감별하기가 쉽지만 Reference value는 object라는 결과값으로만 출력이 되므로 정확한 판별에 어려움이 있습니다.

typeof null = 'object' // 대표적인 JS 오류입니다.
typeof [] = 'object' // Array 또한 Object 입니다.

typeof 말고?

instanceof 연산자는 생성자의 prototype 속성이 객체의 프로토타입 체인 어딘가 존재하는지를 판별합니다.

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

const carrot = new Person('carrot', 33)
console.log(carrot instanceof Person) // true

const field = { name: 'field', age: '23' }
console.log(field instanceof Person) // false

instanceof의 문제점

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

instanceof로 프로토타입 체인을 타고 올라가다 보면 Array, Function, Date 모두 Object라는 객체에 포함된 것을 알 수 있습니다. Reference value를 검증할 수 있지만 100% 확인은 할 수 없습니다.

어떻게 해야 할까?

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]

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

자바스크립트는 값 뿐만아니라 타입 또한 동적으로 변할 수 있으므로 타입검사에 대한 접근을 신중히 하도록 합니다.

결론

typescript를 배워야 합니다!