[JavaScript] 소수점 계산오류 해결하기

🚀  들어가며...

• 자바스크립트로 계산식을 수행하다 보면, 상식적으로 생각했을 땐 너무나도 당연하고 올바른 계산식인데도 불구하고 결과는 계산 오류가 발생하는 경험을 하게 됩니다. 보통 피연산자들이 소수점을 가진 경우에 발생하는데 이번 포스팅에서는 이러한 계산오류의 원인과해결방법을 정리해보았습니다.  

💌 소스코드

let a = 0.42
let b = 1.41

console.log(a + b); // 1.8299999999999998

📑 내용

• 오류의 원인은 무엇일까요? 우선 컴퓨터는 계산시 저희가 흔히 아는 10진법으로 계산하는것이 아니라 2진법으로 계산한다는 것은 알고 계실겁니다. 몇몇 소수의 경우에는 10진법을 2진법으로 변환할 때 무한소수가 되어버리는데, 유한한 컴퓨터의 자원을 활용하는 프로그램은 당연히 저장공간의 한계로 인해 결국 무한 소수를 유한한 수로 바꾸게 되고, 그 과정에서 나타나는 미세한 오차가 계산의 오류를 범하게 하는 것입니다.
• 좀 더 자세히 알아보자면, 숫자는 내부적으로 64비트 형식 IEEE-754으로 표현되기 때문에 숫자를 저장하려면 정확히 64비트가 필요합니다. 64비트 중 52비트는 숫자를 저장하는 데 사용되고, 11비트는 소수점 위치를(정수는 0), 1비트는 부호를 저장하는 데 사용됩니다. 그런데 너무 큰 수는 표현하는 데 64비트를 초과하기 때문에 Infinity로 처리 됩니다. 이 사실을 먼저 알고서 소수점 오류를 이해해야 합니다.

해결방안을 알아볼까요?

1. toFixed()메소드

console.log(Number(a + b).toFixed(2)); // 1.83

• 제가 가장 즐겨쓰는 해결방안입니다. toFixed()메소드를 사용하면 결과값은 문자열로 리턴되기 때문에 항상 Number로 감싸주어야 합니다. 아니면..

console.log(+(a + b).toFixed(2)); // 1.83

• 덧셈연산자를 앞에 붙여주는 방법도 있습니다.

2. Math객체 메소드 활용

• 정수로 결과값이 나와야할 경우에는 설계자의 요구에 따라 Math.round() / Math.ceil() / Math.trunc() 등을 이용하기도 합니다.

 

🙋🏻‍♂️ 후기

계산식 로직 실행 중 결과값이 이상해서 당황할 수도 있으나, 디버깅을 천천히 하시다보면 계산값이 소수점으로 무한히 나오는 현상을 발견하실수 있으실겁니다. 그럴때는 toFixed() 메소드를 이용하시면 쉽게 문제를 해결하실수 있으실겁니다!

 

🔗  참고한 글

https://ko.wikipedia.org/wiki/IEEE_754

IEEE 754 - 위키백과, 우리 모두의 백과사전

https://stackoverflow.com/questions/588004/is-floating-point-math-broken

Is floating point math broken?