[JS] 자바스크립트 함수 문제1 / NaN은 무엇인가?!

마무리 문제 1. 사용자가 프롬프트 창에 숫자를 입력했을 때 그 숫자를 함수로 넘겨주고, 함수에서는 숫자가 양수인지, 음수인지, 또는 0인지 판단해서 알림 창에 보여주는 프로그램을 작성해 보세요.

 

 

길라잡이

• 숫자를 받아서 양수, 음수, 0을 판단하고 알림 창에 표시하는 함수를 선언합니다.
• paserInt() 함수를 사용해 프롬프트 창에 입력한 내용을 숫자로 변환합니다.(프롬프트 창에 입력한 내용이 숫자가 아니면 parseInt() 함수는 NaN을 반환합니다)
• 반환값이 숫자일 경우에만 함수를 실행합니다.

 

//내가 쓴 코드
function judge(n){
    if(n !== NaN){
        if(n === 0){
            alert("0은 좀..");
        } else if(n > 0){
            alert("양수요");
        } else if(n < 0){
            alert("음수요")
        }
    }
}
const num = (parseInt(prompt("숫자 입력 하씨요")));
judge(num);

//답지
function isPositive(n) {
    if (n > 0) {
        alert(`${n}은 양수입니다.`);
    } else if (n < 0) {
        alert(`${n}은 음수입니다.`);
    } else {
        alert(`${n}은 0입니다.`);
    }
}

const number = parseInt(prompt('숫자를 입력하세요.'));
// parseInt() 는 숫자가 아닐 경우 NaN을 반환함
if(!isNaN(number)) {	// 숫자일 경우에만 실행
    isPositive(number);
}

 

공통점

• parseInt를 사용하여 prompt에 입력한 값을 숫자로 변환하였다.
• 숫자를 받아서 양수, 음수, 0을 판단하고 표시하는 alert을 사용하였다.

 

차이점

• 나는 parseInt()함수가 NaN인지 확인하고 반환하는 방식을 비교 연산자를  사용하여 "num !== NaN"으로 하였다.
  사용자가 숫자 입력 → num 변수 입력 → 'judge' 함수 호출 → if문의 비교 연산자로 NaN 확인
  의 순서가 된다.
• 답지는 isNaN 함수를 이용한 if문을 통해 프롬프트를 통해 입력받은 값을 NaN인지 아닌지 확인하였다.
  사용자가 숫자 입력 → if문의 isNaN 함수로 NaN 확인
• 내가 쓴 코드는 숫자가 입력된 뒤에 함수를 호출하고 실행하면서 검사하기 때문에, 함수를 호출하기 전에 확인하는 답지보다 비효율적이라고 할 수 있다.
• NaN은 자바스크립트에서 특수한 값으로, 자기 자신과도 일치하지 않는 값이다. 따라서 "num !== NaN" 조건문은 항상 참이 되어 불필요한 코드가 된다.
• 자바스크립트에서는 NaN을 확인하기 위해서 "isNaN()" 또는 "Number.isNaN()" 함수를 사용해야 한다.

 

---

NaN이란?

 

NaN이란 Not-A-Number "숫자가 아님"을 나타내는 전역 객체의 속성입니다.

NaN이 관계 비교 (>, <, >=, <=)의 피연산자 중 하나는 경우 결과는 항상 false입니다.

NaN은 (==, !=, === 및 !==)를 통해 NaN 값을 포함하여 다른 값과 같지 않은 것으로 비교됩니다.(자세한 건 해당 문서를 참고하자.)

 

즉 내가 위의 코드에서 비교 연산자로 NaN인지 확인하려 했던 건 잘못됐던 비교라 할 수 있다.

제대로 NaN을 확인하고 반환하기 위해선 "isNaN()" 또는 "Number.isNaN()" 함수를 이용해야 한다.

여기서 isNaN()과 같은 함수들은 자바스크립트에서 제공하는 객체의 매개변수(프로퍼티) 이름 앞에 'is'를 붙인 함수들이다.(해당 문서)

이런 함수들은 주어진 값을 판별하여 해당 값이 어떤 종류의 데이터인지, 또는 어떤 상태인지를 확인하는 데 사용된다.

 

아래의 답지에서 적힌 코드는 사용자가 입력한 결과가 NaN인 경우 true이기 때문에 false를 반환하는 논리 연산자 ' ! '를 이용해 반환값이 숫자인 경우를 정확히 파악하고 있다.

또한 isNaN() 함수를 이용해 입력된 값이 숫자인지 확인하고 있기 때문에 else 구문에서 "n === 0"을 확인하는 조건문이 필요 없게 되므로 더욱 정확하고 안전한 코드가 된다고 할 수 있다.

따라서 위의 문제를 정확이 이해하고 풀기 위해선 'NaN'에 대한 이해가 충분히 되어 있어야 원할히 풀 수 있겠다.