JavaScript 부동소수점

이전 글에서 부동소수점을 자세히 살펴보았습니다. 다시 한번 간단히 정리해보고 이제 부동소수점을 처리해보는 해결방법을 알아보도록 하겠습니다.

JavaScript에서 숫자는 64비트 IEEE-754 형식으로 다룹니다. 우리가 현재 사용하는 10진법으로 표현된 수를 2진법으로 변환할 때 64비트를 초과하는 무한 소수가 발생합니다. IEEE-754에서는 가능한 가장 가까운 숫자로 반올림하는 방법을 사용해 무한 소수가 생기는 문제를 해결합니다. 그런데 반올림 규칙을 적용하면 이 때 발생하는 ‘작은 정밀도 손실’을 우리가 볼 수는 없지만 실제로 손실은 발생합니다.

안전한 최대 정수값?

여기서 ‘안전함’이란 정수를 정확하고 올바르게 표현할 수 있다는 것을 의미합니다. JavaScript의 IEEE-754에 기술된 배정밀도 부동소숫점 형식 숫자체계로 인해 -(2^53-1)과 2^53-1 사이의 수만 안전하게 표현할 수 있습니다. 즉 범위는 -9,007,199,254,740,991 ~ 9,007,199,254,740,991(약 9000조)입니다.

부동소수점 해결해봅시다

라이브러리

부동소수점의 오차를 해결하고 사람들이 쓰는 10진법으로 오차없이 정확히 수를 표현하기 위해 라이브러리를 도입할 수 있습니다. big.js, bigdecimal.js, bignumber.js, decimal.js, math.js와 같은 많은 라이브러리들이 있습니다. 각각의 라이브러리들이 제공하는 연산이 다르므로 잘 참고해서 필요한 라이브러리를 적용하는 게 좋겠습니다.

라이브러리 비교

부동소수점 오차를 해결해야하는 개발 중인 서비스는 현재 국내에서 운영중이지만 곧 국제화가 계획 중이고, 실제 해외에도 운영될 서비스였습니다. 따라서 통화의 단위에 소수점이 있는 경우도 있어 정밀하게 10진법으로 변환해주는 라이브러리를 조사했고 후보는 big.js, decimal.js, decimal.js-light가 있었습니다.

통화의 단위, 무게의 단위가 소수점에 반영되어 정밀한 라이브러리를 찾는 것이 목표지만, 그 외에도 고려해야할 사항은 라이브러리의 용량이 적고, 이왕이면 많은 이용자가 있어 버그들이 더 많이 수정된 안정적인 라이브러리였으면 좋겠다는 점이 있었습니다. 따라서 https://npmtrends.com/ 에서 big.js, decimal.js, decimal.js-light를 비교해 보았습니다.

다운로드 횟수가 big.js > decimal.js > decimal.js-light.js 순으로 big.js의 다운로드 횟수가 가장 높습니다. 용량은 big.js 라이브러리가 가장 적었으며, 가장 최근까지 업데이트된 라이브러리는 decimal.js였습니다.

해결 방안

문제를 해결하기 전, 요구사항은 소수점 몇째 자리까지 표현이 정확한지, 이러한 소수점이 포함된 숫자를 연산할 때 몇 자리까지 정밀하게 표현할 수 있는지였습니다. 일단 구체적으로 정해진 사항이 없어 다양한 방법으로 소수점의 오차를 파악해보고 어떤 해결방법이 좋을지 추후 판단해 서비스에 적용하기로 했습니다.

이에 따라 계산기, JavaScript에서 아무 처리없이 계산하는 방법을 대조군으로 조사하였습니다. 실험군으로는 10의 n제곱을 곱해 소수점을 정수로 변환해 연산 후 마지막에 10의 n제곱을 나눠 소수 부분을 표현하는 방법(이하 자체 해결 방법), big.js 라이브러리를 사용하는 방법, decimal.js-light 라이브러리를 사용하는 방법으로 나누어 test case를 조사해 비교해 보았습니다.

자체 해결

이 해결방법은 라이브러리 없이 해결하는 방법으로 연산하기 전 실수를 정수화한 후 이후 소수점으로 다시 표현하는 방법입니다.

1. 소수점 제거

소수점이 있는 숫자에 10의 거듭제곱을 곱해 우선적으로 소수점 제거합니다. 이는 부동소수점의 정밀도 손실 최소화하기 위함입니다.

2. 원래대로 소수점 포현

모든 연산이 끝난 후 소수점을 제거하기 위해 곱했던 10의 거듭제곱으로 나눠 원래 결과값으로 변환합니다.

3. toFixed()

그래도 존재할 수 있는 부동소수점의 오차를 toFixed를 통해 어림수로 반환합니다. 1번에서 10의 거듭제곱을 곱해 소수점을 없애 주었던 이유와 동일합니다. 1번에서 보정해주었음에도 존재할 수 있는 부동소수점으로 인한 오차를 한 번 더 안전하게 보정해 주기 위함으로 toFixed를 적용했습니다.

toFixed();
toFixed(n);

toFixed(1);
toFixed();

toFixed(1);

Code

test case를 어떻게 처리하였는지 이제 code를 살펴보겠습니다.

function fnItself(a, sign, b) {
  if (sign === "+") {
    return (a * 100 + b * 100) / 100;
  }
​
  if (sign === "-") {
    return (a * 100 - b * 100) / 100;
  }
​
  if (sign === "*") {
    return Math.round((a * 100 * (b * 100)) / 10000).toFixed();
    return (a * 100 * (b * 100)) / 10000;
  }
​
  if (sign === "/") {
    return (a * 100) / (b * 100) / 10000;
  }
}

​
    return Math.round((a * 100 * (b * 100)) / 10000).toFixed();
    return ((a * 100) / (b * 100) / 10000).toFixed(1);

​
    return ((a * 100 * (b * 100)) / 10000).toFixed(2);
    return ((a * 100) / (b * 100) / 10000).toFixed(1);

​
    return ((a * 100 * (b * 100)) / 10000).toFixed(2);

big.js

big.js 라이브러리는 10진법 기반의 연산 라이브러리이며, 가장 용량이 가볍고 다운로드 횟수가 높은 라이브러리입니다. big.js는 소수점 이하 자릿수로 지정된 정밀도를 적용하고 나눗셈에만 정밀도 적용하는 특징이 있습니다.

방법

new Big(n) 생성자를 이용해 big.js의 내장 객체 타입의 인스턴스를 생성하여 연산합니다. n의 type은 number 또는 string 또는 Big object입니다. 따라서 toString으로 String type으로 변환합니다. 소수점의 표현은 round() 메서드를 이용했습니다.

Code

const result = new Big(item.quantity).times(item.unitPrice);

new Big() 생성자를 통해 수량(item.quantity)를 생성하고 times() 메서드를 통해 단가(item.unitPrice)를 곱해줍니다.

function fnBigjs(a, sign, b) {
  const numberA = new Big(a);
  const numberB = new Big(b);
  if (sign === "+") {
    return numberA.plus(numberB).toString();
  }
​
  if (sign === "-") {
    return numberA.minus(numberB).round().toString();
    return numberA.minus(numberB).toString();
  }
​
  if (sign === "*") {
    return numberA.times(numberB).toString();
  }
​
  if (sign === "/") {
    return numberA.div(numberB).toString();
  }
}

​
    return numberA.minus(numberB).round(1).toString();
    return numberA.minus(numberB).round().toString();

​
    return numberA.minus(numberB).round(2).toString();
    return numberA.minus(numberB).round(1).toString();

​
    return numberA.minus(numberB).round(2).toString();

decimal.js-light

decimal.js-light 라이브러리 10진법 기반의 연산 라이브러리로 decimal.js 라이브러리의 가벼운 버전입니다. 매우 작거나 큰 값을 보다 효율적으로 처리하고, big.js 보다 높은 기준에 값을 저장 하므로 자릿수가 많은 값에 대한 작업을 수행할 때 속도 더 빠릅니다. 정밀도가 소수 자릿수 대신 decimal.js-light의 유효 숫자로 지정합니다.

방법

new Decimal(1).times(2).toPrecision().toString();

생성자인 new Decimal을 통해 만든 수 ‘1’을 times() 메서드를 통해 ‘2’를 곱하는 연산을 한 후 toPrecision() 메서드를 이용해 정밀하게 표현한 후 toString으로 String으로 형변환합니다.

toPrecision()

new Decimal(12.3).toPrecision(5); // '12.300'

string으로 반환하며, 유효 자릿수로 반올림합니다. Big 숫자 값의 자릿수가 지정된 것보다 적은 경우 반환 값에 ‘0’이 추가되어 반환합니다.

function fnDecimaljs(a, sign, b) {
  const numberA = new Decimal(a);
  const numberB = new Decimal(b);
​
  if (sign === "+") {
    return numberA.plus(numberB).toString();
  }
​
  if (sign === "-") {
    return numberA.minus(numberB).toInteger().toString();
    return numberA.minus(numberB).toString();
  }
​
  if (sign === "*") {
    return numberA.times(numberB).toString();
  }
​
  if (sign === "/") {
    return numberA.div(numberB).toString();
  }
}

​
    return numberA.minus(numberB).toFixed(1).toString();
    return numberA.minus(numberB).toInteger().toString();

​
    return numberA.minus(numberB).toFixed(2).toString();
    return numberA.minus(numberB).toFixed(1).toString();

​
    return numberA.minus(numberB).toFixed(2).toString();

test

계산기 결과, JavaScript에서 아무 처리없이 계산한 경우는 대조군으로 실험군의 비교를 용이하게 하기위해 함께 조사하였습니다. 계산기 결과를 기준으로 할 것이므로 파란색으로 표현하였고, 계산기와 틀린 결과는 빨간색으로 표현 하였습니다.

각각의 조사는 연산 결과로 소수점을 모두 표현하는 경우, 소수점 첫째자리까지 표현하는 경우, 소수점 둘째자리까지 표현한 경우, 정수로 표현하는 경우입니다.

a. test case - 소수 전부 표현

b. test case - 소수 둘째 자리까지 표현(셋째 자리에서 반올림)

c. test case - 소수 첫째 자리까지 표현(둘째 자리에서 반올림)

d. test case - 정수로 표현

💡TL;DR

부동소수점을 해결하는 방법

• 10의 거듭제곱을 곱해 소수점을 제거한 후 연산한 다음 곱해준 10의 거듭제곱을 나눠 보정
• JavaScript의 toFixed()를 사용하는 방법
• 라이브러리 사용
  • big.js
  • decimal.js
  • decimal.js-light
  • etc