[JavaScript] Number, Math

 

 

우리가 실 생활에서 사용하는 숫자는 모두 10진수이다.

개발을 하다보면 2진수나 색상 표현을 위해 16진수가 필요할 때가 있는데

 

이번 시간에는 10진수를 2진수나 16진수로 바꾸는 법을 배울 것이다.

 

 

1. toString( )

이름에서도 알 수 있듯이 이 메소드는 숫자를 문자열로 바꿔준다.

이 때 괄호 안에 숫자를 넣어주면 그 숫자에 해당하는 진수로 바꿔서 반환한다.

let num = 10; num.toString(); // "10" num.toString(2);  // "1010"

 

 

 

 

자바스크립트는 수학과 관련된 프로퍼티와 메소드들을 가지고 있는 Math라는 내장 객체가 있다.

대표적인 프로퍼티로 Math.PI가 있는데 이는 원주율을 보여준다. 

 

 

Math가 가지고 있는 메소드들에 대해 알아보자.

 

 

1. Math.ceil( ) : 올림

소수점에 상관없이 다 올려주는 함수이다.

let num3 = 5.1;    let num4 = 5.7;  Math.ceil(num3); // 6 Math.ceil(num4); // 6

 

 

 

2. Math.floor( ) : 내림

올림과 마찬가지로 소수점과 상관없이 다 내려준다.

let num3 = 5.1; let num4 = 5.7;   Math.floor(num3); // 5 Math.floor(num4); // 5

 

 

 

3. Math.round( ) : 반올림

소수점이 5보다 작으면 내리고 크면 올려준다.

let num3 = 5.1; let num4 = 5.7;   Math.round(num3); //  5 Math.round(num3); //  6

 

 

 

 

작업을 하다보면 소수점 자리수별로 반올림 해야할 때가 있다.

예를 들어 소수점 셋째 자리에서 반올림해서 둘째자리까지 나타내주세요 라고 한다면

아래와 같이 간단하게 해결 할 수 있다.

let userRate = 30.1234; 1.  100을 곱한 뒤 userRate * 100; // 3012.34 2. 반올림을 해주고 Math.round(userRate * 100);  //3012 3. 다시 100으로 나누면 된다 Math.round(userRate * 100) / 100;  //30.12

 

아니면 소수점 자리수만큼 반올림 해주는 toFixed( )를 사용하면 된다.

 

 

4. toFixed( )

: toFixed는 숫자를 인수로 받아 그 숫자만큼 소수점 이하 개수에 반응한다.

만약 소수부 개수보다 많은 인수를 받는다면 그 자리를 0으로 채운다.

통계나 집계 자료에 많이 사용하는 메소드이다.

let userRate = 30.1234; userRate.toFixed(2);  // "30.12" userRate.toFixed(0);  // "30" userRate.toFixed(6);  // "30.123400"

 

정말 유용한 메소드이지만 한가지 주의해야 할 점이 있다.

바로 반환값이 문자열이라는 것이다.

 

때문에 숫자를 반환받고 싶다면 Number( )를 사용해줘야한다.

let userRate = 30.1234; userRate.toFixed(2);  // "30.12" Number(userRate.toFixed(2));  //30.2

 

 

 

 

5. isNaN( )

: NaN인지 아닌지를 확인해준다.

 

여기서 NaN이란?  전역 객체의 속성이다.

NaN의 초기값은 Not-A-Number(숫자가 아님)으로 Number.NaN의 값과 같다.

NaN은 다른 모든 값과 비교(==, !=, ===, !==) 했을 때 같지 않으며, 다른 NaN과도 같지 않다고 판별한다.

let x = Number('x');  //NaN x == NaN // false x === NaN // false NaN === NaN // false

 

때문에 NaN의 판별을 위해서 isNaN( )을 사용하여 판별할 수 있다.

let x = Number('x');  //NaN isNaN(x)  // true isNaN(3)  // false

 

 

 

 

6. parseInt( ) : 문자를 숫자로 바꿔준다 

parseInt가 Number와 다른점은 문자가 혼용되어 있어도 사용할 수 있다는 것이다.

문자가 나오기 전까지 인식하여 숫자들을 반환해준다. 

let margin = '10px'; parseInt(margin); //10 Number(margin); //NaN

 

그래서 숫자로 시작하지 않으면 parseInt도 NaN을 반환한다.

let redColor = 'f3'; parseInt(redColor); //NaN

 

하지만 parseInt는 두번째 인수를 받아서 진수를 지정할 수 있다.

let redColor = 'f3'; parseInt(redColor); //NaN parseInt(redColor, 16); // 243

 

아래처럼 문자열을 숫자로 바꿔서 10진수를 2진수로도 바꿀 수 있다.

parseInt('11', 2);  //  3

 

 

 

 

7. parseFloat( )

parseFloat은 parseInt와 똑같이 동작하지만 부동 소수점을 반환한다.

let padding = '18.5%'; parseInt(padding);  // 18 parseFloat(padding);  // 18.5

 

 

 

8. Math.random( ) : 랜덤 숫자를 생성한다.

범위는 0 ~ 1 사이의 무작위 숫자이다.

 

그래서 1 ~ 100 사이의 숫자를 만들고 싶다면 아래와 같이 식을 만들어줘야 한다.

Math.floor(Math.random() * 100) + 1

마지막에 1을 더해주는 이유는 Math.random( )으로 0.0001같은 숫자를 만들때는 소수점을 버리기 때문에 0이 되어버리는 것을 방지하기 위해서이다.

최소 숫자를 1이라고 했으니 마지막에 1을 더해주는 것이다.

만약 0부터 100까지의 숫자를 랜덤으로 생성한다면 1을 더하지 않아도 된다. 

 

 

 

 

8. Math.max( ) / Math.min( )

괄호 안의 인수들 중에 최대 값과 최소 값을 구할 수 있다.

Math.max(-1, 2, 5, 33, 24, 10); //  33 Math.min(0, 21, 9, 11, 6, 13);  // 0

 

 

 

9. Math.abs( ) : 절대값

Math.abs(-22);  // 22

 

 

 

 

10. Math.pow(n, m) : 제곱

n의 m승 값을 구하는 메소드이다. pow는 power의 약자이다.

Math.pow(2, 10);  // 1024

 

 

 

 

11. Math.sqrt( ) : 제곱근

sqrt는 squareRoute의 약자이다. 

Math.sqrt(16);  // 루트 16의 값인 4가 반환됨

 

 

 

 

* 본 포스팅은 코딩앙마님의 자바스크립트 중급 강좌를 기반으로 작성한 글입니다.