[JS] 숫자, 수학 method (Number, Math)

javaScript 기초를 탄탄하게 다져보자

Posted by lim.Chuck on December 20, 2024

[JavaScript]

기초

  1. [JS] Js기초
  2. [JS] Js기초 변수
  3. [JS] Js기초 자료형
  4. [JS] Js기초 형변환
  5. [JS] Js기초 연산자
  6. [JS] Js기초 반복문
  7. [JS] Js기초 switch
  8. [JS] Js기초 function
  9. [JS] Js기초 객체
  10. [JS] Js기초 배열

중급

  1. [JS] Js중급 호이스팅(Hoisting)과 TDZ(Temporal Dead Zone)
  2. [JS] Js중급 생성자함수
  3. [JS] 객체 메소드(Object methods), 계산된 프로퍼티(Computed property)
  4. [JS] 심볼(Symbol)
  5. [JS] WeakMap WeakSet
  6. [JS] 숫자, 수학 method (Number, Math)
  7. [JS] 문자열 메소드(String methods)
  8. [JS] 배열 메소드(Array methods)
  9. [JS] 구조 분해 할당 (Destructuring assignment)
  10. [JS] 매개변수 리스트와 전개 문법(Rest parameters and spread syntax)
  11. [JS] 클로저(Closure)
  12. [JS] setTimeout / setInterval
  13. [JS] call / apply / bind
  14. [JS] 상속, 프로토타입(Prototype)
  15. [JS] 클래스(Class)
  16. [JS] 클로미스(Promise)
  17. [JS] 비동기 처리(Async/Await)
  18. [JS] Generator
  19. [JS] 메모리 릭(Memory Leak)

WeakMap은 키가 반드시 객체여야 하고, 참조가 없어지면 가비지 컬렉션의 대상이 되는 특별한 맵이야! 🗑️

Number와 Math 객체! 숫자를 다루는 필수 도구들이야! 🔢

1. Number 객체의 주요 기능

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 1. 숫자 변환
Number("123"); // 123
Number("abc"); // NaN
Number(true); // 1
Number(false); // 0

// 2. 특수 값들
console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
console.log(Number.MIN_VALUE); // 5e-324
console.log(Number.POSITIVE_INFINITY); // Infinity
console.log(Number.NEGATIVE_INFINITY); // -Infinity
console.log(Number.NaN); // NaN

// 3. 숫자 검사
Number.isInteger(5); // true
Number.isInteger(5.5); // false
Number.isNaN("abc"); // false
Number.isFinite(Infinity); // false

// 4. 소수점 자리수 지정
const num = 123.456789;
num.toFixed(2); // "123.46"
num.toPrecision(4); // "123.5"

2. Math 객체의 주요 기능

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 1. 기본 수학 연산
Math.abs(-5); // 5 (절대값)
Math.round(4.7); // 5 (반올림)
Math.ceil(4.3); // 5 (올림)
Math.floor(4.7); // 4 (내림)
Math.trunc(4.7); // 4 (소수점 제거)

// 2. 최대/최소값
Math.max(1, 5, 3); // 5
Math.min(1, 5, 3); // 1

// 3. 거듭제곱과 제곱근
Math.pow(2, 3); // 8 (2의 3승)
Math.sqrt(9); // 3 (제곱근)
Math.cbrt(27); // 3 (세제곱근)

// 4. 랜덤 숫자
Math.random(); // 0 이상 1 미만의 랜덤 숫자

3. 실전 활용 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 1. 특정 범위의 랜덤 정수 생성
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// 주사위 굴리기
console.log(getRandomInt(1, 6)); // 1~6 사이의 랜덤 숫자

// 2. 소수점 다루기
function formatMoney(amount) {
  return Number(amount).toFixed(2);
}

console.log(formatMoney(123.4567)); // "123.46"

// 3. 각도와 라디안 변환
function degreesToRadians(degrees) {
  return degrees * (Math.PI / 180);
}

console.log(Math.sin(degreesToRadians(90))); // 1

4. 게임 개발 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
class GameMath {
  // 데미지 계산 (기본 데미지 ± 20%)
  static calculateDamage(baseDamage) {
    const variation = 0.2; // 20% 변동
    const multiplier = 1 + (Math.random() * variation * 2 - variation);
    return Math.round(baseDamage * multiplier);
  }

  // 치명타 확률 계산 (20%)
  static isCritical() {
    return Math.random() < 0.2;
  }

  // 거리 계산 (피타고라스)
  static getDistance(x1, y1, x2, y2) {
    return Math.hypot(x2 - x1, y2 - y1);
  }

  // 각도 계산
  static getAngle(x1, y1, x2, y2) {
    return (Math.atan2(y2 - y1, x2 - x1) * 180) / Math.PI;
  }
}

// 사용 예시
console.log(GameMath.calculateDamage(100)); // 80~120 사이의 값
console.log(GameMath.isCritical()); // true 또는 false
console.log(GameMath.getDistance(0, 0, 3, 4)); // 5
console.log(GameMath.getAngle(0, 0, 1, 1)); // 45

5. 유용한 수학 함수들

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class MathUtils {
  // 숫자 범위 제한
  static clamp(num, min, max) {
    return Math.min(Math.max(num, min), max);
  }

  // 선형 보간
  static lerp(start, end, t) {
    return start + (end - start) * t;
  }

  // 퍼센트 계산
  static percentage(value, total) {
    return Math.round((value / total) * 100);
  }

  // 소수점 반올림 (자릿수 지정)
  static roundTo(num, decimals) {
    const multiplier = Math.pow(10, decimals);
    return Math.round(num * multiplier) / multiplier;
  }
}

// 사용 예시
console.log(MathUtils.clamp(150, 0, 100)); // 100
console.log(MathUtils.lerp(0, 100, 0.5)); // 50
console.log(MathUtils.percentage(75, 200)); // 38
console.log(MathUtils.roundTo(3.14159, 2)); // 3.14

꿀팁! 🍯

  1. 금융 계산시 주의점
1
2
3
4
5
6
7
8
9
// 부동소수점 오차 주의!
0.1 + 0.2; // 0.30000000000000004

// 해결방법: 정수로 변환 후 계산
function addMoney(a, b) {
  return (a * 100 + b * 100) / 100;
}

console.log(addMoney(0.1, 0.2)); // 0.3
  1. 성능 최적화
1
2
3
4
5
6
7
8
9
// Math.floor vs ~~
// ~~ 가 더 빠르지만 가독성이 떨어짐
console.log(Math.floor(5.7)); // 5
console.log(~~5.7); // 5

// Math.pow vs **
// ** 연산자가 더 최신이고 가독성이 좋음
console.log(Math.pow(2, 3)); // 8
console.log(2 ** 3); // 8

이제 Number와 Math는 마스터! 😎 수학적 계산이 필요한 어떤 상황에서도 자신있게 코딩할 수 있을 거야!