[javaScript] javaScript에서 소수점 더하기 값이 이상하다?

javaScript에서 소수점을 더했는데 결과값이 왜 이상하게 나올까? toFixed()와 Math.round()

고객사에서 버그건으로 연차 잔여일이 2일이 돼야하는데 1.999999...식으로 나온다고 했다.

 

코드를 확인해봤는데 아무 문제 없었다. 아무리 봐도 이해가 안되서 구글링을 해보니 javascript가 가진 버그라는 stackOverFlow 답변들이 있었다. 현상에 대해 스크린샷 첨부.

 

    var a = 0.1;
    var b = 0.2;
    var purePlus = a+b;

    $('#plus').html('javaScript 소수점 더하기 값 : '+(a+b));

 

 

0.3이 나와야하지만 0.3.......004? 그렇다면 어떻게 해결할 수 있을까?

toFixed() 함수를 사용하거나 Math.round() 함수를 사용하면 된다.

두 가지 함수 모두 입력값을 반올림하는 함수 이다. toFixed('argument')에서 argument에는 소수점 몇번째 자리까지 나타낼 것인지 정하는 것이다. 예를 들어, toFixed(2)라면 소수점 둘째자리까지 나타내고 그 이하의 소수점자리를 반올림한다. default는 0이므로 toFixed()만 입력할 경우, 반올림하여 정수로 만든다.

 

Math.round('argument')는 이름 그대로 'argument' 값을 반올림을 해준다!

 

스택오버플로우 참고대로 소수점 12번째 자릿수에서 반올림을 해주면 충분히 안정적으로 소수점 버그를 수정할 수 있을거라본다. 소수점 5,6번째자리에서 해도 되겠지만, 스택오버플로 참고대로 안정적으로 소수점 12번째자리에서 반올림하도록 맞췄다.

 

toFixed()와 Math.round()를 활용하여 해결.

    var a = 0.1;
    var b = 0.2;

    // 자바스크립트 그대로 소수점 더할 경우,
    var purePlus = a+b;

    // toFixed를 활용해 소수점 더하기 버그 보정 
    var usingToFixed = +(a+b).toFixed(12);

    // Math.round를 활용해 소수점 더하기 버그 보정 
    var usingRound = Math.round((a+b)*1e12) / 1e12;

    $('#plus').html('javaScript 소수점 더하기 값 : '+(a+b));
    $('#toFixed').html('javaScript의 toFixed 함수를 활용 : '+usingToFixed);
    $('#round').html('javaScript의 Math.round 함수를 활용 : '+usingRound);

 

 

 

참고로 toFixed()를 사용할 경우, 결과값을 string으로 반환하기 때문에 결과값이 대해 숫자라는 걸 인식하도록 '+' 연산자를 붙여주도록 하자. 그렇지 않으면, 0.30000.....식으로 결과값이 나올 것이다. 그래서 이런 식으로, +(a+b).toFixed(12)로 사용합시다!

 

reference : JavaScript adding decimal numbers issue