소수점 반올림, 올림, 버림, .0채우기

안녕하세요? QRD입니다.

오늘은 자바 스크립트에서 소수점을 제어하는 방법에 대해서 알려드리겠습니다.

소수점 관련해서 자바스크립트에서 아주 유용한 함수가 있어서 소개해 드리는 겁니다만..헤헤
항상 소수점을 한자리로 고정하고 싶거나, 소수점을 0으로 채우고 싶다거나.. 이러한 상황이 발생하게 될 때마다
매우 난감할때가 있었었죠?
제가 해결해 드리겠습니다 하하!

.toFixed()

자바스크립트에서 소수점을 원하는 자리까지 고정할 수 있도록 지원해주는 강력한 함수가 있습니다.
바로 .toFixed(소수점 이하 고정할 자릿수) 라는 함수인데요..
또한 자릿수 고정시 .0으로도 채워주는 아주 고마운 녀석이죠.
사용법을 한 번 알아볼까요?!

var test = 1234.56;

위의 결과에서도 확인할 수 있듯이, .toFixed(소수점 이하 고정할 자릿수)를 사용할 때
소수점 이하 고정할 자릿수보다 넘칠 때에는 반올림을,
넘치지 않을 때에는 .0을 채워주는 것을 알 수 있습니다.
만약 에러가 발생할 때는 99% 지정된 변수가 숫자가 아닌 문자열로 인식하는 경우인데요..
그럴때는 변수를 숫자로 변환해줘야겠죠?
Number(변수)를 하여 숫자로 인식하도록 변환해주도록 하면 됩니다.

하지만 .toFixed()는 강제적으로 반올림을 해버리는데, 나는 지정한 소수점 자리에서 버림이나 올림을 하고 싶다?! 이럴 때는 어떻게 해야 할까요?
그럴때는 로직을 만들어야 하는데, 일단 아래에 간단히 만든 곳에 테스트할 숫자를 입력해 보세요!

소수점 자리 표시하기
숫자를 입력하세요.
소수점 자리수를 입력하세요(ex. .00 -> 2)
형태를 선택하세요	반올림 올림 버림
결과

잘 동작 하나요? 아래에 어떠한 로직으로 했는 지 알려드리겠습니다!

반올림
var count = Math.pow(10,자리수-1); // 반올림을 할 자리수(ex. 소수점 둘째자리에서 반올림을 하고 싶다면 2이다.)
var 숫자 = Math.round(숫자*count)/count;
var 결과 = 숫자.toFixed(자리수)// 0을 채워주기 toFixed를 이용

올림
var count = Math.pow(10,자리수-1);
var 숫자 = Math.ceil(숫자*count)/count;
var 결과 = 숫자.toFixed(자리수)// 0을 채워주기 toFixed를 이용

버림
var count = Math.pow(10,자리수-1);
var 숫자 = Math.floor(숫자*count)/count;
var 결과 = 숫자.toFixed(자리수)// 0을 채워주기 toFixed를 이용

로직을 살펴보면 반올림, 올림, 버림 모두 비슷합니다.
반올림의 경우를 예로 설명해보겠습니다
우선 Math.pow(인자1, 인자2)의 함수가 보일겁니다.
pow의 역할은 인자1을 인자2만큼 제곱을 하는 함수입니다.
따라서 Math.pow(10,3)라면 10 * 10 * 10 = 1000 이라는 거에요. 결국 count에는 100이라는 숫자가 담겨질 겁니다.
다음 줄에 있는 Math.round는 반올림을 해주는 함수인데요. 이 놈은 소수점 첫째 자리를 반올림 합니다.
예를 들어 Math.round(345.5) 의 결과는 346 이 되는거죠

만약 1234.56 이라는 숫자를 둘째 자리에서 반올림을 하고 싶으면..?

이 점을 해결하기 위해 곱하고 나누는 작업을 하는 겁니다.
위에 로직에 따르면 count에는 10이라는 값이 담길 것입니다.
1) 1234.56 * 10 = 12345.6 이 될 것입니다.
2) 여기서 Math.round(12345.6)을 하게 되면 12346이 나오겠죠?
3) 12346을 다시 10으로 나누게 되면 1234.6이 됩니다.. 짜잔!
마치 둘째자리에서 반올림 한 거 같은 형태의 숫자가 나오게 되는거에요
그리고 위에서 설명드렸다시피 toFixed를 이용하여 모자란 부분에 0을 채워주는 작업을 하게 되는겁니다. 어때요 참 쉽죠?

이제 다 같은 맥락인 거에요!!
반올림에서 사용한 Math.round 함수는 소수점 첫째자리에서 반올림을 하게 해주는 함수이고,
올림에서 사용한 Math.ceil 함수는 소수점 첫째자리에서 올림을 하게 해주는 함수이고,
버림에서 사용한 Math.floor 함수는 소수점 첫째자리에서 버림을 하게 해주는 함수입니다.

이제 모두 이해하셨을 거라 생각합니다.
이 글을 읽으신 모든 분들이 자유자재로 반올림, 올림, 버림을 구현하실 수 있으면 정말 좋겠습니다.

이번 포스팅은 여기까지 할게요!
감사합니다. QRD였습니다. 꾸벅(_ _)