[Javascript] 반올림(round), 올림(ceil), 내림(floor) - 소수점, 음수,자리수 지정

 

 

1. 올림(Math.ceil())
   
   • Math.ceil() 함수
   • 정수 올림 (음수 포함) 
   • 자릿수 지정
2. 내림(Math.floor())
   • Math.floor() 함수
   • 정수 내림 (음수 포함)
   • 자릿수 지정
3. 반올림(Math.round())
   • Math.round() 함수
   • 정수 반올림 (음수 포함)
   • 자릿수 지정
   • 소수점 숫자 정밀도 문제
4. 소수점 반올림 (toFixed(), toPrecision())
   • toFixed() 함수
   • toPrecision() 함수

 

1. 올림(Math.ceil())

Javascript에서 숫자를 올림 처리할 때는 주로 Math.ceil() 함수를 사용합니다.

 

Math.ceil() 함수

Math.ceil(x)

입력받은 숫자보다 크거나 같은 정수 중 가장 작은 정수를 리턴합니다.

즉, 입력받은 숫자를 올림한 정수를 리턴하는 함수입니다.

 

정수 올림 (음수 포함)

// 1.올림
const ceil_1 = Math.ceil(1); // 1
const ceil_2 = Math.ceil(1.222); // 2
const ceil_3 = Math.ceil(1.5); // 2
const ceil_4 = Math.ceil(1.777); // 2

// 2. null 또는 0인 경우
const ceil_5 = Math.ceil(null); // 0
const ceil_6 = Math.ceil(0); // 0

// 3. 음수인 경우
const ceil_7 = Math.ceil(-1); // -1
const ceil_8 = Math.ceil(-1.111); // -1
const ceil_9 = Math.ceil(-1.5); // -1
const ceil_10 = Math.ceil(-1.777); // -1

// 결과 출력
document.writeln('--- 정수로 올림하기 --- <br>')
document.writeln('ceil(1) : ' + ceil_1 + '<br>');
document.writeln('ceil(1.222) : ' + ceil_2 + '<br>');
document.writeln('ceil(1.5) : ' + ceil_3 + '<br>');
document.writeln('ceil(1.777) : ' + ceil_4 + '<br><br>');
document.writeln('--- null 또는 0 인 경우 --- <br>')
document.writeln('ceil(null) : ' + ceil_5 + '<br>');
document.writeln('ceil(0) : ' + ceil_6 + '<br><br>');
document.writeln('--- 음수인 경우 --- <br>')
document.writeln('ceil(-1) : ' + ceil_7 + '<br>');
document.writeln('ceil(-1.111) : ' + ceil_8 + '<br>');
document.writeln('ceil(-1.5) : ' + ceil_9 + '<br>');
document.writeln('ceil(-1.777) : ' + ceil_10 + '<br>');

 

자릿수 지정 (소수점 이하, 10단위, 100단위)

// 1.소수점이하
const ceil_1 = Math.ceil(1.222 * 10) / 10; // 1.3
const ceil_2 = Math.ceil(1.222 * 100) / 100; // 1.23

// 2. 10단위, 100단위
const ceil_3 = Math.ceil(1222 / 10) * 10; // 1230
const ceil_4 = Math.ceil(1222 / 100) * 100; // 1300

// 결과 출력
document.writeln('--- 1. 소수점이하 --- <br>')
document.writeln('ceil_1 : ' + ceil_1 + '<br>');
document.writeln('ceil_2: ' + ceil_2 + '<br><br>');
document.writeln('--- 2. 10단위, 100단위 --- <br>')
document.writeln('ceil_3 : ' + ceil_3 + '<br>');
document.writeln('ceil_4 : ' + ceil_4 + '<br>');

 

Math.ceil() 함수는 올림 처리한 정수를 리턴합니다.

 

따라서, Math.ceil() 함수를 이용해서 소수점 아래에서 값을 올림하고 싶을 때는

처리하려는 숫자의 부동소수점을 올림하고 싶은 숫자 앞까지 옮겨준 후 (10, 100, 1000... 숫자를 곱하여)

Math.ceil() 함수를 적용하고 다시 소수점의 위치를 원복시킵니다. (10, 100, 1000.. 숫자로 나누어서)

 

반대로, 10단위, 100단위에서 올림을 처리하고 싶은 경우에는

마찬가지로 숫자의 부동소수점을 올림하고 싶은 숫자 앞까지 옮겨준 후

(이번에는 올림하고 싶은 숫자가 10, 100의 단위이므로 해당 숫자로 나누어 줍니다.)

Math.ceil() 함수를 적용하고 다시 소수점의 위치를 원복시킵니다.

(10, 100.. 숫자로 다시 곱해줍니다.

 

 

 

2. 내림(Math.floor())

Javascript에서 숫자를 내림 처리할 때는 주로 Math.floor() 함수를 사용합니다.

 

Math.floor() 함수

Math.floor(x)

입력받은 숫자보다 작거나 같은 정수 중 가장 큰 정수를 리턴합니다.

즉, 입력받은 숫자를 내림한 정수를 리턴하는 함수입니다.

 

정수 내림 (음수 포함)

// 1.내림
const floor_1 = Math.floor(1); // 1
const floor_2 = Math.floor(1.222); // 1
const floor_3 = Math.floor(1.5); // 1
const floor_4 = Math.floor(1.777); // 1

// 2. null 또는 0인 경우
const floor_5 = Math.floor(null); // 0
const floor_6 = Math.floor(0); // 0

// 3. 음수인 경우
const floor_7 = Math.floor(-1); // -1
const floor_8 = Math.floor(-1.111); // -2
const floor_9 = Math.floor(-1.5); // -2
const floor_10 = Math.floor(-1.777); // -2

// 결과 출력
document.writeln('--- 정수로 내림하기 --- <br>')
document.writeln('floor(1) : ' + floor_1 + '<br>');
document.writeln('floor(1.222) : ' + floor_2 + '<br>');
document.writeln('floor(1.5) : ' + floor_3 + '<br>');
document.writeln('floor(1.777) : ' + floor_4 + '<br><br>');
document.writeln('--- null 또는 0 인 경우 --- <br>')
document.writeln('floor(null) : ' + floor_5 + '<br>');
document.writeln('floor(0) : ' + floor_6 + '<br><br>');
document.writeln('--- 음수인 경우 --- <br>')
document.writeln('floor(-1) : ' + floor_7 + '<br>');
document.writeln('floor(-1.111) : ' + floor_8 + '<br>');
document.writeln('floor(-1.5) : ' + floor_9 + '<br>');
document.writeln('floor(-1.777) : ' + floor_10 + '<br>');

 

자릿수 지정 (소수점 이하, 10단위, 100단위)

// 1.소수점이하
const floor_1 = Math.floor(1.777 * 10) / 10; // 1.7
const floor_2 = Math.floor(1.777 * 100) / 100; // 1.77

// 2. 10단위, 100단위
const floor_3 = Math.floor(1777 / 10) * 10; // 1770
const floor_4 = Math.floor(1777 / 100) * 100; // 1700

// 결과 출력
document.writeln('--- 1. 소수점이하 --- <br>')
document.writeln('floor_1 : ' + floor_1 + '<br>');
document.writeln('floor_2: ' + floor_2 + '<br><br>');
document.writeln('--- 2. 10단위, 100단위 --- <br>')
document.writeln('floor_3 : ' + floor_3 + '<br>');
document.writeln('floor_4 : ' + floor_4 + '<br>');

 

Math.ceil() 함수에서 소수점 아래, 또는 10, 100의 단위에서 올림처리 하던 방식과 마찬가지로

원본 숫자의 부동소수점을 옮겨서(10, 100, 1000.. 숫자를 곱하거나 나누어서) Math.floor() 함수를 적용한 후,

다시 (10, 100, 1000.. 등의 숫자로 곱하거나 나누어서) 소수점의 위치를 원복 시킵니다.

 

 

 

3. 반올림(Math.round())

Javascript에서 숫자를 반올림 처리할 때는 주로 Math.round() 함수를 사용합니다.

 

Math.round() 함수

Math.round(x)

파라미터로 입력받은 숫자의

소수점 이하의 값이 0.5보다 크면, 입력받은 수보다 다음으로 높은 절대값을 가지는 정수를 리턴합니다.

소수점 이하의 값이 0.5보다 작으면, 입력받은 수보다 절대값이 더 낮은 정수를 리턴합니다.

소수점 이하의 값이 0.5와 같으면, 입력받은 수보다 큰 다음 정수를 리턴합니다.

 

정수 반올림 (음수 포함)

// 1.반올림
const round_1 = Math.round(1); // 1
const round_2 = Math.round(1.222); // 1
const round_3 = Math.round(1.5); // 2
const round_4 = Math.round(1.777); // 2

// 2. null 또는 0인 경우
const round_5 = Math.round(null); // 0
const round_6 = Math.round(0); // 0

// 3. 음수인 경우
const round_7 = Math.round(-1); // -1
const round_8 = Math.round(-1.111); // -1
const round_9 = Math.round(-1.5); // -1
const round_10 = Math.round(-1.777); // -2

// 결과 출력
document.writeln('--- 정수로 반올림하기 --- <br>')
document.writeln('round(1) : ' + round_1 + '<br>');
document.writeln('round(1.222) : ' + round_2 + '<br>');
document.writeln('round(1.5) : ' + round_3 + '<br>');
document.writeln('round(1.777) : ' + round_4 + '<br><br>');
document.writeln('--- null 또는 0 인 경우 --- <br>')
document.writeln('round(null) : ' + round_5 + '<br>');
document.writeln('round(0) : ' + round_6 + '<br><br>');
document.writeln('--- 음수인 경우 --- <br>')
document.writeln('round(-1) : ' + round_7 + '<br>');
document.writeln('round(-1.111) : ' + round_8 + '<br>');
document.writeln('round(-1.5) : ' + round_9 + '<br>');
document.writeln('round(-1.777) : ' + round_10 + '<br>');

 

자릿수 지정 (소수점 이하, 10단위, 100단위)

// 1.소수점이하
const round_1 = Math.round(1.222 * 10) / 10; // 1.2
const round_2 = Math.round(1.5 * 10) / 10; // 1.5
const round_3 = Math.round(1.777 * 10) / 10; // 1.8
// 2. 10단위
const round_4 = Math.round(1001 / 10) * 10; // 1000
const round_5 = Math.round(1005 / 10) * 10; // 1010
const round_6 = Math.round(1007 / 10) * 10; // 1010


// 결과 출력
document.writeln('--- 1. 소수점이하 --- <br>')
document.writeln('round_1 : ' + round_1 + '<br>');
document.writeln('round_2 : ' + round_2 + '<br>');
document.writeln('round_3: ' + round_3 + '<br><br>');
document.writeln('--- 2. 10단위 --- <br>')
document.writeln('round_4 : ' + round_4 + '<br>');
document.writeln('round_5 : ' + round_5 + '<br>');
document.writeln('round_6 : ' + round_6 + '<br>');

 

Math.ceil(), Math.floor() 함수에서 자릿수를 지정하는 방법과 같습니다.

 

소수점 숫자 정밀도 문제

소수점 이하의 값을 올림(ceil), 내림(floor), 반올림(round) 처리할 때 

부동 소수점의 정밀도 문제 때문에 예상하지 못한 결과가 나오기도 합니다.

// 부동소수점 오차 확인 (1.005 반올림)
const n1 = 1.005 * 100; // 100.49999999999999
const round_1 = Math.round(1.005 * 100) / 100;

// 부동소수점 오차 보정 (1.005 반올림)
const n2 = (1.005 + Number.EPSILON) * 100; // 100.50000000000001
const round_2 = Math.round((1.005 + Number.EPSILON) * 100) / 100;


// 결과 출력
document.writeln('--- 부동 소수점 오차 확인 --- <br>')
document.writeln('n1 : ' + n1 + '<br>');
document.writeln('round_1 : ' + round_1 + '<br><br>');
document.writeln('--- 부동 소수점 오차 보정 --- <br>')
document.writeln('n2 : ' + n2 + '<br>');
document.writeln('round_2 : ' + round_2 + '<br>');

 

 부동 소수점 오차 확인 (1.005 반올림) 

const n1 = 1.005 * 100; 

1.005 * 100은 100.5입니다.

하지만, 실제 결과는 '100.49999999999999'로,

Javascript에서 실수를 처리하는 방식 때문에 약간의 오차가 발생하게 됩니다.

 

const round_1 = Math.round(1.005 * 100) / 100;

따라서 위 코드에서 우리는 '1.01'이 나올 것을 기대하지만,

위와 같은 이유로 아래의 결과는 '1'입니다.

 

 

 부동 소수점 오차 보정 (1.005 반올림) 

const n2 = (1.005 + Number.EPSILON) * 100;

const round_2 = Math.round((1.005 * Number.EPSILON) * 100) / 100;

 

위와 같은 부동 소수점 오차를 해결하기 위해 여기서는  Number.EPSILON  이라는 상수를 사용하였습니다.

이 값은 Javascript에서 오차없이 나타낼수 있는 가장 작은 양의 수입니다.

따라서 위 예제에서는 이러한 부동 소수점 오차를 보정하기 위해

Number.EPSILON 값을 더해 준 뒤, 그 값으로 반올림을 처리하였습니다.

물론, '(1.005 * Number.EPSILON) * 100' 값은 우리가 기대하는 것처럼 정확하게 100.5가 아닙니다.

하지만, 적어도 이렇게 처리를 하면, 오차가 많이 줄어들게 될 것 같습니다.

 

 

 

4. 소수점 반올림 (toFixed(), toPrecision())

toFixed() 함수

numObj.toFixed([digits])

toFixed() 함수는, 부동소수점(Floating Point) 숫자를 고정소수점(Fixed Point) 숫자로 바꾸어서 리턴합니다.

이 때, 파라미터로 숫자(digits)를 전달하면, 'digits'만큼의 소수점 이하 자리수를 가지는 문자열로 리턴해줍니다.

그리고 이때, 원본 숫자(numObj)의 소수점 이하 길이가 'digits'보다 길면 숫자를 반올림하고, 

짧으면 뒤를 0으로 채워서 리턴합니다.

 

// 1.소수점이하
const fixed_1 = 1.222.toFixed(1); // 1.2
const fixed_2 = 1.5.toFixed(1); // 1.5
const fixed_3 = 1.777.toFixed(1); // 1.8

// 2.음수
const fixed_4 = (-1.222).toFixed(1); // -1.2
const fixed_5 = (-1.5).toFixed(1); // -1.5
const fixed_6 = (-1.777).toFixed(1); // -1.8

// 결과 출력
document.writeln('--- 1. 소수점이하 --- <br>')
document.writeln('fixed_1 : ' + fixed_1 + '<br>');
document.writeln('fixed_2 : ' + fixed_2 + '<br>');
document.writeln('fixed_3: ' + fixed_3 + '<br><br>');
document.writeln('--- 2. 음수 --- <br>')
document.writeln('fixed_4 : ' + fixed_4 + '<br>');
document.writeln('fixed_5 : ' + fixed_5 + '<br>');
document.writeln('fixed_6 : ' + fixed_6 + '<br>');

 

toPrecision() 함수

numObj.toPrecision([precision])

toPrecision() 함수는

숫자(numObj)를

파라미터로 전달된 유효 자릿수(precision) 길이의 문자열로 만들어서 리턴합니다.

만약, 유효 자릿수(precision)이 원본 숫자의 자릿수보다 작으면 반올림한 값을 리턴합니다.

 

// 1.소수점이하
const precision_1 = 1.222.toPrecision(2); // 1.2
const precision_2 = 1.5.toPrecision(2); // 1.5
const precision_3 = 1.777.toPrecision(2); // 1.8

// 2.음수
const precision_4 = (-1.222).toPrecision(2); // -1.2
const precision_5 = (-1.5).toPrecision(2); // -1.5
const precision_6 = (-1.777).toPrecision(2); // -1.8

// 결과 출력
document.writeln('--- 1. 소수점이하 --- <br>')
document.writeln('precision_1 : ' + precision_1 + '<br>');
document.writeln('precision_2 : ' + precision_2 + '<br>');
document.writeln('precision_3: ' + precision_3 + '<br><br>');
document.writeln('--- 2. 음수 --- <br>')
document.writeln('precision_4 : ' + precision_4 + '<br>');
document.writeln('precision_5 : ' + precision_5 + '<br>');
document.writeln('precision_6 : ' + precision_6 + '<br>');

 

 

---

 

Javascript에서 숫자를 올림, 내림, 반올림 하는 방법을 알아보았습니다.

그러나, Javascript에서 부동소수점을 표현하는 방법에 한계가 있어

실수의 경우, 정밀한 숫자를 표현하는데 오차와 한계가 있습니다.

여기서는 그 오차를 보정하는 방법을 소개하였지만, 충분하지 않을 경우도 많을 것입니다.

따라서, 정밀한 숫자 계산이 필요한 경우에는

Javascript로 front end에서 계산을 하는 것 보다는 Server에서 계산하는 것이 좋을 것 같습니다.