[JS] Javascript 에서 숫자관련 처리 정리

보통 백엔드 단에서 비지니스 로직을 처리해주면 좋겠지만, 모든 것이 완벽하진 않아 간혹가다가 프론트 단에서 비지니스 로직을 처리해야할 때도 있다.

 

예전에 모니터링 시스템을 구축하는 업무를 맡은 적 있는데, 대시보드에 표현될 다양한 수치와 통계를 프론트 단에서 계산해서 뿌려주는 것을 보았다.

 

이런 경우가 비일비재하기 때문에 오늘은 javascript로 숫자 내용을 처리하는 것을 정리하고자 한다.

 

올림, 내림, 반올림

javascript에서는 Math 를 이용해 다양한 처리를 할 수 있다.

올림은 ceil, 내림은 floor, 반올림은 round 메서드를 이용하여 처리한다.

let num1 = 1.3;
let num2 = 1.8;

console.log(Math.ceil(num1));
console.log(Math.ceil(num2));

console.log(Math.floor(num1));
console.log(Math.floor(num2));

console.log(Math.round(num1));
console.log(Math.round(num2));

 

소수점 자리 지정

 

소수점 자리 지정은 반올림을 이용해 구할 수도 있다.

let num3 = 27.2982;

console.log(Math.round(num3*10)/10);

 

혹은 toFixed 메서드를 통해 구한다.

console.log(Number(num3.toFixed(1)));

 

그리고 자리수 보다 더 적게 혹은 더 많게도 표현이 가능하다. 

0이 입력되면 일의 자리까지 반올림 해버리고, 가진 자릿수를 넘어가는 숫자가 입력되면 0으로 채워준다.

이러한 방식은 통계를 내는 대시보드 같은 것을 그릴 때 많이 쓰인다.

console.log(Number(num3.toFixed(0)));
console.log(Number(num3.toFixed(8)));

 

숫자 파싱

 

다음은 다른 타입을 숫자로 파싱하는 것을 보여드리도록 하겠다.

 

일단 Number라는 것으로 파싱이 간으하다.

입력된 값은 숫자형 태로만 이루어진 값만 숫자로 바꿔준다.

isNaN을 이용해서 확인해보면  숫자 형태의 문자열만 숫자로 파싱해준 것을 확인할 수 있다.

let string1 = Number('일');
let num1 = Number('1');

console.log(isNaN(string1));
console.log(isNaN(num1));

 

그리고 Number말고도 parseInt를 이용해 변경도 가능하다.

let n = '255';

console.log(Number(n));
console.log(parseInt(n));

그리고 parseInt의 경우 문자열과 뒤섞여 있어도 숫자로 변환이 가능하다.

let x = '10in';

console.log(Number(x));
console.log(parseInt(x));

 

물론 위의 방법은 첫자리부터 숫자여야만 정상적인 파싱이 가능하다.

let color = 'c3';
console.log(parseInt(color));

 

다만 16진수 같은 경우는 원래 문자가 섞여 있기에, 아래와 같이 16진수의 입력으로 표현이 가능하긴하다.

let color = 'c3';
console.log(parseInt(color,16));

 

2진수 표현도 가능하다.

let binaryNo = '1010';
console.log(parseInt(binaryNo,2));

정수의 파싱 말고, parseFloat를 이용해 실수의 파싱도 가능하다.

let percent = '99.99%';
console.log(parseFloat(percent));

 

Random 값 출력

Math의 random 메서드를 이용해 랜덤값 추출이 가능하다.

단순하게 random 함수를 쓰면 0~1 사이의 값을 임으로 리턴한다.

console.log(Math.random());
console.log(Math.random());
console.log(Math.random());

 

예를들어 1부터 10까지의 값을 구하는 방법을 쓰려면 아래같이 쓸수가 있겠다.

console.log(Math.floor(Math.random()*10)+1);
console.log(Math.floor(Math.random()*10)+1);
console.log(Math.floor(Math.random()*10)+1);

 

최소값, 최대값

 

Math의 min 메서드 max 메서드를 이용해 최소, 최대 값을 구할 수 있다.

console.log(Math.min(-3,-2,-1,0,1,2,3,4,5,));
console.log(Math.max(-3,-2,-1,0,1,2,3,4,5,));

 

절대값

abs 메서드는 절대값을 구하는 메서드이다.

console.log(Math.abs(-100))

 

제곱

pow 메서드를 이용해 제곱을 구할 수 있다.

console.log(Math.pow(2,10));

 

제곱근

sqrt 메서드는 제곱근을 구하는 메서드이다.

console.log(Math.sqrt(4));

 

결코 어려운 내용이 아니니, 쭉 ~~ 보면 무슨 내용인지 이해가 되실거다.

다들 즐겁게 공부하시길 바란다.