본문 바로가기
programming/javascript

자바스크립트 소숫점 처리 Math 메서드 사용 using javascript math method

by 개코 - 개발과 코딩 2022. 3. 3.

소숫점을 처리할 때 자바스크립트는 대표적인 메서드가 4가지가 있다. 이들의 관계는 반올림, 올림, 버림의 3가지 동작을 하지만 단순히 소숫점을 버린다는 측면에서 양수와 음수에 대해 처리되는 방식이 조금 차이가 있다. 만약 단순히 소숫점을 버린다고 한다면 Math.trunc 메서드를 사용하도록 한다. 다른 메서드들은 음수일 경우 올림 또는 반올림의 동작을 한다.

자바스크립트 소숫점 처리 Math 메서드 사용
using javascript math method

자바스크립트에서 소숫점을 처리하는 대표적인 메서드가 4개 있다.

이들 메서드는 가시적으로 처리되는 방식이 비슷해 보인다.

하지만, 세세한 차이가 있다.

메서드의 동작이 비슷해 보여도 메서드의 의미를 파악하는 것이 좋다.

왜 이런 결과가 나오는지 디버그할 때도 도움이 된다.

소숫점 처리 메서드 종류

대표적인 소숫점 처리 메서드는 4가지가 있다.

엑셀에서도 자주 보이는 메서드 이기도 하다.

이들의 특징은 소숫점 아래의 숫자 크기에 따라 정수의 값이 변한다는데 있다.

소숫점 처리에 대한 메서드의 종류는 다음과 같다.

  • Math.round
    - 소숫점 이하 값을 반올림한다.
  • Math.ceil
    - 소숫점 이하 값을 올림한다.
  • Math.floor
    - 소숫점 이하 값을 반대로 올림한다.
  • Math.trunc
    - 소숫점 이하 값을 버림한다.

샘플코드

위에서 언급한 것이 글로는 어렵다.

단순히 양수로만 테스트를 해보면 별 차이를 느끼지 못하지만,
음수까지 고려하여 테스트를 해보면 차이가 눈으로 바로 보인다.

코드를 보자.

<!DOCTYPE html>
<html>
    <body>

        <script>
            
            console.log('----------');

            let vNumber1, vNumber2, vNumber3;
            let vNumber1Neg, vNumber2Neg, vNumber3Neg;

            //- 값을 가장 가까운 정수나 지정된 소수 자릿수로 반올림
            vNumber1 = Math.round(5.4);
            vNumber2 = Math.round(5.5);
            vNumber3 = Math.round(5.6);
            vNumber1Neg = Math.round(-5.4);
            vNumber2Neg = Math.round(-5.5);
            vNumber3Neg = Math.round(-5.6);
            console.log("Math.round : %s %s %s ", vNumber1, vNumber2, vNumber3);
            console.log("Negative Math.round : %s %s %s ", vNumber1Neg, vNumber2Neg, vNumber3Neg);

            //- 소수점 이하를 올림
            vNumber1 = Math.ceil(5.4);
            vNumber2 = Math.ceil(5.5);
            vNumber3 = Math.ceil(5.6);
            vNumber1Neg = Math.ceil(-5.4);
            vNumber2Neg = Math.ceil(-5.5);
            vNumber3Neg = Math.ceil(-5.6);
            console.log("Math.ceil : %s %s %s ", vNumber1, vNumber2, vNumber3);
            console.log("Negative Math.round : %s %s %s ", vNumber1Neg, vNumber2Neg, vNumber3Neg);

            //- 소수점 이하를 버림
            vNumber1 = Math.floor(5.4);
            vNumber2 = Math.floor(5.5);
            vNumber3 = Math.floor(5.6);
            vNumber1Neg = Math.floor(-5.4);
            vNumber2Neg = Math.floor(-5.5);
            vNumber3Neg = Math.floor(-5.6);
            console.log("Math.floor : %s %s %s ", vNumber1, vNumber2, vNumber3);
            console.log("Negative Math.round : %s %s %s ", vNumber1Neg, vNumber2Neg, vNumber3Neg);

            //-  주어진 값의 소수부분을 제거하고 숫자의 정수부분을 반환
            vNumber1 = Math.trunc(5.4);
            vNumber2 = Math.trunc(5.5);
            vNumber3 = Math.trunc(5.6);
            vNumber1Neg = Math.trunc(-5.4);
            vNumber2Neg = Math.trunc(-5.5);
            vNumber3Neg = Math.trunc(-5.6);
            console.log("Math.trunc : %s %s %s ", vNumber1, vNumber2, vNumber3);
            console.log("Negative Math.round : %s %s %s ", vNumber1Neg, vNumber2Neg, vNumber3Neg);
            
            console.log('----------');
            /* */

        </script>

    </body>
</html>

결과화면을 보자.

양수일 경우는 바로 예상이 된다.

음수일 경우를 생각하면 조금 난해할 수도 있다.

음수일 경우는 반대로 올림하고 반대로 반올림한다.

Math.trunc 메서드가 다른 메서드들과 차이를 보이는 것이 여기서 확인할 수 있다.

단순히 소숫점을 제거할 때는 Math.trunc 메서드를 사용할 수 있다.

반응형

댓글