Math

같은 프론트앤드 개발자여도 어느 분야에서 일하느냐에 따라 주로 사용하는 함수가 달라진다고 한다

예를 들어 쇼핑몰이나 브랜드 사이트를 구현하는 경우,
사용자의 행동(마우스 클릭)을 처리하는 event 함수를 많이 사용한다

핀테크 회사나, 금융회사, 데이터를 많이 다루는 사이트의 경우,
수학 관련 함수를 많이 사용한다

각 분야에 더 전문적으로 써야하는 함수들이 있지만,
어떤 프로젝트를 하더라도 기본적인 event, String, Number 관련의 함수들은 앞으로도 자주 사용하게 된다

수학 계산을 위해서는 JavaScript에서 제공하는 Math 객체를 사용한다
Math 객체는 내장 객체이며 함수 객체가 아니다
Number 데이터 타입만 지원한다!

참고자료
MDN Math
w3schools 자바스크립트 수학객체

자주사용하는 것들을 살펴보자

---

Math.round(num) - 반올림

Math.round(num)
num 값을 가장 가까운 정수로 반올림

console.log(Math.round(2.5));
console.log(Math.round(2.49));
console.log(Math.round(2));
console.log(Math.round(2.82));

결과

3
2
2
3

실무에서 반올림이 필요할때의 예를 들어보면
음악평가 앱에서 사람들이 노래 평점을 매길 때 별 0~5개 중에 선택해야 한다면,
모든 사람들의 점수를 더해 평균을 내면 소수점이 나올 수 있다

평균이 3.56이라고 할 때,
별 3개에 색을 칠하고, 또 하나의 별은 56%만큼 칠해야 된다
하지만 디자이너가 사람들이 보기 쉽게 반올림해서 보여주고 싶다고하면
프론트앤드 개발자는 평균인 3.56을 가지고 Math.round 함수를 사용하여 반올림해서 별의 색을 칠해줘야 한다

---

Math.ceil(num) - 올림

Math.ceil(num)
num 값을 올림한 정수를 반환한다
(주어진 숫자보다 크거나 같은 숫자 중 가장 작은 숫자로 반환)

console.log(Math.ceil(2.5));
console.log(Math.ceil(2.49));
console.log(Math.ceil(2));
console.log(Math.ceil(2.82));

결과

3
3
2
3

---

Math.floor(num) - 버림

Math.floor(num)
num 값을 버림한 정수를 반환한다
(주어진 수 이하의 가장 큰 정수 반환)

console.log(Math.floor(2.5));
console.log(Math.floor(2.49));
console.log(Math.floor(2));
console.log(Math.floor(2.82));

결과

2
2
2
2

---

Math.random() - 0(포함) ~ 1(제외) 사이의 난수 반환

Math.random()
0 (포함)과 1 (제외) 사이의 난수를 반환한다
(항상 1보다 낮은 숫자를 반환)

여러가지 다양하게 사용이 가능하다

Math.floor()과 같이 사용
Math.floor()와 같이 사용하면 임의의 정수를 반환할 수 있다

Math.random()이 0(포함) ~ 1(제외) 사이의 난수를 반환하므로
Math.floor()을 이용해 버림처리로 정수를 구할 수 있으며
Math.random()에 원하는 범위의 수를 곱해주면 0부터 그 숫자 전까지의 임의의 정수를 반환받을 수 있다

Math.floor(Math.random() * 10);  

// 0 부터 9 까지 임의의 정수 반환

여기서 0말고 1부터 시작해서,
원하는 범위를 포함한 수까지 구하고 싶으면 1을 더해주면 된다!

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

// 1 부터 10 까지 임의의 정수 반환

또다른 예로 50부터 100까지 임의의 정수를 반환받고 싶으면
기초값인 50에 Math.floor , Math.random 을 아래와 같이 활용하면 된다

50 + (Math.floor(Math.random() * 50) + 1); 

// 50 부터 100 까지 임의의 정수 반환
// 1을 더해주는 이유는 Math.random이 0 부터 1 미만의 난수를 반환하기 때문
// Math.floor(Math.random() * 50) 은 0 부터 49까지의 임의의 정수를 반환
// 1을 더하지 않으면 50부터 99까지의 임의의 정수를 반환하기 때문이다
// 100을 포함하는게 아니라..

이처럼 random 함수는 로또를 뽑거나, 이벤트 당첨자를 뽑을 떄 유용하게 쓰인다

---

Math의 다른 Method (간단히 소개)

Math.pow(x, y)
x의 값을 y의 거듭제곱으로 반환

Math.pow(8, 2);      // returns 64

Math.sqrt(x)
x의 제곱근을 반환

Math.sqrt(64);      // returns 8

Math.abs(x)
x의 절대(양수) 값 반환

Math.abs(-4.7);     // returns 4.7

Math.min(인수 목록)
인수 목록에서 최소값을 반환

Math.min(0, 150, 30, 20, -8, -200);  // returns -200

Math.max(인수 목록)
인수 목록에서 최대값을 반환

Math.min(0, 150, 30, 20, -8, -200);  // returns 150

---

예제

최소, 최대 값을 받아 그 범위의 난수 출력

function getRandomNumber (min, max) {
  return min + (Math.random() * (max - min));
}

console.log(getRandomNumber(20, 50));

결과

26.25924678942962
// 그때 그때 다름

임의의 정수로 출력하고 싶으면 (max까지 포함한)

function getRandomNumber (min, max) {
  return min + (Math.floor(Math.random() * (max - min)) + 1);
}

console.log(getRandomNumber(20, 50));

결과

27
// 그때 그때 다름
// 최소인 20부터 최대인 50까지 포함하는 범위에서 임의의 정수 반환