day07

📌 Number과 parseInt의 공통점

• 주어진 문자열의 변수가 숫자모양일 경우
  실제 숫자형으로 변환해준다.

<script>
        // Number(), parseInt()
        // - 주어진 문자열의 변수가 숫자모양일 경우
        // 실제 숫자형으로 변환해준다.

        let value = "100";
        let num1 = Number(value);
        let num2 = parseInt(value);

        let r1 = value + 1; // 1001
        let r2 = num1 + 1; // 101
        let r3 = num2 + 1; // 101

        document.write("<h1>r1 = " + r1 + "</h1>"); // 문자열 있는 그대로 합쳐져서 1001 
        document.write("<h1>r2 = " + r2 + "</h1>"); // 101 출력
        document.write("<h1>r3 = " + r3 + "</h1>"); // 101 출력_텍스트_
    </script>

💡 결과값

📌 Number과 parseInt의 차이점

• Number()
  : 주어진 문자열이 "100.6"일 경우
  100.6 이라는 실수 형태로 변환한다.
• parseInt()
  : 주어진 문자열이 "100.1" 일 경우
  소수점 자리를 내림하고 정수 형태인
  100만 리턴한다.

	<script>
        /*
            -Number()
            : 주어진 문자열이 "100.6"일 경우
            100.6 이라는 실수 형태로 변환한다.
            - parseInt()
            : 주어진 문자열이 "100.1" 일 경우
            소수점 자리를 내림하고 정수 형태인
            100만 리턴한다.
        */
        let value = "100.6";

        let num1 = Number(value); // 101.6
        let num2 = parseInt(value);  // 101

        let r1 = num1 + 1;
        let r2 = num2 + 1;_텍스트_

        document.write("<h1>r1 = " + r1 + "</h1>");
        document.write("<h1>r1 = " + r2 + "</h1>");
        
    </script>

💡 결과값

📌 숫자 변환 함수의 한계

• 숫자 변환 함수의 한계
  : Number 함수와 parseInt함수는 파라미터로 전달된
  문자열이 숫자형태가 아닌 경우 "NaN"이라는 값을 리턴, 이 "NaN" 값과 숫자값의 연산은 모든 결과가 "NaN"이다.

<script>
    /*
        - 숫자 변환 함수의 한계
        : Number 함수와 parseInt함수는 파라미터로 전달된
        문자열이 숫자형태가 아닌 경우 "NaN"이라는 값을 리턴,
        이 "NaN" 값과 숫자값의 연산은 모든 결과가 "NaN"이다.
    */
   let a = Number("a");
   document.write("<h1>a = " + a + "</h1>");

   let a_sum = a + 1;
   document.write("<h1>a_sum = " + a_sum + "</h1>");
    

   let a_str = a + "str";
   document.write("<h1>a_str = " + a_str + "</h1>");
    </script>

💡 결과값

📌 isNaN

변수의 NaN여부를 검사하는 함수

• isNaN 함수는 파라미터로 전달되는 변수의
  NaN 여부를 boolean 형태로 리턴한다.
  - 파라미터가 숫자로 변환할 수 없는 문자열일
  경우에는 NaN형태이므로 true 리턴
  - 파라미터가 숫자 모양을 한 문자열이거나
  실제 숫자형 변수일 경우에는 NaN이 아니므로
  false를 리턴한다.

숫자인지 검사하기
- parseInt함수나 Number함수의 정상동작을
보장하기 위해서는 파라미터를 전달하기 전에
해당 값이 NaN이 아니라는 것을 검사해야 한다.
- isNaN함수의 결과를 부정하면 그 값은
숫자값이거나 숫자형으로 변환 가능한
문자열이라는 의미가 된다.

let is_num = isNaN(검사할값);

<script>
        /*
            변수의 NaN여부를 검사하는 함수
            - isNaN 함수는 파라미터로 전달되는 변수의
            NaN 여부를 boolean 형태로 리턴한다.
            - 파라미터가 숫자로 변환할 수 없는 문자열일
            경우에는 NaN형태이므로 true 리턴
            - 파라미터가 숫자 모양을 한 문자열이거나
            실제 숫자형 변수일 경우에는 NaN이 아니므로
            false를 리턴한다.

            숫자인지 검사하기
            - parseInt함수나 Number함수의 정상동작을
            보장하기 위해서는 파라미터를 전달하기 전에
            해당 값이 NaN이 아니라는 것을 검사해야 한다.
            - isNaN함수의 결과를 부정하면 그 값은
            숫자값이거나 숫자형으로 변환 가능한
            문자열이라는 의미가 된다.
            

            let is_num = isNaN(검사할값);

        */



        let v1 = "가나다라";
        let v2 = "123456";

        let is_num1 = !isNaN(v1)
        let is_num2 = !isNaN(v2);

        if (is_num1){
            document.write("<h1>" + v1 + "은 숫자이다.</h1>");
        } else {
            document.write("<h1>" + v1 + "은 숫자가 아니다. </h1>");
        }

        if ( is_num2 ){
            document.write("<h1>" + v2 + "은 숫자이다.</h1>");
        } else {
            document.write("<h1>" + v2 + "은 숫자가 아니다. </h1>");
        }
    </script>

💡 결과값

📌 isNaN (2)

<script>
    function sumInt(x, y){
        let isStrX = !isNaN(x);
        let isStrY = !isNaN(y);

        // 둘 중 하나라도 숫자 모양이 아니라면,
        // 실행을 중단하고 메시지를 리턴
        if( !isStrX || !isStrY ){
            return "숫자 형태이거나 숫자값이 전달되어야 합니다.";
        }

        let result = parseInt(x) + parseInt(y);
        return result;
    }

    const sum1 = sumInt("a", 1);
    const sum2 = sumInt("1", "2");
    const sum3 = sumInt(100, "5.1");
    const sum4 = sumInt(-1, "-100");

    document.write("<h1>" + sum1 + "</h1>");
    document.write("<h1>" + sum2 + "</h1>");
    document.write("<h1>" + sum3 + "</h1>");
    document.write("<h1>" + sum4 + "</h1>");

</script> 

💡 결과값