[JavaScript] parseInt() - 숫자+문자 입력할 때는 true, 문자+숫자 입력할 땐 false인 이유

const age = parseInt(prompt("How old are you?"));
//isNaN : 값이 NaN(Not a Number)인지 확인하는 함수.
//age값이 숫자 > return false 숫자가 아니면 > return true

if (isNaN(age)) {      //condition has to be a boolean
    //condition === true이면 NaN 이므로 아래 문장 실행
    console.log(isNaN(age));
    console.log("Please write a number.");
} else {
    console.log(isNaN(age));
    console.log("Thank you for writing your age.");
}

위 코드를 실행하다가 궁금한 점이 생겼다.

 

1. 숫자만 입력한 경우

isNaN(age)값은 false

2. 문자만 입력한 경우

isNaN(age)값은 true

 

3. 숫자와 문자를 입력한 경우

숫자먼저 입력한 경우 - isNaN(age)값은 false

4. 문자와 숫자를 입력한 경우

문자먼저 입력한 경우 - isNaN(age)값은 true

 

---

< 원인 >

 parseInt() 동작방식 때문이다.

• parseInt() : 문자열을 정수로 변환하는 함수
  • 문자열의 처음부터 숫자로 해석할 수 있는 부분을 변환 후, 그 값을 반환한다.

parseInt(string);		//값을 문자열로 입력 받는다.
parseInt(string, radix);

숫자로 해석할 수 있는 부분까지만 숫자로 변환하고,

첫 문자가 나오는 즉시 변환을 멈추고,

해석된 부분만 반환한다.

 

3번째 '12ab' 경우

1. parseInt("12ab")는 숫자로 변환할 수 있는 '12'까지 정수로 변환

2. 'a' 는 숫자가 아니므로 변환 멈춤

3. '12' 정수 반환 (숫자)

4. isNaN(age)는 return false 이므로 else문 실행

 

4번째 'ab12' 경우

1. parseInt('ab12')는 첫 글자가 숫자가 아니므로 변환하지 않음

2. parseInt는 'NaN' 반환

3. isNaN(age)는 return true 이므로 if문 실행

 

---

< 해결 방법 >

function isValidNumber(str){	//입력된 값이 숫자로만 이루어져 있는지 검사하는 함수
    if (/^\d+$/.test(str)) {
    	return parseInt(str, 10);	//10진수 숫자로 변환하여 반환.
    } else {
    	return NaN;		//문자가 포함된 경우, NaN 반환
    }
}

const age = strictParseInt(prompt("How old are you?"));

if (isNaN(age)) {
    console.log("Please write a valid number.");
} else {
    console.log("Thank you for writing your age.");
}

정규 표현식 (/^\d+$/)

: 입력된 문자열이 오직 숫자 \d 로만 이루어져 있는지 검사

• ^ : 문자열의 시작을 의미함.
• \d+ : 하나 이상의 숫자(0~9)를 의미함.
• $ : 문자열의 끝을 의미함.

 

---

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/parseInt

parseInt() - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/isNaN

isNaN() - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_expressions

정규 표현식 - JavaScript | MDN