🍦Vanilla JS ⑤ 객체 - (2).4 표준 내장 객체 : Map, Math, 랜덤 예제

kongmi 2023. 3. 29. 17:55

Map

Map은 자바스크립트에서 제공하는 데이터 구조 중 하나로, key - value 쌍으로 데이터를 저장하고 관리합니다.
Map은 은 객체와 유사하지만, 객체와는 다르게 key에 다양한 자료형을 사용할 수 있으며, 원시 자료형도 key에 사용할 수 있습니다.

set(key, value) : Map은 객체에 key - value 쌍을 추가합니다.
get(key) : Map은 객체에서 지정한 key에 대한 값을 반환합니다.
has(key) : Map은 객체에서 지정한 key가 존재하는지 여부를 반환합니다.
delete(key) : Map은 객체에서 지정한 key에 대한 key - value 쌍을 제거합니다.
clear() : Map은 객체에서 모든 key- value 쌍을 제거합니다.
size : Map은 객체에 저장된 key - value 쌍의 개수를 반환합니다.

let map = new Map();

map.set("name", "유나");
map.set("email", "yuna@naver.com");
map.set("addr", "서울시 강남구");

👉 원래는 정보를 백엔드에서 받아와서 Map으로 뿌리지만, 지금은 받아올 정보가 없기 때문에 set을 사용하여 가져오겠습니다.

console.log(map.size); // 3
console.log(map.get("name")); // 유나
console.log(map.get("email")); // yuna@naver.com

map.forEach((item) => {
  console.log(item);
});

/*
유나
yuna@naver.com
서울시 강남구 */

Math

수학 연산을 다루는 Math 객체 ( 자바랑 똑같음 )

Math.abs(x) : x의 절대값 반환
Math.ceil(x) : x 이상의 가장 작은 정수 반환
Math.floor(x) : x 이하의 가장 큰 정수 반환
Math.round(x) : x를 반올림한 정수 반환
Math.max(x1, x2, ... , xn) : 주어진 값들 중 가장 큰 값 반환
Math.min(x1, x2, ... , xn) : 주어진 값들 중 가장 작은 값 반환
Math.pow(x, y) : x의 y 제곱 반환
Math.sqrt(x) : x의 제곱근 반환
Math.random() : 0 이상 1 미만 난수 반환

console.log(Math.abs(-5)); // 5
console.log(Math.ceil(1.1)); // 2
console.log(Math.floor(1.9)); // 1
console.log(Math.round(1.4)); // 1
console.log(Math.max(1, 2, 3)); // 3
console.log(Math.min(1, 2, 3)); // 1
console.log(Math.pow(2, 3)); // 8
console.log(Math.sqrt(9)); // 3
console.log(Math.random()); // 0 이상 1 미만의 임의의 수

Math.random() : 0보다 크고 1보다 작은 숫자형 반환

let a = Math.floor(Math.random() * 10); // 0 ~ 9 정수값 반환
console.log(a);

1 ~ 10 사이의 정수값 반환

let b = parseInt((Math.random() * 10) + 1); // 1 ~ 10 정수값 반환
console.log(b);

간단한 예제) 당첨자 추첨!

응모자 수를 입력 받아 당첨자를 발표 하는 프로그램 작성
응모자 수 : input 입력받기
당첨자 발표 : 응모자 수 사이에서 당첨자를 선택(랜덤)해 발표

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
    }
    h1 {
      margin-top: 30px;
      text-align: center;
    }
    .box {
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .item {
      margin: 20px 0;
    }
    #rst {
      border-radius: 10px;
      width: 300px;
      height: 80px;
      background-color: navy;
      line-height: 80px;
      color: #fff;
      font-size: 2em;
      font-weight: bold;
    }
    button:hover {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <h1>상금 이벤트 추첨</h1>
  <div class="box">
    <div class="item">
      <label for="num">총 응모자 수</label>
      <input type="text" id="num">
      <button onclick="random()">클릭!!</button>
    </div>
    <p id="rst"></p>
  </div>

  <script src="./230329_1_5_응모자랜덤.js"></script>
</body>
</html>

JavaScript

function random() {
  const num = Number(document.getElementById("num").value);
  let ran = parseInt((Math.random() * num) + 1);
  document.getElementById("rst").innerHTML = `${ran}번 당첨!`;
}

화면구현

저작자표시 비영리 변경금지 (새창열림)