[개발자의품격][부트캠프][1기][9차시] JavaScript 주요 포인트 #7 | 내장 객체 - Math 객체(게시판 페이징, 가위바위보 게임)

[ 영광의 시대!/2022 개발자의 품격 부트캠프 1기 ]

2022년 02월 04일 16시 41분 04초에 업로드 된 글입니다.

작성자: DandyNow

728x90

JavaScript 주요 포인트 #7

내장 객체 - Math 객체

Math 객체는 숫자 자료형만 지원하고, 수학적인 상수와 내장 함수를 가진 객체이다. 다른 객체와 달리 생성자가 아니다.

round, ceil, floor, trunc, sign, pow, sqrt, abs, min, max, random 함수

<script>
  // round() 반올림
  console.log(Math.round(4.9)); // 5
  
  // ceil() 무조건 올림
  console.log(Math.ceil(4.2)); // 5

  // ceil은 실무에서 게시판 페이징(총페이지 수 계산)에서 많이 사용한다.
  // 예) 341(총 게시글 수), 10(페이지당 게시글 수)
  let total = 341;
  let countPerPage = 10;
  let totalPage = Math.ceil(total / countPerPage);
  console.log(totalPage); // 35(총 35개의 페이지가 필요하다.)

  // floor() 무조건 내림
  console.log(Math.floor(4.7)); // 4
  console.log(Math.floor(-4.2)); // -5

  // trunc() 소수점 이하 무조건 버림
  console.log(Math.trunc(4.9)); // 4
  console.log(Math.trunc(-4.2)); // -4

  // sign 음수는 -1, 양수는 1, 0은 0
  console.log(Math.sign(-4)); // -1
  console.log(Math.sign(355)); // 1
  console.log(Math.sign(0)); //0

  // 이하의 함수는 실무에서 많이 사용하지는 않는다.
  // pow() 제곱근
  console.log(Math.pow(8, 2)); // 64

  // sqrt() 루트값
  console.log(Math.sqrt(64)); // 8

  // abs() 무조건 양수값
  console.log(Math.abs(-4.7)); // 4.7

  // min(), max() 가장 작은 값, 가장 큰 값
  console.log(Math.min(0, 2, 11, 5)); // 0
  console.log(Math.max(0, 2, 11, 5)); // 11

  // random() 0 이상 1 미만의 무작위 수
  console.log(Math.random());
  // 0~9 사이의 무작위 정수
  console.log(Math.floor(Math.random() * 10));
  // 1~10 사이의 무작위 정수
  console.log(Math.floor(Math.random() * 10) + 1);
  // 1~100 사이의 무작위 정수
  console.log(Math.floor(Math.random() * 100) + 1);

  // 범위 내 무작위 수(min 이상, max 이하) 반환
  function getRandomInteger(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }
  console.log(getRandomInteger(1, 45));
</script>

ceil은 실무에서 "게시판 페이징시 총페이지 수 계산"을 위해 많이 사용한다. pow, sqrt, abs는 실무에서 많이 사용하지 않았다고 한다. random을 이용한 "범위 내 무작위 수를 반환하는 코드"는 유용하다. 이 코드를 이용해 가위바위보 게임을 간단히 만들어 본다.

Math.random 이용한 가위바위보 게임

// Math.random 이용해 작성한 "범위 내 무작위 수를 반환하는 코드"로 만든 가위바위보 게임
<body>
  <button onclick="rspPlayer('가위');">가위</button>
  <button onclick="rspPlayer('바위');">바위</button>
  <button onclick="rspPlayer('보');">보</button>
  <script>
    // random 내장 객체 이용 가위, 바위, 보 게임
    function getRandomInteger(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }

    function rspPlayer(userRsp) {
      const rsp = ["가위", "바위", "보"];
      // const randomNumber = getRandomInteger(0, 2);
      const playerRsp = rsp[getRandomInteger(0, 2)];
      console.log(playerRsp);
      const userWinValue = {
        가위: "보",
        바위: "가위",
        보: "바위",
      };

      console.log("user", userRsp);
      console.log("player", playerRsp);

      const result =
        userRsp === playerRsp
          ? 0
          : userWinValue[userRsp] === playerRsp
          ? 1
          : -1;
      console.log(result);
    }
  </script>
</body>

728x90

저작자표시 비영리 변경금지

'영광의 시대! > 2022 개발자의 품격 부트캠프 1기' 카테고리의 다른 글

[개발자의품격][부트캠프][1기][9차시] JavaScript 주요 포인트 #9 \| 고급 문법 - this, Scope, Default Function Parameter, Rest Parameter, Arrow Function, Template Literals (0)	2022.02.05
[개발자의품격][부트캠프][1기][9차시] JavaScript 주요 포인트 #8 \| 내장 객체 - JSON, Window 객체 (0)	2022.02.04
[개발자의품격][부트캠프][1기][9차시] JavaScript 주요 포인트 #6 \| 내장 객체 - Set, Map 객체 (0)	2022.02.04
[개발자의품격][부트캠프][1기][8차시] JavaScript 주요 포인트 #5 \| 내장 객체 - Date 객체 (0)	2022.02.04
[개발자의품격][부트캠프][1기][8차시] JavaScript 주요 포인트 #4 \| 내장 객체 - Array 객체 (0)	2022.02.02

다음글이 없습니다.

이전글이 없습니다.