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.commap.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}๋ฒ ๋น์ฒจ!`;
}ํ๋ฉด๊ตฌํ
