예제로 배우는 자바스크립트 요약 및 코드 분석 6장 6-3~6-4

6.3 숫자 변환

  자바스크립트에서 변수나 값을 숫자로 변환하는 데에는 다음과 같은 세 개의 전역 메서드(global method)가 사용된다.

숫자로 변환하는 전역 메서드
메서드	설명
Number()	변수나 데이터 값을 숫자로 변환
parseInt()	변수나 데이터 값을 정수로 변환
parseFloat()	변수나 데이터 값을 부동소수점 숫자로 변환

  위의 전역 메서드는 메서드 이름 앞에 객체 이름을 붙이지 않는다. Number 객체의 toString() 메서드를 사용하여 변수 x를 문자열로 변환할때 x.toString() 형태로 사용한다. 반면 전역 메서드는 앞에 객체 이름을 붙이지 않고 그냥 Number(x), parseInt(x), parseFloat(x)와 같은 형태로 사용한다.

 

6.3.1 Number() 메서드

  Number() 메서드는 다음 예제에서와 같이 변수 또는 데이터 값을 숫자로 변환한다.

예제 6-10. 전역 메서드 Number()로 숫자 변환하기

number_method.html

코드 원문

<p id="show"></p>
<script>
    let a = "10";
    let b = "10.123";
    let c = "  10"
    let d = "apple"

    let text = "";
    text += Number(a) + "<br>";
    text += Number(b) + "<br>";
    text += Number(c) + "<br>";
    text += Number(d);
    document.getElementById("show").innerHTML = text;
</script>

예제 6-10. 전역 메서드 Number()로 숫자 변환하기

number_method.html

코드 분석

<p id="show"></p>
<script>
    let a = "10";
    let b = "10.123";
    let c = "  10"
    let d = "apple"

    let text = "";
    text += Number(a) + "<br>";
    // Number() 메서드 사용 문자열을 숫자로 변환한다.
    text += Number(b) + "<br>";
    text += Number(c) + "<br>";
    text += Number(d);
    // Number() 메서드 사용 문자열을 숫자로 변환한다.
    document.getElementById("show").innerHTML = text;
</script>

  위 예에서 Number() 메서드는 문자열을 숫자로 변환하는데 문자열 안에 0~9 숫자가 아닌 문자열의 경우에는 NaN 값을 반환한다. NaN은 'Not a Number'의 약어이다.

 

6.3.2 parseInt() 메서드

  전역 메서드 parseInt()는 변수나 데이터를 정수로 변환하는데 사용된다. 다음 에제에서는 parseInt() 메서드를 이용해서 문자열을 정수로 변환한다.

6-11. 전역 메서드 parseInt()로 정수 변환

parse_Int.html

코드 원문

<p id="show"></p>
<script>
    let a = "10";
    let b = "10.123";
    let c = "  10";
    let d = "apple";

    let text = "";
    text += parseInt(a) + "<br>";
    // 문자열을 정수로 반환하는 parseInt() 메서드 사용
    text += parseInt(b) + "<br>";
    text += parseInt(c) + "<br>";
    text += parseInt(d);
    // 문자열을 정수로 반환하는 parseInt() 메서드 사용 문자열 안에 숫자가 아닌
    문자열이므로 NaN가 반환된다. */
    document.getElementById("show").innerHTML = text;
</script>

6-11. 전역 메서드 parseInt()로 정수 변환

parse_Int.html

코드 원문

<p id="show"></p>
<script>
    let a = "10";
    let b = "10.123";
    let c = "  10";
    let d = "apple";

    let text = "";
    text += parseInt(a) + "<br>";
    text += parseInt(b) + "<br>";
    text += parseInt(c) + "<br>";
    text += parseInt(d);
    document.getElementById("show").innerHTML = text;
</script>

parseInt() 메서드는 'apple'에서와 같이 문자열을 정수로 변환할 수 없는 경우에는 NaN 값을 변환한다.

 

6.3.3 parseFloat() 메서드

  전역 메서드 parseInt()는 문자열을 부동 소수점 숫자로 변환하는데 사용된다. 다음 예제를 통해서 parseFloat() 메서드의 사용법에 대해서 알아보자.

예제 6-12. 전역 메서드 parseFloat()로 부동소수점 숫자 변환

parse_float.html

코드 원문

<p id="show"></p>
<script>
    let a = "10";
    let b = "10.123";
    let c = "  10";
    let d = "apple";

    let text = "";
    text += parseFloat(a) + "<br>";
    text += parseFloat(b) + "<br>";
    text += parseFloat(c) + "<br>";
    text += parseFloat(d);
    document.getElementById("show").innerHTML = text;
</script>

예제 6-12. 전역 메서드 parseFloat()로 부동소수점 숫자 변환

parse_float.html

코드 원문

<p id="show"></p>
<script>
    let a = "10";
    let b = "10.123";
    let c = "  10";
    let d = "apple";

    let text = "";
    text += parseFloat(a) + "<br>";
    /* 변수 a를 parseFloat() 메서드를 사용해서 부동 소수점 숫자로 변환
    반환값으로 10이 나온다. */
    text += parseFloat(b) + "<br>";
    text += parseFloat(c) + "<br>";
    text += parseFloat(d);
    /* 숫자가 아닌 문자열이므로 NaN가 반환된다. */
    document.getElementById("show").innerHTML = text;
</script>

 

6.4 Number 프로퍼티

  자바스크립트의 Number 프로퍼티 중에서 많이 사용되는 것을 표로 정리하면 다음과 같다.

Number 객체의 프로퍼티
프로퍼티	설명
MAX_VALUE	자바스크립트에서 표현 가능한 가장 큰 수
MIN_VALUE	자바스크립트에서 표현 가능한 가장 작은 수
Max_SAFE_INTEGER	자바스크립트에서 안전하게 표현할 수 있는 최대 정수
MIN_SAFE_INTEGER	자바스크립트에서 안전하게 표현할 수 있는 최소 정수

 

6.4.1 MAX_VALUE 프로퍼티

  Number 객체의 MAX_VALUE와 MIN_VALUE 프로퍼티는 각각 자바스크립트로 표현 가능한 가장 큰 수와 작은 수를 나타난다. 다음 예제를 통해 이 값이 실제로 어떤 값인지 확인해보자.

예제 6-13. MAX_VALUE와 MIN_VALUE 값 확인하기

max_value.html

코드 원문

<p id="show"></p>
<script>
    let x = Number.MAX_VALUE;
    let y = Number.MIN_VALUE;

    let text = "";
    text += x + "<br>";
    text += y;
    document.getElementById("show").innerHTML = text;
</script>

예제 6-13. MAX_VALUE와 MIN_VALUE 값 확인하기

max_value.html

코드 원문

<p id="show"></p>
<script>
    let x = Number.MAX_VALUE;
    // 자바스크립트로 표현 가능한 최댓값 변수 x에 저장
    let y = Number.MIN_VALUE;
    // 자바 스크립트로 표현 가능한 최댓값 변수 y에 저장

    let text = "";
    text += x + "<br>";
    text += y;
    document.getElementById("show").innerHTML = text;
</script>

 

다음은 MAX_VALUE 프로퍼티를 이용해서 팩토리얼 계산 중에 계산 범위가 벗어났는지를 체크한느 프로그램이다.

예제 6-14. MAX_VALUE와 MIN_VALUE 값 확인하기

max_value2.html

<script>
    let factorial = 1;
    for (let i=1; i<=10000; i++) {
        factorial *= i;

        if(factorial>Number.MAX_VALUE){
            document.write("계산 범위를 벗어났습니다.");
            break;
            /* 변수 factorial 값이 자바스크립트가 표현할 수 있는 최댓값보다 높으면
            for문을 탈출한다. */
        }
        else {
            document.write(factorial + "<br>");
        }
    }
</script>

계산 범위를 벗어나면 for 반복문을 중단하게 된다. 이 코드에서와 같이 Number.MAX_VALUE를 이용하면 계산 중에 컴퓨터 연산이 불가능한지를 확인할 수 있다.

 

6.4.2 MAX_SAFE_INTEGER 프로퍼티

  Number 객체의 MAX_SAFE_INTEGER와 MIN_SAFE_INTEGER 프로퍼티는 각각 자바스크립트로 안전하게 표현 가능한 최대 정수와 최소 정수를 의미한다.

  다음 코드를 통해서 Number.MAX_SAFE_INTEGER와 Number.MIN_SAFE_INTEGER의 값을 확인해보자.

예제 6-15. MAX_SAFE_INTEGER와 MIN_SAFE_INTEGER 값 확인하기

max_safe_integer.html

코드 원문

<p id="show"></p>
<script>
    let x = Number.MAX_SAFE_INTEGER;
    let y = Number.MIN_SAFE_INTEGER;

    let text = "";
    text += x + "<br>";
    text += y;

    document.getElementById("show").innerHTML = text;
</script>

예제 6-15. MAX_SAFE_INTEGER와 MIN_SAFE_INTEGER 값 확인하기

max_safe_integer.html

코드 분석

<p id="show"></p>
<script>
    let x = Number.MAX_SAFE_INTEGER;
    // 자바스크립트가 안전하게 표현 가능한 최대 정수값을 변수 x에 저장
    let y = Number.MIN_SAFE_INTEGER;
    // 자바스크립트가 안전하게 표현 가능한 최소 정수값을 변수 y에 저장

    let text = "";
    text += x + "<br>";
    text += y;

    document.getElementById("show").innerHTML = text;
</script>