프로그래머스 코딩테스트연습문제 Lv.1 '문자열 다루기 기본' 문제를 풀다가 Number(s) === parseInt(s) 가 다르게 나오는 걸 알고 왜 다른지 알아보게 되었습니다.

문제 설명
문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인해주는 함수, solution을 완성하세요. 예를 들어 s가 "a234"이면 False를 리턴하고 "1234"라면 True를 리턴하면 됩니다.

우선 제가 생각한 시나리오는 조건 2가지를 만족시키면 true, 아니면 false를 리턴하면 되겠구나 생각했습니다.
간단하게
조건 1. 문자열 s의 길이가 4 혹은 6이면 되니 or연산자를 써서 확인해준다.
조건 2. 숫자로만 구성되었는지를 비교한다.
마지막. 조건 1과 2를 and연산자를 써서 붙여준다.

나의 풀이

function solution(s) {
    return Number(s) === parseInt(s) && (s.length === 4 || s.length === 6)
}

저는 삼항연산자를 사용했고, 프로그래머스 채점 결과 9점을 리턴받았습니다.

하나하나 보면 우선 조건 1. 문자열 s의 길이가 4 혹은 6이면 true

(s.length === 4 || s.length === 6)

이 식은 문자열 s의 length가 4 혹은 6이냐 물어보는 식입니다. 맞으면 true를 반환합니다.

다음으로 조건 2. 문자열 s에 숫자만 있으면 true

Number(s) === parseInt(s)

여기서 의문이 생깁니다. 둘 다 문자를 숫자로 바꿔주는거 아니였나.
왜 여기서 true, false가 나뉘는거지..?

Number()와 parseInt()의 차이

예제 1. '102022'

Number('102022')    // 102022
parseInt('102022')  // 102022

숫자만 있는 문자열을 똑같이 숫자로 잘 반환해줍니다.

예제 2. '10기'

Number('10기')    //  NaN
parseInt('10기')  //  10

숫자와 문자가 섞인 문자열은 둘이 다른 결과를 반환했습니다.

예제 3. '프론트 10기'

Number('프론트 10기')    //  NaN
parseInt('프론트 10기')  //  NaN

이번엔 둘 다 NaN을 반환해주었습니다.

예제 4. '3.145896', '3.145896점'

Number('3.145896')    //  3.145896
Number('3.145896점')    //  NaN
parseInt('3.145896')  //  3
parseInt('3.145896점')  //  3

마지막 예제로는 실수와 실수 + 문자로 된 문자열을 각각 넣어봤습니다.

이렇게 예제로 알 수 있는 점은 parseInt는 정수로 값을 반환하기 때문에 뒤에 문자열은 영향을 받지 않고 버리는것 같습니다. 실수의 소수점 뒤의 값을 버리듯이요.
Number는 좀 다릅니다. 숫자인것만 숫자로 그대로 바꿔줍니다. 숫자가 아닌게 하나라도 있다면 NaN을 반환합니다.

그럼 다시 문제로 돌아와 보면

Number(s) === parseInt(s)

여기에 Number(s)는 숫자가 아닌 것은 무조건 NaN값을 반환하지만 parseInt(s)는 문자열이 나오기 전까지의 숫자를 반환합니다.
즉 Number(s)와 parseInt(s)는 s가 숫자로만 이루어진 문자열이여야지만 같게 나오기 때문에 이 식이 성립합니다.

그런데 이때 둘다 NaN이 나오는 경우가 발생하는데 아래와 같은 상황에서도 둘은 false가 나옵니다.

이유는 MDN에서 NaN을 검색해 알아보았습니다.

NaN 판별
NaN은 다른 모든 값과 비교(==, !=, ===, !==)했을 때 같지 않으며, 다른 NaN과도 같지 않습니다. NaN의 판별은 Number.isNaN() 또는 isNaN()을 사용하면 제일 분명하게 수행할 수 있습니다. 아니면, 오로지 NaN만이 자기자신과 비교했을 때 같지 않음을 이용할 수도 있습니다.
(출처:https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/NaN)

둘 다 NaN이 나와도 false를 반환하는 이유는 NaN !== NaN 이기 때문입니다.