클린코드 자바스크립트 [3] 타입 검사

타입 검사

타입 검사는 typeof 연산자로 할 수 있다. (결과를 문자열로 반환함.)

typeof '문자열' 	    // 'string'
typeof true	  		// 'boolean'
typeof 123	  		// 'number'
typeof undefined	// 'undefined'
typeof Symbol()		// 'symbol'

typeof 만으로는 타입 검사를 하기 어렵다.

1. 자바스크립트는 원시 타입(primitive)과 참조 타입(reference: object, array, fuction, Date)으로 이루어져 있는데, 참조 타입은 typeof로 판별하기가 어렵기 때문이다.
   특히 typeof null이 object로 나오는 문제가 있다.
2. 자바스크립트는 동적으로 변하는 언어이기 때문에 타입 또한 동적이다. 따라서 타입 검사가 어렵다.

typeof와 유사한 instanceof의 경우에도 문제가 발생한다.
배열, 함수, date의 최상위 인스턴스는 객체이므로 모두 true가 떠버린다.

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

arr instanceof Object  // true
func instanceof Object // true
date instanceof Object // true

이 문제는 아래처럼 해결할 수 있다.

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

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

이 외에도 다양한 타입 검사 방법이 존재한다.
외우지 말고 상황에 따라 검색해서 사용하는 것이 좋다.

undefined & null

null은 값이 없다(비어있다)는 것을 명시적으로 표현한 것이다.

• 수학적으로 나타내면 0으로 표현된다.
• null의 타입은 object이다.

null + 123 // 123

undefined는 선언했지만 값은 정의되지 않고 할당되지 않은 것을 말한다.

• 수학적으로 나타내면 NaN으로 표현된다.
• undefined의 타입은 undefined이다.

let varb;

typeof varb // undefined

undefined + 10 // NaN

eqeq 줄이기

eqeq란?

동등 연산자(==)를 뜻한다.

• === 는 엄격한 동등 연산자이다.

동등 연산자는 자동으로 형변환(type casting)을 해서 비교한다.(암묵적 형변환)

'1' == 1 // true
1 == true // true

보다 정확하게 비교하기 위해 엄격한 동등 연산자를 사용하는 것이 좋다.

'1' === 1 // false
1 === true // false

예시

ticketNum.value가 '0' 인 경우, 1번처럼 비교하는 것보다 2,3번처럼 비교하는 것이 낫다.
1번처럼 하면 코드를 보는 사람들에게 혼란을 야기할 수 있기 때문이다.

// 1. 동등 연산자를 활용
ticketNum.value == 0

// 2. 수동적으로 형변환해서 엄격하게 비교
Number(ticketNum.value) == 0

// 3. 숫자로 가져오기
ticketNum.valueAsNumber == 0

방법

ESLint 활용하기(eqeqeq)
===, !== 사용하도록 설정.

형변환 주의하기

암묵적 형변환 대신 명시적 형변환을 하는 것이 좋다.

• 암묵적 형변환 : 자바스크립트 엔진이 암묵적으로 타입을 변환하는 것
• 명시적 형변환 : 사용자가 직접 타입을 변환하는 것

명시적 형변환을 하여 사람이 예측하기 쉽도록 하는 것이 좋다.

// 암묵적 형변환
11 + '문자' // '11 문자'
!!'문자'	  // true

// 명시적 형변환
String(11 + '문자')
Boolean(!!'문자')
parseInt('9.999', 10); // 9

참고

parseInt 사용할 때 두 번째 인수에 몇 진수로 바꿀지 지정하는 것이 좋다.
자동으로 10진수로 바뀌지 않을 수도 있기 떄문이다.

isNaN

숫자가 아니지 않다.
-> 이중부정이라 헷갈림

isNaN(3) // false

Number.isNaN()과 isNaN()의 검사 결과가 다르다.
따라서 Number.isNaN()를 사용하는 것이 좋다.

Number.isNaN(123 + '테스트') // true
isNaN(123 + '테스트') // false

isNaN은 느슨한 검사를 하고, Number.isNaN은 엄격한 검사를 한다.