Link
01-21 07:19
«   2021/01   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
Archives
Today
276
Total
1,290,312
관리 메뉴

꿈 많은 사람의 이야기

자바스크립트 NaN, isNan() 메소드 본문

javascript

자바스크립트 NaN, isNan() 메소드

이수진의 블로그 이수진의 블로그 2017. 8. 16. 08:49
반응형

NaN 은 Not a Number 의 약자로 말 그대로 숫자가 아닌, 또는 될 수 없는 것들을 뜻한다.

var x = 100 / "apple" 를 하게 되면 x 는 NaN이 된다.
하지만
var x = 100/"10" ; 을 하면 결과는 10이 나온다. 즉, 문자열이 숫자값으로 변환할 수 있으면 숫자로 변환해 계산을 해준다.
var x = 100 / "apple"  을 하게 되면 x는 NaN 값이 나오게 되는데
이런 NaN 값을 체크 하는 것이 isNaN() 메소드이다.
x를 isNaN() 메소드에 넣으면 -> isNaN(x) // true;
가 나오게 된다. 

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>
<script>
    var dd =100/"Apple";
    document.getElementById("demo").innerHTML =isNaN(dd);
</script>
</body>
</html>
Colored by Color Scripter

그리고

var x = NaN ;
var y = 5;

var z = x + y; 를 하게 되면 NaN이 나오게 된다. 하지만 다음과 같이

var x = NaN;
var y = "5";
var z = x + y;
를 하게 되면 결과는  NaN5가 나오게 된다. 
이러한 특징이 존재한다.
그러나 typeof(NaN)을 해보면 number가 나온다. 즉 숫자라고..
이게 참 웃기다.

이걸 적용할 수 있는 예제는 아래와 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <h1>해당 월의 총 날짜</h1>
   월입력 : <input type="text" id="month"><br>
   <input type="button" id="okBtn" value="확인">
   <p id="result"> 월을 입력하고 확인 버튼을 누르시오. </p>
    
</body>
</html>
 
 
<script>
    var month = 0;
    var okBtn = document.getElementById("okBtn");
    var result = document.getElementById("result");
    
    okBtn.onclick = function(){
        month = parseInt(document.getElementById("month").value);
        //숫자 변환 가능 -> 숫자변환
        //숫자 변환 불가능 -> NaN;
        if(isNaN(month)){
            result.innerHTML = "문자열은 불가능합니다.";
            return;
        }
        
 
    }
</script>
Colored by Color Scripter

월을 입력 받아야하는데(숫자) input으로 들어온 값은 문자열이다. 그래서 ParseInt(혹은 Number)로 변환해줘야 한다.

하지만 이 input값에 숫자가 아닌 문자열을 놓게 되면 변환이 불가능해서 NaN이 나오게 된다. 문자열이 들어오게 되면 더 이상의 흐름을 끊어야 하기 때문에 return하게 된다. 

이렇게 응용할 수 있다.



반응형
0 Comments
댓글쓰기 폼