세로형
Notice
Recent Posts
Recent Comments
Link
11-26 00:01
«   2024/11   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

꿈 많은 사람의 이야기

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

javascript

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

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

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
cs

그리고

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
cs

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

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

이렇게 응용할 수 있다.



반응형
그리드형
저작자표시

'javascript' 카테고리의 다른 글

자바스크립트 Math  (0) 2017.08.16
자바스크립트 Number(), parseInt(), parseFloat(). 문자를 숫자로 변환  (0) 2017.08.16
자바스크립트 이벤트(mouseover, mouseenter, onclick, over시 이미지 변경), 문자열  (0) 2017.08.16
자바스크립트 계산기 만들기  (0) 2017.08.16
자바스크립트 object, null, undefined, 함수(function)  (0) 2017.08.16
공유하기 링크
'javascript' Related Articles more
Comments