220721 TIL

타입스크립트 시작하기, Inflearn

---

220721 TIL

nestjs 프로젝트를 시작하기 앞서, 타입스크립트 공부가 더 필요할 것이라고 생각했다. nesjs가 타입스크립트 기반이기도 하고, 배울 때는 관행적으로 무의미하게 타이핑했던 것들이 다 타입스크립트이어서 헷갈린다ㅠ. 지난달에 이미 생각하고 있었던 계획이었으나 역시 계획대로 되지 않는 것이 많을 뿐이었다. 이번에 큰 마음 먹고 인프런에서 강의를 수강한다.

강의가 초보용이기도하고 짧아서 괜찮다 싶었지만, 중간 중간 나오는 단어나 예제코드에서 나오는 메소드가 순간 ?? 상황이 있어서서 짧막하게 정리하려고한다.

TypeScript?

여러 Typescript 특징이 있겠지만 가장 핵심은 컴파일 언어라고 생각한다. Javascript는 인터프리터 언어로 런타임에 오류를 발견한다고 한다. 그렇기 때문에 자유도가 높은 반면 에러에도 관대해 진다고 한다. 아래 타입스크립트에 대해정라한 velog가 있으니 참고 바란다.
Typescript?

isNaN()

isNaN()은 어떤 값이 NaN인지 판별하는 메소드이다.

NaN?

NaN는 Not-A-Number, 숫자가 아니라는 의미이다. 전역 스코프 변수라고 한다. NaN을 반환하는 연산에대해서는 다음과 같다.

• 숫자로서 읽을 수 없음.

Number(undefined) // NaN

• 결과가 허수인 수학 계산식

Math.sqrt(-1) // NaN

• 피연산자가 NaN일 경우
• 정의할 수 없는 계산식 (0 * Infinity)
• 덧셈이 아닌 문자열을 포함한 계산식

"a" / 1 //NaN

NaN 판별

NaN판별은 일반적으로 비교방식으로 boolean값을 가져올 때 true를 가져올 방법이 없다. 그렇기 때문에 위에 메소드인 isNaN()이나 Number.isNaN()을 사용하는 가장 분명하다고 한다. 예를 들어보자.

NaN === NaN // false

NaN !== NaN // true

isNaN(NaN) // true

추가적으로 몇몇 메서드는 NaN을 찾을 수 없다고 한다.

let arr = [1, 2, NaN, 3]
arr.indexOf(NaN) // -1

isNaN() 예시; 혼란스럼

isNaN()의 특징으로는 인수가 숫자로 변환했을 때 NaN일 경우도 true를 반환한다는 것이다. 뒤에 다룰 Number.NaN()과는 차이점이다. 또한 NaN 의미가 'Not a Number' 인것을 감안하면, 몇몇 인자들의 대해서는 false를 반환하여 혼란스러운 결과를 안겨준다. 다음과 같은 예시를 보자.

isNaN(NaN) // true
isNaN(undefined) // true
isNaN({}) // true

//'Not a Number'라고 생각되지만 false를 반환한다.
isNaN(true) // false
isNaN(null) // false
isNaN("") // false
isNaN(" ") // false

isNaN(37) // false

//숫자로 변환 후 NaN을 판단하기때문에 다음의 경우는 false를 반환한다.
isNaN('123') // false
isNaN('123.123') // false

위와 같은 혼동스러운 케이스 때문인지 Number.isNaN()이 등장 하였다.

Number.isNaN()

ES2015에 등장한 함수이며 더욱 엄격히 NaN에 대해서 판단한다. 예시를 보고 isNaN()과의 차이점도 알아보자.

//아래의 경우는 true를 반환한다.
Number.isNaN(NaN) // true
Number.isNaN(Number.NaN) // true
Number.isNaN(0 / 0) // true

//isNaN()에서 true가 나왔던 인자들
Number.isNaN(undefined) // false
Number.isNaN({}) // false

isNaN은 숫자를 변환 후 NaN에 대해서도 판단하지만(하지만 혼란스러운 결과값이 많다.), Number.isNaN()은 현재의 값이 NaN이어야만 true를 반환한다.

isNaN("abc") // true
Number.isNaN("abc") // false

참고

[NaN, MDN, 2022년07월22일 접속]
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/NaN

[isNaN(), MDN, 2022년07월22일 접속]
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/isNaN

[Number.isNaN(), MDN, 2022년07월22일 접속]
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN