자바스크립트 NaN 숫자가 아닙니다. javascript nan not a number

자바스크립트의 NaN 은 숫자가 아닌 데이터를 의미한다. Not a Number 의 약자로 어떤 변수의 값이나 문자열 혹은 숫자값이 숫자형 데이터인지 판단한다. 숫자계산이 정확한 로직을 만들 때 사용하면 유용하다. 또는 입력값이 숫자인지 판별할 때 사용하기도 한다.

자바스크립트 NaN 숫자가 아닙니다
javascript nan not a number

자바스크립트에는 독특한 데이터가 있다.

NaN 이다.

Not a Number 의 축약어로 말 그대로 숫자가 아니다 란 뜻이다.

자바스크립트의 숫자형 데이터는 number 하나이다.

그렇기에 별도의 숫자 데이터를 구분하기 위한 함수가 필요하다.

NaN 은 데이터가 숫자로써 처리가 되지 않을 때 발생한다.

그리고 어떤 변수의 데이터가 숫자인지 아닌지 구분하기 위해 자바스크립트에서는 isNaN() 함수를 사용한다.

숫자 데이터의 특성

자바스크립트의 숫자 데이터는 문자열로 되어 있더라도 연산이 가능하다.

단, 연산이 되는 문자열의 형태가 숫자여야 한다.

이전 포스팅에서 숫자형 데이터에 여러가지 상황을 만들어 테스트를 해 보았다.

자바스크립트 숫자 문자열의 동작 관계 javascript numeric strings

비록 문자열 데이터이든 숫자형 데이터이든 숫자로써 계산이 가능하다면 자바스크립트는 계산해 버린다.

하지만 연결 키워드는 + 을 만나면 문자열로 연결한다.

이런 것들은 가끔 자바스크립트 개발시 이슈를 만든다.

데이터 타입의 관대함도 있겠지만, 숫자를 주로 다루는 프로그램일 경우 어떤 문제가 발생할지 알 수 없다.

그렇기에 변수의 데이터가 숫자인지 아닌지 판별할 수 있는 것이 필요하다.

그것이 데이터 NaN 이고 isNaN() 함수이다.

NaN , isNaN() 함수

NaN 은 말 그대로 Not a Number 로 숫자가 아니다 란 의미이다.

위에서 언급했다.

어떤 값이 숫자인지 아닌지 판별할 때는 isNaN() 함수를 사용하여 숫자를 계산할 때의 오류를 사전에 방지하는 것이 좋다.

ERP 나 은행 또는 회계 등의 프로그램을 자바스크립트로 만들 때 계산항목이 들어간다면 중간에 검증하는 부분이 있으면 좋다.

샘플코드

NaN 데이터에 대해 샘플코드를 만들어 본다.

이전에 만들었던 상황과 자바스크립트의 숫자 데이터의 문자열 형태와 함께 여러가지로 다뤄본다.

<!DOCTYPE html>
<html>
    <body>

        <h2>자바스크립트 숫자형</h2>
        <div id="cont">
            <p id="ret1"></p>
            <p id="ret2"></p>
            <p id="ret3"></p>
        </div>

        <script>
            
            console.log("----------");
            
            let vNum1;
            let vNum2;
            let vResult;

            vNum1 = 1000;
            vNum2 = "1000";
            vResult = vNum1 / vNum2;
            vResult = ( typeof(vResult) + " , " + vResult + " , " + isNaN(vResult));
            console.log(vResult);
            document.getElementById("ret1").innerHTML = vResult;

            vNum1 = 1000;
            vNum2 = "브라운아이드걸스";
            vResult = vNum1 + vNum2;
            vResult = ( typeof(vResult) + " , " + vResult + " , " + isNaN(vResult) );
            console.log(vResult);
            document.getElementById("ret2").innerHTML = vResult;

            vNum1 = 1000;
            vNum2 = "브라운아이드걸스";
            vResult = vNum1 / vNum2;
            vResult = ( typeof(vResult) + " , " + vResult + " , " + isNaN(vResult) );
            console.log(vResult);
            document.getElementById("ret3").innerHTML = vResult;

            console.log("----------");

        </script>

    </body>
</html>

코드가 길지만 중요한 부분은 NaN 과 isNaN() 함수를 사용하는 부분이다.

결과화면을 보자.

isNaN() 함수는 숫자라면 false, 숫자가 아니라면 true 를 결과로 보여준다.

숫자끼리 만났더만 계산을 하고 문자와 만나면 결합을 해 버린다.

하지만 숫자끼리 동작해야 할 계산에 뜬금없이 문자열이 나타나면 NaN 결과값을 결과로 보여준다.

'programming > javascript' 카테고리의 다른 글

자바스크립트 16진수 표현과 toString 메서드 javascript hexadecimal and toString() (0)	2021.12.01
자바스크립트 숫자 Infinity 무량대수 표현 javascript number (0)	2021.11.30
자바스크립트 숫자 문자열의 동작 관계 javascript numeric strings (0)	2021.11.29
자바스크립트 숫자 문자 관계 + 연산자는 더하기가 아니다. (0)	2021.11.28
자바스크립트 숫자범위와 정밀도 정수형 최대 15자리 부동소수점 17자리 (0)	2021.11.27

자바스크립트 NaN 숫자가 아닙니다. javascript nan not a number