FE (Front End) (구)/javascript

js 중급 기본 정리 (with 앙마코딩) 숫자 매서드 Number, Math

B_Tae 2022. 3. 11. 23:41

이 글은 인프런에서 앙마코딩님의 무료 강좌를 학습한 내용입니다. (자바스크립트 중급 강좌)

문제 시 바로 삭제하겠습니다.

출처 [무료] 자바스크립트 중급 강좌 대시보드 - 인프런 | 강의 (inflearn.com)

Number, Math 매서드


일상 생활의 숫자는 10진수이다. **이를 2진수나 16진수로 변경하는 방법이 있다.**

let num1 = 10;
num1.toString(); /* '10'*/
num1.toString(2); /*1010*/

let num2 = 255;
num2.toString(16); /* 'ff'*/

 

예시에서 보듯이 toString()매서드를 사용하면 문자열로 반환이 된다. 인수를 2나 16을 사용할 경우 변수의 숫자를 2진수. 16진수로 반환한다.

 

Math 매서드

.PI

Math.PI;
/* 3.14159.....*/

 

PI를 사용하면 파이 값을 나타낸다.

ceil(), floor(), round()

let num1 = 5.1 ;
let num2 = 5.7;

Math.ceil(num1);
Math.ceil(num2);
/* 둘다 6*/
Math.floor(num1);
Math.floor(num2);
/* 둘다 5*/
Math.round(num1); /*5*/
Math.round(num2); /*6*/

 

ceil 매서드는 소수점을 올림 상태로 반환한다.

flooor 매서드는 소수점을 내림 상태로 반환한다.

round 매서드는 소수점을 반올림 한 상태로 반환한다.

소수점 자릿수를 지정하고 싶을 때
위 매서드를 그냥 사용하면 소수점 첫번째 자리에서 실행된다. 두번째 혹은 세번째 자리에서 시작하고 싶을 때는 수학 식을 이용하여 사용할 수 있다.

let exampleNum = 30.1456;

/*셋째 자리에서 반올림 할 때 */
Math.round(exampleNum * 100) / 100 ; /* 30.15*/


이런 방법으로 10의 제곱근을 곱하여 정수를 만든 후 그 자리에서 실행하고 다시 곱한 제곱근으로 나눠 소수점을 만들면 원하는 소수점 자릿수에서 실행 할 수 있다.

toFixed()

 

사실 toFixed() 매서드를 사용하면 더 쉽게 원하는 소수점 자릿수에서 반올림을 할 수 있다.

let exampleNum = 30.1456;

/*셋째 자리에서 반올림 할 때 */
exampleNum.toFixed(2); /* '30.12'*/
Number(exampleNum.toFixed(2)); /* 30.12*/


표현하고 싶은 자리를 인수로 입력하면 원하는 자리까지 반환한다.
만약 인수가 0이나 소수점 자리수보다 큰 수를 입력하게 될 경우 0은 정수로 반환하고, 큰 수를 입력할 경우 부족한 자릿수를 0으로 채워 반환한다.

주의할 점

다른 매서드와 다르게 toFixed 는 문자열로 반환한다는 것이다.
따라서 Number 등 매서드를 활용하여 숫자로 변환한 다음 사용하는 경우가 많다.

 

random()


이는 0 ~ 1 사이에 무작위 숫자를 생성한다. 이 매서드 하나만 사용하지는 않고 랜덤한 방향 등과 같이 무작위 개수를 뽑아야 할 때 사용한다.
만약 1 ~ 10 사이 무작위 숫자를 뽑는다면 아래와 같이 사용한다.

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

랜덤한 수에 10을 곱한 정수는 0 ~ 9에 값 중 무작위로 나타난다. 따라서 계산 후 마지막에 1을 더해야 하는 이유이다.

 

max(), min()

 

이는 안에 인수에서 최댓값과 최솟값을 반환하는 매서드이다.

Math.max(1,4,7,754,2,4,6,2); /* 754*/
Math.max(1,4,7,754,2,4,6,2); /* 1 */

 

abs()


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

Math.abs(-1); /* 1*/

 

pow(n, m) , sqrt()

 

pow(n , m) 매서드는 n이라는 숫자를 m제곱근한 값을 반환한다.
sqrt() 매서드는 루트를 씌운다.

Math.pow(2,10); /* 2의 10제곱 1024 */
Math.sqrt(16); /* 루트 16 4*/

 

숫자에서 유용한 매서드

isNaN()

 

isNaN 매서드는 유일하게 NaN인지 아닌지 구분하는 매서드이다.

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

isNaN(x) /* true */
isNaN(3) /* false*/

NaN == NaN /*false*/


특이하게 NaN은 자신과도 다르다고 표현한다.

parseInt(), parseFloat()

 

parseInt() 는 문자열을 정수 숫자열로 반환한다.

let margin = '10px' ;

parseInt(margin); /* 10*/
Number(margin); /* NaN*/

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

 

앞선 예시처럼 parseInt 는 숫자로 반환하는데 문자를 만나게 되면 그 전까지 반환하게 된다. ( Number와 차이점)
따라서 변수에 문자열에서 시작을 문자로 할 경우 parseInt 도 NaN값을 갖게 된다.

 

parseInt는 인수를 추가하여 진수 변경이 가능하다

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

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


위 예시처럼 두 번째 인수에 16이나 2을 입력하여 16진수, 2진수 값으로 반환 받을 수 있다.

parseFloat()

똑같이 문자열을 숫자열로 반환하는 매서드이다.
단, parseInt()는 정수로 반환되지만, parseFloat()은 소수점까지 반환한다.

let padding = '18.5%';

parseInt(padding); /* 18*/
parseFloat(padding); /* 18.5*/