- html์ ๋นํด์๋ ์๊ฒฉํ์ง๋ง ๋ค๋ฅธ ์ธ์ด๋ค๊ณผ ๋น๊ตํ์ ๋๋ ์ ์ฐํ ํธ์ด๋ค
- // ํ ์ค ์ฃผ์
- /**/ ์ฌ๋ฌ ์ค ์ฃผ์ โ (shift+art+a)
- undefined โ ๋ณ์๊ฐ ์ ์ธ๋ง ๋๊ณ ๊ฐ์ ํ ๋น ๋ฐ์ง ๋ชปํ์ ๋
- @charset โutfโ-8; โ ์ธ ํ์ ์๋ค.
- object.method(parameter) ; ๊ฐ์ฒด. ๋ฉ์๋ (๋งค๊ฐ๋ณ์*)*
- js ์์ฑ ์ ์ฃผ์์ฌํญ โhead ์์ญ ๋ฑ DOM์ ๋ถ๋ฌ์ค๊ธฐ ์ ์ ์์ฑ์ ๋ฌธ์ ์ค๋น ์ด๋ฒคํธ ํ์
- HTML ํ๊ทธ์ ์ด๋ฒคํธ ๋ฆฌ์ค๋ ์์ฑ์ ์์ฑ
<img src=โapple.jpgโ alt=โimgโ onclick=โthis" src=โbanana.pngโโ>
- <script> </script> ๋ด ์์ฑ
-
์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ๋ณ๋ ํ์ผ์ ์์ฑ
- DOM์ ๋ค ๋ถ๋ฌ์จ ์์น: <script src=โscript.jsโ></script>
- DOM์ ๋ถ๋ฌ์ค๊ธฐ ์ ์์น: <script defer src=โscript.jsโ></script>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScriptBasic</title>
<style>
body {
background-color: #ddd;
}
</style>
<!-- ๋ด๋ถ์ ์ธ -->
<script type="text/javascript">
//ํ์ค ์ฃผ์
//type ์์ฑ์ xml, chtml ๋ฐฉ์์ผ ๋ ํ์์ด๋ html์์ ์๋๊ฒ ๊ธฐ๋ณธ
//react์์๋ type ์์ฑ ํ์
</script>
<script>
/*
์ฌ๋ฌ ์ค ์ฃผ์ ์ฒ๋ฆฌ (shift+art+a)
js ์์ฑ ์ ์ฃผ์์ฌํญ
head ์์ญ ๋ฑ DOM์ ๋ถ๋ฌ์ค๊ธฐ ์ ์ ์์ฑ์ ๋ฌธ์ ์ค๋น ์ด๋ฒคํธ ํ์
*/
</script>
<!-- ์ธ๋ถ ์ ์ธ -->
<!-- <script src="./script.js"></script> -->
<!-- defor ์์ฑ ์์ฑ์ ์คํฌ๋ฆฝํธ ๋ด๋ถ์ ๋ฌธ์ ์ค๋น ์ด๋ฒคํธ ๋ถํ์ -->
<script defer src="./script.js"></script>
</head>
<body>
<!-- Dom์ ๋ค ๋ถ๋ฌ์จ ๋ค์ JS ์คํ -->
<script>
// document.querySelector("body").innerHTML = "Hello JavaScript";
</script>
<!-- <script src="./script.js"></script> -->
</body>
</html>-
์์ ํ์ (primitive data type)
: ํ๋ฒ์ ํ๋์ ๊ฐ๋ง ๊ฐ์ง ์ ์์ผ๋ฉฐ ํ๋์ ๊ณ ์ ๋ ์ ์ฅ๊ณต๊ฐ ์ด์ฉ
ยท string(๋ฌธ์์ด)
ยท number(์ซ์)
ยท boolean
ยท null : ๊ฐ๋ฐ์๊ฐ ์๋์ ์ผ๋ก ์์ค ๊ฐ
ยท undefined : ๋ณ์ ์ ์ธ์ ๋์์ผ๋ ๊ฐ์ด ์๋ ์ํ, ์์๋ ๋ณ์๋ก ์ ์ธ
ยท symbol(ES6์์ ์ถ๊ฐ)
-
๊ฐ์ฒด(์ฐธ์กฐ) ํ์ (object/reference type)
: ํ๋ฒ์ ์ฌ๋ฌ ๊ฐ์ ๊ฐ์ ๊ฐ์ง ์ ์์ ์ฌ๋ฌ ๊ฐ์ ๊ณ ์ ๋์ง ์์ ๋์ ๊ณต๊ฐ ์ฌ์ฉ
object : ๋ฐฐ์ด, ํจ์, ์ ๊ทํํ์
- header ์๋ก ์์ฑ
- ๋ด๋ถ ์ ์ธ
- <script *type*="text/javascript"></script>
- <script></script>
- ์ธ๋ถ ์ ์ธ
- <script *src*="./script.js"></script>
- ๋ด๋ถ ์ ์ธ
console.log("๋ฉ์ธ์ง ์ถ๋ ฅ");//์ฝ์ ์์ญ์ ์ถ๋ ฅconsole.debug("log์ ๋ง์ฐฌ๊ฐ์ง๋ก ์ฝ์ ์์ญ์ ์ถ๋ ฅ");console.clear();
Variable
- ๋ณ์ variable ๋
- ๋ฐ์ดํฐ์ ์ ์ฅ๊ณต๊ฐ์ผ๋ก ์ฌ์ฉ์๊ฐ ์ด๋ฆ์ ๋ถ์ฌ ์ฌ์ฉ.
- ํค์๋(์์ฝ์ด) var, let ์ ํจ๊ป ์์ฑ.
- Variable Hoisting ๊ณผ์ - ์ ์ธ : ํ์ฑ ๊ณผ์ ์์ ๋ณ์ ๊ฐ์ฒด๊ฐ ๋ณ์์ ๋ํ ์๋ณ์๋ค์ ์์ง - ์ด๊ธฐํ : ์๋ณ์์ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ํ ๋นํ๊ณ undefined ์ํ๋ฅผ ๋ถ์ฌ - ํ ๋น : ๋ณ์ ์์ ์ง์ ๊ฐ์ ๋๊น
- ํธ์ด์คํ hoisting ์ด๋? Hoist(:๋์ด ์ฌ๋ฆฌ๋ค) + -ing / var ์ ์ธ๋ฌธ์ด๋ function ๋ฌธ ๋ฑ ๋ชจ๋ ์ ์ธ๋ฌธ์ด ํด๋น ์์ญ์ ์์ผ๋ก ๋์ด ์ฌ๋ฆฐ ๊ฒ์ฒ๋ผ ๋์ํ๋ ํน์ฑ. - ์ ์ธ๋ ํจ์๋ ์๋จ์์ ์ฐธ์กฐ, ํธ์ถ์ด ๊ฐ๋ฅ - ์ ์ธ๋ var ๋ ์๋จ์์ ์ฐธ์กฐ, ํ ๋น์ด ๊ฐ๋ฅํ๋ค. - ์ ์ธ๋ let , const ๋ ์๋จ์์ ์ฐธ์กฐ, ํ ๋น์ด ๋ถ๊ฐ๋ฅ
- var
- ํจ์ ๋ ๋ฒจ ์ค์ฝํ function level scope: ํจ์ ๋ด์์ ์ ์ธ๋ ๋ณ์๋ ํจ์ ๋ด์์๋ง ์ ํจ. ํจ์ ๋ด์์ ์ ์ธ๋๋ฉด ์ง์ญ๋ณ์, ํจ์ ์ธ๋ถ์์ ์ ์ธ๋๊ฑฐ๋ ํค์๋ ์๋ต์ ์ ์ญ๋ณ์.
- var ํค์๋ ์๋ต ๊ฐ๋ฅ
- ๋ณ์ ์ค๋ณต ์ ์ธ ๊ฐ๋ฅ
- ๋ณ์ ํธ์ด์คํ (๋ณ์๋ฅผ ์ ์ธํ๊ธฐ ์ ์ ์ฐธ์กฐ) ๊ฐ๋ฅ
- let
- ๋ธ๋ก ๋ ๋ฒจ ์ค์ฝํ block level scope: {์ค๊ดํธ} ์์์ ์ ์ธ๋ ๋ณ์๋ ๋ธ๋ก ๋ด๋ถ์์๋ง ์ ํจ. ์ธ๋ถ์์ ์ฐธ์กฐํ ์ ์์. ํจ์, if๋ฌธ, for๋ฌธ ๋ฑ...
- ๋ณ์์ ์ฌํ ๋น ๊ฐ๋ฅํ๋ ๊ฐ์ ์ด๋ฆ์ผ๋ก ์ฌ์ ์ธ์ ๋ถ๊ฐ๋ฅ
-
๋ณ์ ์ด๊ธฐํ
ยท ์ซ์ ๋ณ์ ์ด๊ธฐํ let num = 0;
ยท ๋ฌธ์์ด ๋ณ์ ์ด๊ธฐํ let txt = "";
ยท ๋ ผ๋ฆฌ ๋ณ์ ์ด๊ธฐํ let boo = false;
ยท ๊ฐ์ฒด ๋ณ์ ์ด๊ธฐํ let obj = null;
- Variable
- ๋ณ์ variable ๋
๋ฐ์ดํฐ์ ์ ์ฅ๊ณต๊ฐ์ผ๋ก ์ฌ์ฉ์๊ฐ ์ด๋ฆ์ ๋ถ์ฌ ์ฌ์ฉ.
ํค์๋(์์ฝ์ด) var, let ์ ํจ๊ป ์์ฑ.
---
1. Variable Hoisting ๊ณผ์
<aside>
๐ก ๊ณผ์
a. ์ ์ธ : ํ์ฑ ๊ณผ์ ์์ ๋ณ์ ๊ฐ์ฒด๊ฐ ๋ณ์์ ๋ํ ์๋ณ์๋ค์ ์์ง
b. ์ด๊ธฐํ : ์๋ณ์์ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ํ ๋นํ๊ณ undefined ์ํ๋ฅผ ๋ถ์ฌ
c. ํ ๋น : ๋ณ์ ์์ ์ง์ ๊ฐ์ ๋๊น
</aside>
1. ํธ์ด์คํ
hoisting ์ด๋? Hoist(:๋์ด ์ฌ๋ฆฌ๋ค) + -ing / var ์ ์ธ๋ฌธ์ด๋ function ๋ฌธ ๋ฑ ๋ชจ๋ ์ ์ธ๋ฌธ์ด ํด๋น ์์ญ์ ์์ผ๋ก ๋์ด ์ฌ๋ฆฐ ๊ฒ์ฒ๋ผ ๋์ํ๋ ํน์ฑ.
<aside>
๐ก .
a. ์ ์ธ๋ ํจ์๋ ์๋จ์์ ์ฐธ์กฐ, ํธ์ถ์ด ๊ฐ๋ฅ
b. ์ ์ธ๋ var ๋ ์๋จ์์ ์ฐธ์กฐ, ํ ๋น์ด ๊ฐ๋ฅํ๋ค.
c. ์ ์ธ๋ let , const ๋ ์๋จ์์ ์ฐธ์กฐ, ํ ๋น์ด ๋ถ๊ฐ๋ฅ
</aside>
---
1. var
<aside>
๐ก .
- ํจ์ ๋ ๋ฒจ ์ค์ฝํ function level scope: ํจ์ ๋ด์์ ์ ์ธ๋ ๋ณ์๋ ํจ์ ๋ด์์๋ง ์ ํจ. ํจ์ ๋ด์์ ์ ์ธ๋๋ฉด ์ง์ญ๋ณ์, ํจ์ ์ธ๋ถ์์ ์ ์ธ๋๊ฑฐ๋ ํค์๋ ์๋ต์ ์ ์ญ๋ณ์.
- var ํค์๋ ์๋ต ๊ฐ๋ฅ
- ๋ณ์ ์ค๋ณต ์ ์ธ ๊ฐ๋ฅ
- ๋ณ์ ํธ์ด์คํ
(๋ณ์๋ฅผ ์ ์ธํ๊ธฐ ์ ์ ์ฐธ์กฐ) ๊ฐ๋ฅ
</aside>
1. let
<aside>
๐ก .
- ๋ธ๋ก ๋ ๋ฒจ ์ค์ฝํ block level scope: {์ค๊ดํธ} ์์์ ์ ์ธ๋ ๋ณ์๋ ๋ธ๋ก ๋ด๋ถ์์๋ง ์ ํจ. ์ธ๋ถ์์ ์ฐธ์กฐํ ์ ์์. ํจ์, if๋ฌธ, for๋ฌธ ๋ฑ...
- ๋ณ์์ ์ฌํ ๋น ๊ฐ๋ฅํ๋ ๊ฐ์ ์ด๋ฆ์ผ๋ก ์ฌ์ ์ธ์ ๋ถ๊ฐ๋ฅ
</aside>
---
**๋ณ์ ์ด๊ธฐํ**
<aside>
๐ก .
ยท ์ซ์ ๋ณ์ ์ด๊ธฐํ let num = 0;
ยท ๋ฌธ์์ด ๋ณ์ ์ด๊ธฐํ let txt = "";
ยท ๋
ผ๋ฆฌ ๋ณ์ ์ด๊ธฐํ let boo = false;
ยท ๊ฐ์ฒด ๋ณ์ ์ด๊ธฐํ let obj = null;
</aside>
- Variable ๋ณ์
- ๋ณ์ ์ ์ธ
```
var apple;
console.log(apple); //undefined ๋ณ์๊ฐ ์ ์ธ๋ง ๋๊ณ ๊ฐ์ ํ ๋น ๋ฐ์ง ๋ชปํ์ ๋
console.log('apple'); //๋ฌธ์์ด
```
- ๋ณ์ ์ ์ธ ํ ๋์
```
//๋ณ์ ์ ์ธ ํ ๋์
let banana; //๋ณ์ ์ ์ธ
banana = 1000; //๋ณ์ banana์ ์ซ์ 1000dmf '๋์
'
alert(banana)
```

- ๊ฐ์ ์ฌํ ๋น
```
//๋ณ์ ์ ์ธ ํ ๋์
let banana; //๋ณ์ ์ ์ธ
banana = 1000; //๋ณ์ banana์ ์ซ์ 1000dmf '๋์
'
// alert(banana)
console.log(banana)
banana = 2000; // ๊ฐ์ ์ฌํ ๋น
console.log(banana);
```

- ๋ณ์ ์ ์ธ๊ณผ ๋์์ ๋์
```
let orange = 1234;
console.log(orange)
```
- ์ฌ๋ฌ ๊ฐ์ ๋ณ์ ์ ์ธ ํ ๊ฐ ๊ฐ์ ๊ฐ ๋์
```jsx
let a, b, c, d;
a = 1, b = 2, c = 4, d = a + b + c
console.log(a)
console.log(b)
console.log(c + b)
console.log(d)
```

- *ํ ์ค์ ์ฌ๋ฌ ๋ณ์๋ฅผ ์ ์ธํจ๊ณผ ๋์์ ๊ฐ ๋์
*
```jsx
let ๋ณ์1 = 22, ๋ณ์2 = 33, ํฉ๊ณ = ๋ณ์1 + ๋ณ์2;
console.log(ํฉ๊ณ);
let num1 = 21234, num2 = 3453464534, sum = num1 + num2;
console.log(sum);
console.log(sum = ํฉ๊ณ);
```

- Variable ๋ณ์2
```jsx
//variable-๋ณ์2
console.log('------ var ------')
//๋ณ์ a ๋ฅผ ์ธ์งํ๊ณ ๋ฉ๋ชจ๋ฆฌ์ ๋ณ์ a์ ์๋ฆฌ๋ฅผ ๋ง๋ค์ด ๋์ ์ํ(์ด๊ธฐํ) <- ๋ณ์ ํธ์ด์คํ
console.log(a); // undefined ๋ณ์๊ฐ ์ ์ธ๋ง ๋๊ณ ๊ฐ์ ํ ๋น ๋ฐ์ง ๋ชปํ์ ๋ errow๋ ์๋๋ค
var a = 100;
console.log('------ let ------')
//
console.log(b); ์ฐธ์กฐ ์๋ฌ. ๋ณ์ ํธ์ด์คํ
x
let b = 500;
```

- ์ฌํ ๋น
```jsx
// console.log(b); ์ฐธ์กฐ ์๋ฌ. ๋ณ์ ํธ์ด์คํ
x
let b = 500;
b = 1000;
console.log(b);
```

- var, let ์ฌ์ ์ธ ์ฐจ์ด
```jsx
//variable-๋ณ์2
console.log('------ var ------');
//๋ณ์ a ๋ฅผ ์ธ์งํ๊ณ ๋ฉ๋ชจ๋ฆฌ์ ๋ณ์ a์ ์๋ฆฌ๋ฅผ ๋ง๋ค์ด ๋์ ์ํ(์ด๊ธฐํ) <- ๋ณ์ ํธ์ด์คํ
console.log(a); // undefined ๋ณ์๊ฐ ์ ์ธ๋ง ๋๊ณ ๊ฐ์ ํ ๋น ๋ฐ์ง ๋ชปํ์ ๋ errow๋ ์๋๋ค
var a = 100;
a = 200; // ๊ฐ์ ์ฌํ ๋น
console.log(a);
var a = '์ค๋ณต ์ ์ธ, ์ฌ์ ์ธ ๊ฐ๋ฅ';
close.log(a);
console.log('------ let ------');
//
// console.log(b); ์ฐธ์กฐ ์๋ฌ. ๋ณ์ ํธ์ด์คํ
x
let b = 500;
b = 1000;
console.log(b);
// let b = '์ค๋ณต ์ ์ธ, ์ฌ์ ์ธ ๋ถ๊ฐ๋ฅ';
``
const โ ์๋ฐ์คํฌ๋ฆฝ์ ๋ณ์
```
ex) ๋ชจ๋ฐ์ผ ๋ฒํผ๊ณผ ๊ธ๋ก๋ฒ ๋ฒํผ์ ํ์ํด๋ผ
const mobileBtn = document.querySelector('.mobile-btn')
const globalBtn = document.querySelector('.global-btn')
```
์ฐฝ
- ์๋ฆผ, ๊ฒฝ๊ณ ์ฐฝ - window.alert(โโ); โ ex) alert('์๋ฆผ์ฐฝ์ ๋๋ค'); 
- ํ์ธ์ฐฝ. ํ์ธ(true), ์ทจ์(false) ๋ฒํผ์ ๊ฐ์ง ์ฐฝ
- confirm(); โ ex) confirm('ํ์ธ ์ฐฝ์
๋๊น?');

- ์
๋ ฅ์ฐฝ ('๋ฉ์ธ์ง', '์๋ต ๊ฐ๋ฅํ ์
๋ ฅ๊ฐ')
- prompt(); โ ex) prompt('์
๋ ฅ๊ฐ์ ์์ฑํ์ธ์', '์ด ๊ณณ์ ์์ฑํ์ธ์');

Const ์์
```
//conts ์์: ๋ณํ์ง ์๋ ๋ณ์
//const apple; ์์์ ๊ฒฝ์ฐ ์ ์ธ ํ ๋์
x
apple = '์ฌ๊ณผ'; //ํค์๋ ์์ด ์์ฑํ๋ฉด ์ผ๋ฐ์ ์ผ๋ก ๋ณ์(var)๋ก ์ธ์
//const apple = 2000; ํค์๋ ์๋ ๋ณ์๋ช
๊ณผ ๋์ผํ ์ด๋ฆ ์ฌ์ฉ x
console.log(apple);
//์ ์ธ๊ณผ ๋์์ ๋์
const orange = '์ค๋ ์ง';
console.log(orange);
//orange = '์ฌํ ๋น ๊ฐ๋ฅ?'; ๋ถ๊ฐ๋ฅ
//const orange = '์ฌ์ ์ธ ๊ฐ๋ฅ?'; ๋ถ๊ฐ๋ฅ
```


์ฐ์ฐ์
- ์ฐ์ ์ฐ์ฐ์ ```html
์ฐ์ ์ฐ์ฐ์์์,
1. ๋ํ๊ธฐ ์ฐ์ฐ์๋ฅผ ์ ์ธํ ๋ค๋ฅธ ์ฐ์ฐ์๋ ๋ฌธ์์ด ๋ฐ์ดํฐ(์๋ฃ)๋ฅผ ์ฐ์ฐํ ์ ์๋ค
2. ๋ํ๊ธฐ ์ฐ์ฐ์๋ฅผ ์ ์ธํ ๋ค๋ฅธ ์ฐ์ฐ์๋ ์ซ์ํ ๋ฌธ์์ด์ ๊ฒฝ์ฐ '์ซ์'๋ก ์๋ ๋ณํํ์ฌ ์ฐ์ฐ
3. ๋ณตํฉ ์ฐ์ฐ์ ๊ฒฝ์ฐ ๋ฌธ์์ด ๋ฐ์ดํฐ๋ก ์ฐ์ฐ ํ ๋ ๋ํ๊ธฐ๊ฐ ๋จผ์ ์ฐ์ฐ๋๋ฉด ๋ฌธ์์ด ๋ฐ์ดํฐ๋ก ๋ฐํ
```
```jsx
์ฐ์ ์ฐ์ฐ์
= ๋์
ํน์ ํ ๋น,
+ ๋ํ๊ธฐ,
- ๋นผ๊ธฐ,
* ๊ณฑํ๊ธฐ,
/ ๋๋๊ธฐ,
% ๋๋จธ์ง๊ฐ,
** ๊ฑฐ๋ญ์ ๊ณฑ
---------------------------------------------------------------
์๋ฐ์คํฌ๋ฆฝํธ์ ์ฐ์ฐ์ ์ฌ์น ์ฐ์ฐ์ ๋ฐฉ์์ ๋๋ถ๋ถ ๋ฐ๋ฆ
---------------------------------------------------------------
// ๋์
์ฐ์ฐ์
let a = 333, b = 22, c = 55;
---------------------------------------------------------------
// +.- ์ฐ์ฐ์๋ง ์์ ๋ ์ผ์ชฝ์์ ์ค๋ฅธ์ชฝ์ผ๋ก ์์ฐจ ์ฐ์ฐ
console.log(
a - b + c
);
---------------------------------------------------------------
// *,/,%,** ์ฐ์ฐ์๋ง ์์ ๋ ์ผ์ชฝ์์ ์ค๋ฅธ์ชฝ์ผ๋ก ์์ฐจ ์ฐ์ฐ
console.log(a * b / c);
---------------------------------------------------------------
//+,-,*,/,%,** ๊ณฑํ๊ธฐ, ๋๋๊ธฐ, ๋๋จธ์ง๊ฐ, ๊ฑฐ๋ญ์ ๊ณฑ์ด ๋จผ์ ์ฐ์ฐ๋๊ณ
๋ํ๊ธฐ, ๋นผ๊ธฐ๋ ๋์ค์ ์ฐ์ฐ
console.log(a - b * c); // b*c ๋จผ์ ์ฐ์ฐ ํ a์์ ๊ฐ์ ๋นผ ์ค
---------------------------------------------------------------
//() ๋จผ์ ์ฐ์ฐ ํ ๋๋จธ์ง ์ฐ์ฐ
console.log(
(a - b) * c
)
---------------------------------------------------------------
console.log('--- ๊ฑฐ๋ญ ์ ๊ณฑ ์ฐ์ฐ์')
// ์์ ์๋ฆฌ๋ฅผ ๋ค์ ์ซ์๋งํผ ๊ฑฐ๋ญํด์ ๊ณฑํจ
console.log(2 ** 2); //4
console.log(2 ** 3); //8
console.log(2 ** 4); //16
console.log(2 ** 5); //32
---------------------------------------------------------------
console.log('---๋๋จธ์ง๊ฐ ์ฐ์ฐ์')
// ๊ฐ์ ๋๋ ํ ๋จ๋ ๊ฐ์ ๋ฐํ
console.log(6/4); // 1.5
console.log(6 % 4); //2
console.log(6 % 3); //0
console.log(5 % 3); //2
console.log(4 % 3); //1
```

- ๋ฌธ์์ด ์ฐ์ฐ์
- ๋ํ๊ธฐ
- ์ซ์
```jsx
let num;
//๋ํ๊ธฐ ์ฐ์ฐ์
num = 11 + 22; //์ซ์ + ์ซ์ = 33์ซ์
console.log(num, typeof num);
```

- ๋ฌธ์์ด
```jsx
let num;
//๋ํ๊ธฐ ์ฐ์ฐ์
num = `์ฌ๋ฏธ์๋!` + `์ฆ๊ฑฐ์ด!` + `์๋ฐ์คํฌ๋ฆฝํธ` + `!!`;
//๋ฌธ์์ด + ๋ฌธ์์ด + ๋ฌธ์์ด = string
console.log(num, typeof num);
```

- ์ซ์ ๋ฌธ์์ด
```jsx
let num;
//๋ํ๊ธฐ ์ฐ์ฐ์
num = "11" + "22";
console.log(num, typeof num);
```

- ๋ฌธ์์ด + ์ซ์
```jsx
let num;
//๋ํ๊ธฐ ์ฐ์ฐ์
num = '11' + 22;
num = 11 + `22`;
console.log(num, typeof num);
```

- ๋นผ๊ธฐ
- ์ซ์
```jsx
let num;
//๋นผ๊ธฐ ์ฐ์ฐ์
num = 11 - 22;
console.log(num, typeof num);
```

- ๋ฌธ์์ด
```jsx
let num;
//๋นผ๊ธฐ ์ฐ์ฐ์
num = '์ค๋์' - '์ ๋๋' - '์์์ผ!';
console.log(num, typeof num);
```

- (์ซ์ํ) ๋ฌธ์์ด
- ์ซ์ํ ๋ฌธ์์ด์ ๊ฒฝ์ฐ ์๋ ๋ณํํ์ฌ ์ฐ์ฐ
```jsx
let num;
//๋นผ๊ธฐ ์ฐ์ฐ์
num = '11' - 22;
console.log(num, typeof num);
```

- ์ซ์-๋ฌธ์์ด
```jsx
let num;
//๋นผ๊ธฐ ์ฐ์ฐ์
num = 11 - "22"
console.log(num, typeof num);
```

- ๊ณฑํ๊ธฐ,๋๋๊ธฐ,๋๋จธ์ง๊ฐ,๊ฑฐ๋ญ์ ๊ณฑ
```jsx
let num;
//๊ณฑํ๊ธฐ,๋๋๊ธฐ,๋๋จธ์ง๊ฐ,๊ฑฐ๋ญ์ ๊ณฑ ์ฐ์ฐ์
num = '์ค๋์' * '๊ณต๋ถ๊ฐ' * '์ฌ๋ฐ์ด์!';
num = '์ค๋์' / '๊ณต๋ถ๊ฐ' ** '์ฌ๋ฐ์ด์!';
console.log(num, typeof num);
```


```jsx
let num;
//๊ณฑํ๊ธฐ,๋๋๊ธฐ,๋๋จธ์ง๊ฐ,๊ฑฐ๋ญ์ ๊ณฑ ์ฐ์ฐ์
num = '11' * 22; //์๋ ๋ณํํ์ฌ ์ฐ์ฐ
num = '11' ** "2";
console.log(num, typeof num);
```


- ๊ธฐํ
```
let sum = 11 + 22 + '์ ํฉ์?'; // 33์ ํฉ์? string (์ซ์+์ซ์)->์ซ์+๋ฌธ์->๋ฌธ์์ด
sum = '11' + 22 + '์ ํฉ์?';
console.log(sum, typeof sum);
```
*(์ซ์+์ซ์)->์ซ์+๋ฌธ์->๋ฌธ์์ด*

(๋ฌธ์์ด+๋ฌธ์์ด)โ๋ฌธ์์ด=๋ฌธ์์ดโ๋ฌธ์์ด

```
let sum = '๋ค์ ์์ ํฉ์?' + 11 + 22;
console.log(sum, typeof sum);
```
*(๋ฌธ์์ด+์ซ์)โ ๋ฌธ์์ด+์ซ์ โ ๋ฌธ์์ด*

- ์ฆ๊ฐ ์ฐ์ฐ์
- ๋ณ์์ ๊ฐ์ 1์ฉ ์ฆ๊ฐ์ํค๊ฑฐ๋ ๊ฐ์ ์ํด ๋ณ์์๋ง ์ ์ฉ ๊ฐ๋ฅ
- +++(์ฆ๊ฐ) --(๊ฐ์)
- ++a ์ ์ ์ฆ๊ฐ ์ฐ์ฐ์ : ๋ณ์๋ฅผ ๋ถ๋ฌ์ค๊ธฐ ์ ์ 1์ฆ๊ฐ ํ ์ถ๋ ฅ
- a++ ํ์ ์ฆ๊ฐ ์ฐ์ฐ์ : ๋ณ์๋ฅผ ๋จผ์ ์ถ๋ ฅ ํ 1์ฆ๊ฐ
```
let a = 10, b = 20;
console.log('a:' + a);
console.log("a:", a++); // ๋ณ์ a ์ถ๋ ฅ ํ +1์ ํ๊ธฐ ๋๋ฌธ์ ์ถ๋ ฅ๊ฐ์ 10์ด์ง๋ง ์ค์ ๊ฐ์ 11
console.log(`a: ${a}`)
console.log(`b: ${b}`);
console.log(`b: ${++b}`);// 21+1 ์ฆ๊ฐ ํ ๋ณ์ b ๋ฅผ ์ถ๋ ฅํ๊ธฐ ๋๋ฌธ์ ์ถ๋ ฅ๊ฐ์ 21, ์ค์ ๊ฐ๋ 21
console.log(`b: ${b}`);
console.log(`a: ${--a}`); // ๋ณ์ ์ถ๋ ฅ ์ ์ -1. ๊ฒฐ๊ณผ๊ฐ 10
console.log(`a: ${--a}`); // ๋ณ์ ์ถ๋ ฅ ์ ์ -1. ๊ฒฐ๊ณผ๊ฐ 9
console.log(`a: ${a}`); // 9
console.log(`b: ${b--}`); // ๋ณ์ ์ถ๋ ฅ ํ -1. ๊ฒฐ๊ณผ๊ฐ 21 ์ค์ ๊ฐ 20
console.log(`b: ${b--}`); // ๋ณ์ ์ถ๋ ฅ ํ -1. ๊ฒฐ๊ณผ๊ฐ 20 ์ค์ ๊ฐ 19
console.log(`b: ${b}`); // 19
```

- ๋์
(ํ ๋น) ์ฐ์ฐ์
- *= ๋ฅผ ๊ธฐ์ค์ผ๋ก ์ฐ๋ณ์ ์ซ์๋งํผ ์ฐ์ฐํ์ฌ ์ข๋ณ์ ๋ณ์์ '์๋ก์ด ๊ฐ์ผ๋ก ๊ฐฑ์ '.*
- *a += b -> a+b = a; a์ b๋ฅผ ๋ํ ํ a์ ์๋ก์ด ๊ฐ์ผ๋ก ์ฌํ ๋น*
```html
+= ๋ํ๊ธฐ ๋์
,
-= ๋นผ๊ธฐ ๋์
,
*= ๊ณฑํ๊ธฐ ๋์
,
/= ๋๋๊ธฐ ๋์
,
**= ์ ๊ณฑ ๋์
,
%= ๋๋จธ์ง๊ฐ ๋์
,
```
---
```
let a = 4;
a += 3; // a(4)+3 -> a(7)
a += 3; // a(7)+3 -> a(10)
a += 3; // a(10)+3 -> a(13)
console.log(`a: ${a}`);
```

- ๋น๊ต ์ฐ์ฐ์
```html
<, > ์๋ค, ํฌ๋ค
== ๊ฐ๋ค
!= ๊ฐ์ง ์๋ค
===์์ ํ ๊ฐ๋ค
!=== ์์ ํ ๊ฐ์ง ์๋ค
๋๊ฐ ์ด์์ ๊ฐ ๋น๊ต
์ผ์ชฝ์ผ๋ก ํผ์ฐ์ฐ์ ๊ธฐ์ค
์ฃผ๋ก ์กฐ๊ฑด๋ฌธ์์ ๋ง์ด ์ฌ์ฉ๋๋ฉฐ ๊ฒฐ๊ณผ๊ฐ์ true(1)์ false(0)๋ก ๋ฐํ
์๋ฐ์คํฌ๋ฆฝํธ์์๋ boolean์ ๋ฃ์ง ์์๋ ์๋์ผ๋ก ๋ณํํด ์ฐ์ฐ
```
---
```jsx
let i;
i = 5 < 4; // ~๋ณด๋ค ์๋ค. ๊ฑฐ์ง false == 0 'boolean'
i = 5 > 4; // ~๋ณด๋ค ํฌ๋ค. true == 1
i = 5 == 4; // ๊ฐ๋ค false
i = 5 !== 4; // ๊ฐ์ง ์๋ค true
i = 5 <= 4; // ~์๊ฑฐ๋ ๊ฐ๋ค false
i = 5 >= 4; // ~ํฌ๊ฑฐ๋ ๊ฐ๋ค true
i = 'korea' > 'america';//์ฒซ๋ฒ์งธ ๊ธ์ ์๋ฅผ ๊ธฐ์ค true 11>1
i = 'apple' > 'america'; //true ์ฒซ๋ฒ์งธ ์๋ฆฌ ๊ฐ์ด ๋์ผํ๋ฉด ๋๋ฒ์งธ ์๋ฆฌ๊ฐ ๋น๊ต
i = 'ํ๊ธ' > '์์ด'; // true ใ
์ด ๋ ๋์ค์ ๋์ค๊ธฐ ๋๋ฌธ
i = 'ํ๊ธ' > 'english';
console.log(i, typeof i);
console.log(1 == true); // true
console.log(0 == false); // true
console.log('345' == 345); // true ์ซ์ํ ๋ฌธ์์ด์ ์๋ ๋ณํ๋์ด ๋น๊ต
console.log('15' > '12'); // true
console.log('0' == '1'); // false
console.log('01' == 1); // true
console.log('' == false); // true
console.log('' == 0); // true
// null, undefined์ ๊ฐ ๋น๊ต๊ฐ์ ๋๋ถ๋ถ false
console.log('' == null); // false
console.log(0 == null); // false
console.log(0 >= null); // true <, >์์๋ ์ซ์ํ์ผ๋ก ๋ณํ (null = 0) ๋์ด ์ฐ์ฐ. ==์ ๋ค๋ฅธ ๋น๊ต ์ฐ์ฐ์์ ๋์ ๋ฐฉ์์ด ๋ค๋ฆ
console.log('' == undefined); // false
console.log(0 == undefined); // false
console.log(null == undefined); // true
console.log(null >= undefined); // false <, >์์๋ ์ซ์๋ก ๋ณํ
```
- ๋ฐ์ดํฐํ ๋น๊ต ์ฐ์ฐ์
```jsx
// ==
console.log('' == 0); //true
console.log(true == 1); //true
// == ์์ ์ผ์น. ๋ฐ์ดํฐํ๊น์ง ์์ ํ ๊ฐ๋ค(์๊ฒฉํ ๋น๊ต)
console.log('' === 0); //false
console.log(true === 1); //false
console.log('123' === 123); //false
console.log(null === undefined); //false
// !== ๋ฐ์ดํฐ ํ์
๊น์ง ์์ ํ ๊ฐ์ง ์๋ค
console.log('' !== 0); //true
console.log('' != 0); //false
console.log(null !== undefined); //true
console.log(40 > 25 > 10); //false
// 40 > 25 -> true
// true > 10 -> true(1) > 10 ->false
```
- ๋
ผ๋ฆฌ ์ฐ์ฐ์
```jsx
/*
๋
ผ๋ฆฌ ์ฐ์ฐ์: ๋ ๊ฐ ์ด์์ ์กฐ๊ฑด ๊ฐ ๋น๊ต
&&(and), ||(or), !(not)
*/
let a = 10, b = 20;
//a ์กฐ๊ฑด && b ์กฐ๊ฑด : a์กฐ๊ฑด b์กฐ๊ฑด ๋ชจ๋ ๋ง์กฑ์ํฌ ๋ true ๋ฐํ
console.log(true && false);//false
console.log(true && true);//true
console.log(
a > 10 && b === 20
); // false && true -> false
console.log(
a >= 10 && b === 20
); // true && true -> true
console.log(
a !== 10 && b <= 20
); // false && true -> false
//a ์กฐ๊ฑด || b ์กฐ๊ฑด : a์กฐ๊ฑด b์กฐ๊ฑด ์ค ํ๋๋ง ๋ง์กฑ์์ผ๋ ๋ง์กฑ์ํฌ ๋ true ๋ฐํ
console.log(true || true) // true
console.log(true || false) // true
console.log(false || true) // true
console.log(false || false) // false
console.log(
a >= 10 || b === 20
); // true && true -> true
console.log(
a > 10 || b === 20
); // false && true -> true
console.log(
a !== 10 || b <= 20
); // false && true -> true
// !a์กฐ๊ฑด : a์กฐ๊ฑด์ ๋ฐ๋๊ฐ ๋ฐํ /ํ ํด(on off) ๋ฒํผ ์ฌ์ฉ์ ๋ง์ด ์
console.log(true); //true
console.log(!true); //false
console.log(!false); //true
console.log(
!(a === 10)
); // true -> !true ->false
console.log(
!(b === 10)
); //false -> !false -> true
```
๋จ๋ฝํ๋กํ๊ฐ
```jsx
/*
๋จ๋ฝํ๊ฐ ( ๋จ๋ฝํ๋กํ๊ฐ) : ๋
ผ๋ฆฌ ์ฐ์ฐ์์ ํน์ฑ์ ์ด์ฉํ์ฌ ํ๊ฐ
truthy : ์ฐธ์ธ๋ฏ?
ใด ๋น๋ฐฐ์ด[], ๋น๊ฐ์ฒด {}...
falsy(falsey) : ๊ฑฐ์ง์ธ๋ฏ?
ใด false, 0, -0(-1,-2,...), '', null, undefined, NaN
boolean && ์คํ๋ฌธ, boolean || ์คํ๋ฌธ
ใด ||์ฐ์ฐ์
true || ์กฐ๊ฑด -> a์กฐ๊ฑด์ด ์ฐธ์ด๋ฉด b์กฐ๊ฑด(์คํ๋ฌธ) ์คํ x
false || ์กฐ๊ฑด -> a์กฐ๊ฑด์ด ๊ฑฐ์ง์ด๋ฉด b์กฐ๊ฑด(์คํ๋ฌธ) ์คํ(๋ด์ฉ๋ฐํ)
ใด && ์ฐ์ฐ์
true && ์กฐ๊ฑด -> b์กฐ๊ฑด๋ ์ฐธ์ด๋ฉด ์คํ
false && ์กฐ๊ฑด -> a์กฐ๊ฑด์ด ๊ฑฐ์ง์ด๋ฉด b์กฐ๊ฑด(์คํ๋ฌธ) ์คํ x
*/
console.log(`-- && ${false && true} --`); // false
// A์ ๊ฐ์ด ๊ฑฐ์ง์ธ ๊ฒฝ์ฐ B์ ๊ฐ์ ํ์ํ ํ์๋ ์์ด ๊ฑฐ์ง์ด ๋๋ฏ๋ก falsy
false && console.log(`A๊ฐ ๊ฑฐ์ง์ด๋ฉด ์ด ๋ด์ฉ์ ๋ฐํ๋์ง ์์`);
true && console.log(`A๊ฐ ์ฐธ์ด๋ฉด ์ด ๋ด์ฉ์ ๋ฐํ๋จ`);
(11 > 10) && console.log('truthy ํ ์ํฉ');
console.log(true && false && true); // false
//A.B์ ๊ฐ์ด false ์ด๊ธฐ ๋๋ฌธ์ C๊น์ง ๊ฐ์ง์๊ณ ๋ฉ์ถค falsey
console.log(11 > 10 && 11 == 10 && '์ถ๋ ฅ๋์ง ์์')
console.log(11 > 10 && 11 != 10 && '์ถ๋ ฅ')
console.log(`-- || ${false || true} --`); //true
// A๊ฐ true์ธ ๊ฒฝ์ฐ B์ ๊ฐ์ ํ์ํ ํ์๊ฐ ์์ผ๋ฏ๋ก ๋ฐํ๋์ง ์์. truthy
true || console.log(`A๊ฐ ์ฐธ์ด๋ฉด ์ด ๋ด์ฉ์ ๋ฐํ๋์ง ์์`)
false || console.log(`A๊ฐ ๊ฑฐ์ง์ด๋ฉด ์ด ๋ด์ฉ์ ๋ฐํ๋จ`)
console.log(false || true || true); // true
// A์ B ๋จผ์ ์ฐ์ฐ ํ ๊ฒฐ๊ณผ๊ฐ์ C์ ์ฐ์ฐ
// A์ B๋ฅผ ์ฝ์ด true๊ฐ ๋์ค๋ฉด C์ ๊ฐ์ ํ์ํ ํ์๊ฐ ์์ผ๋ฏ๋ก ๋ฉ์ถค
console.log('' || 'a'); //a . ๋น ๋ฌธ์์ด์ falsy์ ๊ฐ์ด๋ฏ๋ก ๋ค์ ๊ฐ์ ์ฝ์
console.log('' || '์ฌ๊ธฐ์ ๋ฉ์ถค' || 222); //A๊ฐ ๊ฑฐ์ง์ด๋ฉด B๋ฅผ ์ฝ๊ณ B๊ฐ ์ฐธ์ด๋ฉด or ์ฐ์ฐ์๋ truthy ๋๋ฌธ์ ๊ฑฐ๊ธฐ์ ๋ฉ์ถค
console.log([] && '' && 222);
// A๊ฐ truthy์ด๊ณ B๊ฐ falsey์ด๋ฉด AND ์ฐ์ฐ์๋ true์์ ๋ฉ์ถค
// [] <- ๋น ๋ฐฐ์ด๋ก truthy
console.log([] && {} && 222); //222
```
๋ณํ
- ๋ฌธ์์ดํ์
๋ณํ
```jsx
// string ์์ฑ์ ํจ์๋ฅผ ์ด์ฉํ ๋ณํ
let num = 1; // number
num = String(1); // string ์ซ์ํ ๋ฌธ์์ด
// num += 1; '1' + 1 -> 11string
num -= 1; // 0 'number' ๋ฐ๋ก ์ ๋ณ์ ๊ฐ์ด ์ซ์ํ ๋ฌธ์์ด์ด์์ผ๋ ๋ํ๊ธฐ ์ฐ์ฐ์๋ฅผ ์ ์ธํ ๋ค๋ฅธ ์ฐ์ฐ์์์ ์๋์ผ๋ก ํ ๋ณํ์ด ์ผ์ด๋ ์ซ์๋ก ์ฐ์ฐ ๋จ
num = NaN; // number
num = String(NaN); //string
num = true; // boolean
num = String(num); //string
console.log(num, typeof num);
// Object. prototype. toString () ๋ฉ์๋ ๋ณํ
let obj = (1).toString(); //์ซ์ํ ๋ฌธ์์ด string
obj = (NaN).toString();
obj = (false).toString();
console.log(obj, typeof obj);
// ๋ํ๊ธฐ ์ฐ์ฐ์
let str = 1 + '';//๋น ๋ฌธ์์ด ์ด์ฉ
str = NaN + '';
str = true + '';
console.log(str, typeof str);
```
- ์ซ์ํ์
๋ณํ
```jsx
// Numner (); ์์ฑ์ ํจ์
let num = '0'; // string
num = Number('0'); //number
num = Number('-1'); //number
num = Number('-10.404654'); //number
num = Number(true); // 1 number
num = Number(false); // 0 number
num = Number('๋ฌธ์์ด'); // NaN number
console.log(num, typeof num);
// .parseInt(); ์ ์ ๋ฐํ, .parseFloat ์ค์ ๋ฐํ. ์ซ์ํ ๋ฌธ์์ด์๋ง
console.log(typeof parseInt('0')); //number
console.log(typeof parseInt('-1')); //number
console.log(parseInt('10.1111')); //10
console.log(parseFloat('10.1111')); //10.1111
console.log(parseInt('๋ฌธ์์ด')); //NaN
console.log(parseInt(true)); //NaN
// +๋ํ๊ธฐ ์ฐ์ฐ์
console.log(+ '๋ฌธ์์ด'); //NaN
console.log(+ true); //1
console.log(+ false); //0
console.log(+ ''); //0
console.log(+ '0'); //0
console.log(+ '-1'); //-1
//* ๊ณฑํ๊ธฐ ์ฐ์ฐ์
console.log('0' * 1); //0
console.log('-1.2' * 1); //-1.2
console.log(true * 1); //1*1 -> 1
console.log(false * 1); //0*1 -> 0
console.log('๋ฌธ์์ด'); //NaN
```
- ๋
ผ๋ฆฌํ์
๋ณํ
```jsx
//๋ค๋ฅธ ๋ฐ์ดํฐ ๊ฐ์ true, false ๋ก ๋ณํํ์ฌ ๋ฐํ
// boolean ์์ฑ์ ํจ์
console.log(Boolean('a')); // true
console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(1)); // true
console.log(Boolean(50)); // true
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean([])); // true
console.log(Boolean({})); // true
```
if
- if ์กฐ๊ฑด๋ฌธ ```jsx
if (111 < 100) {//false
alert('์กฐ๊ฑด์ด ์ฐธ์ด๋ฉด ์คํ๋ฉ๋๋ค')
}
if (111 > 100) {//true
alert('111 >100 ์กฐ๊ฑด์ด ์ฐธ์ด๋ฉด ์คํ๋ฉ๋๋ค')
}
if (0) {// 0==false
alert('0์ผ๋๋ ์๋ฆผ์ด ๋ฐ๊น์?')
}
if (1) {//1==true
alert('1์ผ๋๋ ์๋ฆผ์ด ๋ฐ๊น์?')
}
const num = 100;
// ๋ณ์๋ 99๋ณด๋ค ํฌ๊ฑฐ๋ ๊ฐ์ ๋ ์๋ฆผ์ฐฝ์ด ๋ฌ๋ค
if (num >= 99) {
alert('${num}์ ๊ฐ์ 99๋ณด๋ค ํฝ๋๋ค.') //xx์ ๊ฐ์ 99๋ณด๋ค ํฝ๋๋ค
}
//{} ์๋ต์ ํ ์ ์์ผ๋ ๋ฐ๋์ ์กฐ๊ฑด๊ณผ ๊ฐ์ ์ค์ ์์ฑ. ์ฆ ํ ์ค ์ผ๋๋ง ๊ฐ๋ฅ
if (num != 100) alert(num + '์ ๊ฐ์ 99๋ณด๋ค ํฝ๋๋ค.') //xx์ ๊ฐ์ 99๋ณด๋ค ํฝ๋๋ค
```
- if-else ์กฐ๊ฑด๋ฌธ
```jsx
<!--
if-else ์กฐ๊ฑด๋ฌธ
if(์กฐ๊ฑด) {์กฐ๊ฑด์ด ์ฐธ์ธ ๊ฒฝ์ฐ ์คํ
์คํ๋ฌธ;
} else {์ ์กฐ๊ฑด์ด ๊ฑฐ์ง์ด๋ฉด ์คํ
์คํ๋ฌธ;
}
-->
<script>
//ํ๋ฃจ ๊ฑธ์ 5000๋ณด ์ด์300์ด๋ฉด ์ ์ ์์ค์
๋๋ค. ์ถ๋ ฅ
//๊ทธ ์ดํ๋ฉด ์ด๋ ํด์ผํฉ๋๋ค. ์ถ๋ ฅ
let walk = prompt('ํ๋ฃจ ๊ฑธ์์ด ๋ช ๋ณด ์ด์์ด์ญ๋๊น?');
if (walk >= 5000) {
alert(`${walk} ์ด์์ด๋ฉด ์ ์ ์์ค์
๋๋ค.`);
} else {
alert(`ํ๋ฃจ ๊ฑธ์ ์ ${walk}๋ณด๋ ์ํํฉ๋๋ค.`);
};
```
- else-if ์กฐ๊ฑด๋ฌธ
```jsx
<!--
else-if ์กฐ๊ฑด๋ฌธ
if(์กฐ๊ฑด1) {
์คํ๋ฌธ;
} else if(์กฐ๊ฑด2) { else if()๋ ์ ํ์์ด ์์ฑ ๊ฐ๋ฅ
์คํ๋ฌธ;
} else if(์กฐ๊ฑด3) {
์คํ๋ฌธ;
} else { ์์ ์กฐ๊ฑด์ด ๋ชจ๋ ๊ฑฐ์ง์ ๋ ์คํ
์คํ๋ฌธ;
}
-->
<script>
let walk = prompt('ํ๋ฃจ ๊ฑธ์์ด ๋ช ๋ณด ์ด์์ด์ญ๋๊น?');
if (walk >= 5000) {
alert(`${walk} ์ด์์ด๋ฉด ์ ์ ์์ค์
๋๋ค.`);
} else if (walk < 5000) {
alert(`ํ๋ฃจ ๊ฑธ์ ์ ${walk}๋ณด๋ ์ํํฉ๋๋ค.`);
} else {
alert('์ซ์๋ง ์
๋ ฅํ์ธ์')
}
```
- ์ค์ฒฉ if
```jsx
/*
if(์กฐ๊ฑด 1) {
์คํ๋ฌธ
if(์กฐ๊ฑด 1-1){
์คํ๋ฌธ;
}else {
์คํ๋ฌธ;
}
}else {
์คํ๋ฌธ
}
*/
const num = '3'; //์ซ์ํ ๋ฌธ์์ด
if (num == 3) {
console.log('๋ฐ์ดํฐ์ ํ์
์ ๋ชจ๋ฅด๊ฒ ์ง๋ง 3์
๋๋ค.')
if (num === 3) {
console.log('์ซ์ ๋ฐ์ดํฐ(์๋ฃํ)์
๋๋ค.')
} else {
console.log('๋ฌธ์์ด ๋ฐ์ดํฐ(์๋ฃํ)์
๋๋ค.')
}
} else {
console.log('3์ด ์๋๋๋ค.')
}
```
scopre
```jsx
<h2>scope</h2>
<h3>๋ณ์ scope</h3>
<p>fucntion level scope : ํจ์ ๋ด์์๋ง ์ ํจํ ๋ฒ์. var</p>
<p> block level scope : {} ์์์๋ง ์ ํจํ ๋ฒ์ function, if, for, switch๋ฌธ ๋ฑ. let</p>
<script>
//์ ์ญ ๋ณ์ ์ ์ธ
var x = 100, y = 200, z = 300;
//ํจ์ ์ ์ธ
function num() {
var x = '์ง์ญ๋ณ์';
y = '์ ์ญ ๋ณ์'; //var ํค์๋ ์๋ต์ ์ ์ญ ๋ณ์๋ก ์ธ์
console.log(`ํจ์ ๋ด์ x: ${x}, y: ${y}, z: ${z}`);
}
console.log(`x: ${x}, y: ${y}, z: ${z}`); //x; 100, y: 200, z: 300
num(); //ํจ์ ํธ์ถ. ํจ์ ๋ด์ x x; ์ง์ญ ๋ณ์, y: ์ ์ญ ๋ณ์, z: 300
console.log('---- ํจ์ ํธ์ถ ํ ----');
console.log(`x: ${x}, y: ${y}, z: ${z}`) //x; 100, y: ์ ์ญ๋ณ์, z: 300
var a = 100;
{
// a = 200;
var a = 200;
}
console.log(`a: ${a}`); // 200
console.log('===============')
let b = 200, c = 300;
{
let b = '์ง์ญ ๋ณ์';
c = 500; // ๋ณ์ ํค์๋ ์๋ต์ ์ ์ญ ๋ณ์๋ก ์ธ์
console.log(`{}์์ b๋ ${b}`)
}
console.log(`{}๋ฐ์ b๋ ${b}`) //๋ฐ์ b๋ 200
console.log(`{}์์ c๋ ${c}`) //๋ฐ์ c๋ 500
var i = 10;
var i = 20; ๊ฐ์ ํค์๋๋ก ๊ฐ์ ์ด๋ฆ์ ์ฌ์ ์ด ํ์ฉ
a = 30;
let k = 10;
let k = 20; ๊ฐ์ ํค์๋๋ก ๊ฐ์ ์ด๋ฆ์ ์ฌ์ ์ธ ํ์ฉ ์๋จ
k = 30; ์ฌํ ๋น ํ์ฉ
```
switch
- ์ ํ๋ฌธ 01
```jsx
<!--
switch ์ ํ๋ฌธ : ํน์ ๊ฐ๊ณผ ๋น๊ตํ์ฌ ์ฐธ์ธ ๊ฒฝ์ฐ ์คํ
switch (๋น๊ต๊ฐ) :
case ๋น๊ตํ ๊ฐ:
์คํ๋ฌธ;
break;
case ๋น๊ตํ ๊ฐ : ์ด ๊ฐ๊ณผ ๋น๊ตํ์ฌ ์ฐธ์ธ ๊ฒฝ์ฐ ์คํ๋ฌธ ์คํ. ๋น๊ต์ ์๊ฒฉํ ๋น๊ต === ์คํ๋ฌธ;
break; ๋น๊ต๊ฐ์ด ํ์ธ ๊ฒฝ์ฐ ๋ค์์ผ๋ก ๋์ด๊ฐ์ง ์๊ณ ๊ตฌ๋ฌธ์ ๋ฒ์ด๋๊ฒ ํ๋ ํค์๋
default : ์์ ๋น๊ต๊ฐ๊ณผ ์ผ์นํ๋ ๊ฐ์ด ์๋ ๊ฒฝ์ฐ ์คํ. else ์ ๊ฐ์ ์ญํ ์ ํ๋ฉฐ ์๋ต ๊ฐ๋ฅ
์คํ๋ฌธ;
break; ์ ์ผ ๋ง์ง๋ง์ด๊ธฐ ๋๋ฌธ์ ์๋ต ๊ฐ๋ฅ
-->
<script>
let num = prompt(`1~4๊น์ง์ ์ซ์ ์ค ํ๋๋ง ์
๋ ฅํด ์ฃผ์ธ์`)
/* switch (num) {
case '1':
console.log(`์
๋ ฅํ ์ซ์๋ ${num}์
๋๋ค.`);
break;
case '2':
console.log(`์
๋ ฅํ ์ซ์๋ ${num}์
๋๋ค.`);
break;
case '3':
console.log(`์
๋ ฅํ ์ซ์๋ ${num}์
๋๋ค.`);
break;
case '4':
console.log(`์
๋ ฅํ ์ซ์๋ ${num}์
๋๋ค.`);
break;
default:
console.log(`1~4๊น์ง์ ์ซ์ ์ค ํ๋๋ง ์
๋ ฅํด ์ฃผ์ธ์`);
break;
} */
let msg = '';
num = Number(num);
switch (num) {
case 1:
case 2:
case 3:
case 4:
msg = `์
๋ ฅํ ์ซ์๋ ${num}์
๋๋ค.`;
break;
default:
msg = `1~4๊น์ง์ ์ซ์๋ง ์
๋ ฅํด ์ฃผ์ธ์`;
}
```
- ์ ํ๋ฌธ 02
```
<!--
์ฌ์ดํธ๋ช
์
๋ ฅ ์ ํด๋น ์ฌ์ดํธ๋ก ์ด๋
window.location.href = 'https://~'; ํ์ฌ ํญ์์ ์ด๋
window.open('about:blank').location.href = 'https://~'; ์ ํญ์์ ์ด๋
-->
<script>
let site = prompt('๋ค์ด๋ฒ, ๊ตฌ๊ธ, ์ธ์คํ๊ทธ๋จ ์ค ์ํ๋ ์ฌ์ดํธ๋ฅผ ์
๋ ฅํ์ธ์')
switch (site) {
case '๋ค์ด๋ฒ':
// window.open('about:blank').location.href = 'https://www.naver.com/';
url = 'https://www.naver.com/';
break;
case '๊ตฌ๊ธ':
// window.open('about:blank').location.href = 'https://www.google.co.kr/?hl=ko';
url = 'https://www.google.co.kr/?hl=ko';
break;
case '์ธ์คํ๊ทธ๋จ':
// window.open('about:blank').location.href = 'https://www.instagram.com/';
url = 'https://www.instagram.com/';
break;
default:
alert('์ ์๋ ์ฌ์ดํธ๋ง ์
๋ ฅํด ์ฃผ์ธ์.')
}
//url && (window.open('about:blank').location.href = url);
if (url) window.open('about:blank').location.href = url;
</script>
```
for ๋ฐ๋ณต๋ฌธ
```jsx
*for ๋ฐ๋ณต๋ฌธ 1
<!--
for ๋ฐ๋ณต๋ฌธ : ์กฐ๊ฑด์ด ๋ง์กฑ๋๋ ๋์ ๋ฐ๋ณด๊ณ ์คํ
for(์ด๊ธฐ๊ฐ; ์กฐ๊ฑด์; ์ฆ๊ฐ์){
์คํ๋ฌธ
}
-->
<script>
/*
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
*/
for (let num = 1; num <= 100; num++) {
console.log(num);
}
```
```
*for ๋ฐ๋ณต๋ฌธ 2
//1~10๊น์ง์ ํฉ ๊ณ์ฐ
// 1+2+3+4+5+6+7+8+9+10=?
let total = 0;
for (let i = 1; i <= 10; i++) {
/*
total = total + i;
total(0) + i(1) -> total(1)
total(1) + i(2) -> total(3)
3 + 3 -> 6
6 + 4 -> 10
10 + 5 -> 15
15 + 6 -> 21
21 + 7 -> 28
28 + 8 -> 36
36 + 9 -> 45
45 + 10 -> 55 */
total += i;
}
console.log(total);
```
break ํค์๋
```jsx
<!--1~5๋ฒ๊น์ ์๋ฆผ์ฐฝ. x๋ฒ์งธ ์๋ฆผ ์
๋๋ค.x๋ฒ์งธ>
for(i=1; i<=10; i++ ) {
if(i>= 3){
break; // ๊ตฌ๋ถ์ ๋ฒ์ด๋ ๋ ์ฌ์ฉ
}
alert(`${i}๋ฒ์งธ ์๋ฆผ์
๋๋ค.`)
}
```
continue ํค์๋
```jsx
for (let i = 0; i < 5; i++) {
console.log('*');
continue; // ๊ตฌ๋ฌธ์ ๋ฒ์ด๋๋๊ฒ ์๋๋ผ ํค์๋ ๋ค์์ ๋์ค๋ ๊ตฌ๋ฌธ์ ๊ฑด๋๋๊ณ ๋ฐ๋ณต
//break; ๋ง๋ ๊ทธ ์ฆ์ ๊ตฌ๋ฌธ์ ๋น ์ ธ๋์ค๊ธฐ ๋๋ฌธ์ * ํ๋๋ง ๋ฐํ
console.log('continue์ break ์ฐจ์ด')
}
```
while ๋ฐ๋ณต๋ฌธ
- 01
- *์กฐ๊ฑด์ด ์ฐธ์ธ ๋์ ๋ฐ๋ณต*
```
let ์๋ณ์ = ์ด๊ธฐ๊ฐ;
while(์กฐ๊ฑด) {<- ๋ฐ๋์ ์ข
๋ฃ๋ ์ ์๋ ์กฐ๊ฑด ํ์
์กฐ๊ฑด์ด ๋ง์กฑ๋ ๋ ๊น์ง์ ์คํ๋ฌธ
์ฆ๊ฐ์; ์ด ๊ฐ์ด ์์ผ๋ฉด ์ด๊ธฐ๊ฐ์ผ๋ก ๋ฌดํ ๋ฐ๋ณต
```
```
<script>
let i = 1; //์ด๊ธฐ๊ฐ
while (i <= 10) {
console.log(`*${i}`);
i++; //์ฆ๊ฐ์ ๊ฐ
}
console.log('----------------')
let num = 0;
while (num < 6) { // 1 or true ์์ฑ์ ๋ ๊ฑธ๋ ค์ ๋ธ๋ผ์ฐ์ ๊บผ์ผํจ
console.log(`before : ${num}`);
num++;// ์ฆ๊ฐ์ ๊ฐ์ ์ด๋์ ๋๋๋์ ๋ฐ๋ผ ๊ฐ์ด ๋ฌ๋ผ์ง๋ค
console.log(`after : ${num}`);
}
```

- 02
```jsx
let i = 0;
while (true) {//๋ฌดํ ๋ฐ๋ณต. ํ๊ณ๊ฐ ์ค์ ๋์ง ์์๊ธฐ ๋๋ฌธ์ '๋ฐ๋์' ๋น ์ ธ๋์ฌ ์ ์๋ ์กฐ๊ฑด ํ์
console.log(i++);
if (i === 5) {
console.log(`์ฌ๊ธฐ์ ๋ฉ์ถค ${i}`)
break;
}
console.log(`๋ณ์ i: ${i}`)
}
```
ํจ์
- function
*1. ํน์ ๊ธฐ๋ฅ์ ์คํํ๊ธฐ ์ํ ์ฝ๋์ ์งํฉ์ผ๋ก ํธ์ถ์ ํตํด ์ฌ์ฌ์ฉ ๊ฐ๋ฅ*
*2. ๊ฐ์ฒด ์๋ฃํ ์ค ํ๋์ด๊ธฐ ๋๋ฌธ์ ๋ณ์ ๋์
๊ฐ๋ฅ*
*3. ํจ์๋ ์ ์ธํจ์์ ์ต๋ช
ํจ์(ํจ์ ํํ์)๋ก ์์ฑ ๊ฐ๋ฅ*
<aside>
๐ก - ์ ์ธ ํจ์ : ์ด๋ฆ์ ๊ฐ์ง ํจ์ ์ ์ธ๋ฌธ
์ ์ธ ํจ์์ ๊ฒฝ์ฐ ์ด๋ ๊ณณ์์๋ ํธ์ถ ๊ฐ๋ฅ
ํจ์๋ช
(); <- ํจ์ ํธ์ถ calling, ์ฌ๋ฌ ๋ฒ ํธ์ถ ๊ฐ๋ฅํ๋ฉฐ ์ฌ์ฌ์ฉ์ด ๋ชฉ์
function ํจ์๋ช
(๋งค๊ฐ๋ณ์){
์คํ๋ฌธ;
return ๋ฐํ๊ฐ;
}
</aside>
<aside>
๐ก - ์ต๋ช
ํจ์ : ์ด๋ฆ์ด ์๋ ํจ์ ํํ์(๋ณ์์ ๊ฐ์ ํ ๋นํ๋ ๊ฒ์ฒ๋ผ ํจ์๋ฅผ ๋ณ์์ ๋์
ํ์ฌ ์ฌ์ฉ)
์ด๋ฆ์ด ์๊ธฐ ๋๋ฌธ์ ๋ณ์์ ๋์
ํ์ฌ ์ฌ์ฉ
์ด๋ฆ์ด ์๊ธฐ ๋๋ฌธ์ ๋ฐ๋์ ํจ์๋ฅผ ํธ์ถํ๋ ์ฝ๋๋ณด๋ค ๋จผ์ ์์ฑ๋์ด์ผํจ
const ๋ณ์๋ช
= function(){
์คํ๋ฌธ;
return ๋ฐํ๊ฐ;
};
๋ณ์๋ช
(); <- ํจ์ ํธ์ถ. ๋ฐ๋์ ํจ์๋ณด๋ค ํธ์ถ ์์ฑ์ด ๋์ค์ ๋์์ผ ํจ
</aside>
- 01
```jsx
// window.alert('ํจ์ ํธ์ถ'); window๊ฐ ์์ ๋ถ์ผ๋ฉด ๋ฉ์๋
// alert('ํจ์ ํธ์ถ'); ๊ฐ๋ณ๋ก ์ฐ๋ฉด ํจ์
//getName();//ํจ์ ์ ์ธ
function getName() {
alert('์ด๋ฆ์ ๊ฐ์ง ์ ์ธ ํจ์');
}
/*
for (let i = 1; i <= 3; i++) {
getName();
}
*/
//noName(); ๋จผ์ ํธ์ถ ํ ๊ฒฝ์ฐ ์ฐพ์ง ๋ชปํ๊ธฐ ๋๋ฌธ์ ์๋ฌ๊ฐ ๋ฌ๋ค
//์ต๋ช
ํจ์
const noName = function () {
alert('์ด๋ฆ์ด ์์ด์');
}; //๋ณ์์ ๋์
ํ๋ฉด ์ธ๋ฏธ์ฝ๋ก (;)์ด ๋ถ๋๋ค
noName();
```
- 02
```jsx
/*
function num(๋งค๊ฐ๋ณ์1, parameter2, ์ธ์, ์ธ์...) {
์คํ๋ฌธ;
}
num(์ธ์);
*/
// ํจ์ ํํ์ (literal)
const num = function (a) {
console.log(a * 1.07);
}
num(1000);
num(2000);
num(3000);
```

- 03
```jsx
<!--
return ํค์๋
ํจ์ ์์์ ์ ์ธ๋ ๋ณ์๋ ๊ฐ์ ๊ฒฝ์ฐ ์ธ๋ถ์์ ์ ๊ทผ ๋ถ๊ฐ๋ฅ
1. ๋ฆฌํด ํค์๋๋ฅผ ์ด์ฉํด ํธ์ถํ ๊ณณ์ผ๋ก ๋ฐํ
2. ํจ์ ์คํ ํ ๊ฒฐ๊ณผ๋ฅผ ๋ค์ ์ป๊ณ ์ ํ ๋ ์ฌ์ฉ
3. ํจ์ ์ข
๋ฃ๋ฅผ ์ํด ์ฌ์ฉ
function fn(x){
์คํ๋ฌธ;
return; ํจ์ ๊ฐ์ ์ข
๋ฃ. ์ด ๋ค์ ๊ตฌ๋ฌธ ์คํx
return ๋ฐํ๊ฐ, ๋ฐํ๊ฐ์ ๋ฐ์ดํฐ๋ก ๋ฐํ
}
-->
<script>
function ๊ณผ์ผ() {
console.log('์ฌ๊ณผ');
}
๊ณผ์ผ();
function fruits() {
//'ํ์ด๋ฐฑ ๊ทค'; ํจ์๊ฐ ํธ์ถ๋๋ฉด ํจ์ ๋ด์์๋ง ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ง๊ธฐ ๋๋ฌธ์ undefined
return 'ํ์ด๋ฐฑ ๊ทค' // ํธ์ถํ ๊ณณ์ผ๋ก ๋ฐ์ดํฐ ๋ฐํ ํ ํจ์ ์ข
๋ฃ
}
console.log(fruits())
```
- 04
```html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>ํจ์ function 4</title>
<style>
.btn {
border: 3px solid black;
width: 150px;
padding: 10px;
margin-top: 10px;
text-align: center;
font-size: 1.2rem;
font-weight: bold;
cursor: pointer;
}
.btn:hover {
background-color: black;
color: white;
}
</style>
<script>
/*
//document.getElementById(); ์์ด๋ ์ ํ์ ํ์
document.getElementById('btn2').onclick = function(){
getAlert2();
}
*/
//๋ฌธ์ ์ค๋น ์ด๋ฒคํธ : ๋ฌธ์๊ฐ ๋ถ๋ฌ์์ง๋ฉด ํจ์ ํธ์ถ
window.onload = function () {
const btn2 = document.getElementById('btn2');
console.log(btn2);
/*btn2.onclick = function () { //์ ํต์ ์ธ ๋ฐฉ์
getAlert2();
}*/
//ํ์ดํ ํจ์
btn2.onclick = () => getAlert2
}
</script>
</head>
<body>
<div class="btn btn1" onclick="getAlert1()">์ ์ธํจ์ ํธ์ถ</div>
<div class="btn" id="btn2">์ต๋ช
ํจ์ ํธ์ถ</div>
<script>
function getAlert1() {
alert('์ ์ธ ํจ์๋ก ํธ์ถ');
alert('๋๋ฒ์งธ ์๋ฆผ');
}
const getAlert2 = function () {
alert('ํจ์ ํํ์์ผ๋ก ํธ์ถ');
return; // ํจ์ ์ข
๋ฃ
alert('๋๋ฒ์งธ ์๋ฆผ');
}
</script>
</body>
</html>
```
- 05
```jsx
<!--
ES6+ ์ด์ ์ฌ์ฉ
ํจ์ ํํ์(์ต๋ช
ํจ์)์์๋ง ์ฌ์ฉ ๊ฐ๋ฅ
this, arguments, new ํค์๋ ์ฌ์ฉ ์ด๋ ค์
๋ณธ๋ฌธ์ด ์ฌ๋ฌ ์ค์ธ ๊ฒฝ์ฐ {}์ฌ์ฉ ๊ถ์ฅ
{} ์ฌ์ฉ์ ๋ฐ๋์ return ํค์๋๋ฅผ ํตํด ๋ฐํ
๋ณ์๋ช
= () => ์คํ๋ฌธ; ๋งค๊ฐ๋ณ์๊ฐ ์๋ ๊ฒฝ์ฐ ๋ฐ๋์ () ์์ฑ
๋ณ์๋ช
= para1, para2 => {๋งค๊ฐ๋ณ์๊ฐ ์๋ ๊ฒฝ์ฐ () ์๋ต๊ฐ๋ฅ
์คํ๋ฌธ;
return ๋ฐํ๊ฐ;
}
-->
<script>
const obj1 = function () {
console.log('ํจ์ ํํ์์ผ๋ก ์์ฑ๋ ์ต๋ช
ํจ์')
}
const obj2 = () => console.log('ํจ์ ํํ์์ผ๋ก ์์ฑ๋ ์ต๋ช
ํจ์');
obj2();
const obj3 = function (n) {
return n * 5; // ๋ฆฌํด ํค์๋๋ฅผ ํตํด ํธ์ถํ๋ ๊ณณ์ผ๋ก ๊ฐ ๋ฐํ
}
console.log(obj3(10)); // 10*5
const obj4 = n => n * 2; //ํ์ค ์ผ ๋๋ return ํค์๋๊ฐ ์๋ต๋์ด ์์ผ๋ฏ๋ก ์์ฑํ์ง ์์๋ ๊ฐ ๋ฐํ
console.log(obj4(22)); // 44
//3๊ฐ์ ๋งค๊ฐ ๋ณ์๋ฅด๋ฅด ๋ฐ์ ์ฐ์ฐ ํ ์ฝ์์ ์ถ๋ ฅ
const obj5 = (a, b, c) => a * b + c;
console.log(obj5(10, 5, 3));
//3๊ฐ์ ๋งค๊ฐ ๋ณ์๋ฅด๋ฅด ๋ฐ์ ์ฐ์ฐ ํ ์ฝ์์ ์ถ๋ ฅ
const obj6 = (a, b, c = 9) => console.log(a + b * c);
obj6(22, 3);
const obj7 = (a, b) => {
return a + b; // {}๋ฅผ ์ฐ๊ณ ์ค๋ฐ๊ฟ์ ํ ๊ฒฝ์ฐ return ํค์๋๋ฅผ ์์ฑํด์ผ ๋ฐํ, ํ์ค๋ก ์ธ ๊ฒฝ์ฐ์๋ ์ฐ์ง ์์๋ ๋๋ค.
}
console.log(obj7(10, 20));
const obj8 = (a, b) => a + b;
console.log(obj8(10, 20));
</script>
```
JSONE
- ์ซ์๋ฅผ ์ ์ธํ๊ณ ๋ โโ ํฐ ๋ฐ์ดํ๋ฅผ ์ฌ์ฉ
- 1114
- ๊ธฐ๋ณธ
- ๊ธธ๊ฒ ์
๋ ฅํ ๊ฒฝ์ฐ์๋ [] ์ฌ์ฉ
```jsx
const data1 = {
"id": 1,
"name": "coffee",
"์ข
๋ฅ": ["์๋ฉ๋ฆฌ์นด๋
ธ", "๋ผ๋ผ"]
};
const data2 = [
{ "no": 1, "name": "tea", "boo": false },
{ "no": 2, "name": "water", "boo": true },
];
console.log(data1);
console.log(data2);
//JSON ๋ฌธ์์ด ๋ณํ
console.log(
JSON.stringify(data1)
)
console.log(
JSON.stringify(data2)
)
```
```jsx
// ๋ณํ ์ํด
const data1 = {
"id": 1,
"name": "coffee",
"์ข
๋ฅ": ["์๋ฉ๋ฆฌ์นด๋
ธ", "๋ผ๋ผ"]
};
const data2 = [
{ "no": 1, "name": "tea", "boo": false },
{ "no": 2, "name": "water", "boo": true },
];
console.log(data1);
console.log(data2);
const json1 = JSON.stringify(data1);
const json2 = JSON.stringify(data2);
//JSON ๋ฌธ์์ด ๋ณํ
console.log("JSON", json1)
console.log("JSON", json2)
//JSON -> JS
console.log(
JSON.parse(json1)
);
console.log(
JSON.parse(json2)
);
```

- fetch
# Fetch API
๋คํธ์ํฌ ํต์ ์ ํฌํจํ ๋ฆฌ์์ค ์ทจ๋์ ์ํ ์ธํฐํ์ด์ค๋ฅผ ์ ๊ณต
- fetch() : ๋ฆฌ์์ค๋ฅผ ์ทจ๋ํ๊ธฐ ์ํ ๋ฉ์๋
- Headers : ์์ฒญ/ ์๋ต ํค๋
- Request : ๋ฆฌ์์ค ์์ฒญ
- Response : ์์ฒญ์ ๋ํ ์๋ต
#js์ ๋ถ๋ฌ์ฌ ๋ ,(์ธ๋ฏธ์ฝ๋ก )์ ์ฌ์ฉํ๋ฉด ์๋๋ค
```
//json ํ์ผ ์์ฒญ
fetch('https://dummyjson.com/users')
//json ํ์ผ์ js ๊ฐ์ฒด๋ก ๋ณํ
//,(์ธ๋ฏธ์ฝ๋ก )์ ์ฌ์ฉํ๋ฉด ์๋๋ค
.then(resolve => resolve.json())
//์ถ๋ ฅ
.then(json => console.log(json))
```

- ์ฒซ๋ฒ์งธ ์์ดํ
๋ง ์ถ๋ ฅ
```html
//json ํ์ผ ์์ฒญ
fetch('https://dummyjson.com/users')
//json ํ์ผ์ js ๊ฐ์ฒด๋ก ๋ณํ
//,(์ธ๋ฏธ์ฝ๋ก )์ ์ฌ์ฉํ๋ฉด ์๋๋ค
.then(resolve => resolve.json())
//์ถ๋ ฅ
.then(item => console.log(item.users[0]))
```

- ์ฌ์ฉ์์ ์ ๋ณด ์ถ๋ ฅ
```jsx
<!-- ๊ฒฐ๊ณผ๊ฐ ๋ฐํ -->
<div class="result"></div>
<script>
//json ํ์ผ ์์ฒญ
fetch('https://dummyjson.com/users')
//json ํ์ผ์ js ๊ฐ์ฒด๋ก ๋ณํ
//,(์ธ๋ฏธ์ฝ๋ก )์ ์ฌ์ฉํ๋ฉด ์๋๋ค
.then(resolve => resolve.json())
//์ถ๋ ฅ
//.then(json => console.log(json)
//.then(item => console.log(item.users[0]))
.then(json => {
let person = '';
json.users.forEach((user, idx) => {
if (idx < 10) {
console.log(user)
person +=
`<h2>${user.firstName}</h2>
<ol>
<li>์ด๋ฉ์ผ : ${user.email}</li>
<li>์ฐ๋ฝ์ฒ : ${user.phone}</li>
<li><img src = ${user.image} alt ${user.lastName}></li>
</ol>
`
}
});
document.querySelector('.result').innerHTML = person;
})
.catch(err => console, log(err))
```

- async+await
# async+await1
ํ๋ก๋ฏธ์ค๋ฅผ ์ข ๋ ์ฝ๊ฒ ์ฌ์ฉํ ์ ์๊ฒ ๋ง๋ ๋น๋๊ธฐ ํจ์
- promise ๊ฐ์ฒด๋ฅผ ๋ฐํํ๋ ํจ์๋ฅผ ๋ค์ ํจ์๋ก ๋ฆฌํจํค์ง
- ํด๋น ํจํค์ง ํจ์์ async ํค์๋ ์์ฑ
- ํด๋น ํจํค์ง ํจ์ ์์ชฝ ๋ฐํํ๋ promise ํจ์ ์์ await ์ง์
- await๋ก ์ง์ ๋ ํจ์๊ฐ ๋๋ ๋๊น์ง ๊ทธ ๋ค์ ํจ์๋ ๋๊ธฐํ
- St 1
# delay ์๊ฐ์ ๋ง์ถฐ ์์๋๋ก ์ถ๋ ฅ
```jsx
function delay(time) {
return new Promise(res => {
setTimeout(() => {
res()
}, time)
})
}
delay(3000).then(() => {
console.log('test')
})
/*async function test() {
await delay(4000);
console.log('async test')
}*/
// ์๋ ๋ฐฉ์์ผ๋ก ๋ ๋ง์ด ์ฐ์ธ๋ค
const test = async () => {
await delay(1000);
console.log('async test')
}
test();
```

- St 2
- ๊ฐ์ ธ์จ url ์์์ users ์ ๋ณด ๊ฐ์ ธ์ค๊ธฐ
```jsx
const result = document.querySelector('.result')
const URL = 'https://jsonplaceholder.typicode.com/users';
fetch(URL)
.then(res => res.json())
.then(users => console.log(users));
```

```html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>async+await2</title>
<style>
ul {
padding: 20px;
border-bottom: 1px solid #000;
}
</style>
</head>
<body>
<div class="result"></div>
<script>
const result = document.querySelector('.result')
const URL = 'https://jsonplaceholder.typicode.com/users';
/*
fetch(URL)
.then(res => res.json())
.then(users => console.log(users));
async function data() {
//์๋ฒ์ ์๋ฃ๋ฅผ ๋ค ๊ฐ์ ธ์ค๋ฉด ๊ฒฐ๊ณผ๊ฐ์ res์ ์ ์ฅ
const res = await fetch(URL);
//res.json ์คํ์ด ๋๋๋ฉด users์ ์ ์ฅ
const users = await res.json();
console.log(users);
}
*/
//๋ฐ์ดํฐ ์์ฒญ
const data = async () => {
const res = await fetch(URL);
const users = await res.json();
userList(users);
}
//๋ฌธ์ ์ถ๋ ฅ(์คํ)
const userList = (users) => {
let output = '';
users.forEach(user => {
output += `
<h2>์ด๋ฆ : ${user.name}</h2>
<ul>
<li>์ด๋ฉ์ผ : ${user.email}</li>
<li>์ฐ๋ฝ์ฒ : ${user.phon}</li>
<li>์ฃผ์ : ${user.address.city}</li>
<li>ํ์ฌ : ${user.company.name}</li>
</ul>
`
});
result.innerHTML = output;
}
data();
</script>
</body>
</html>
```

- St 3
- ์นด์นด์ค ๋๋ฒจ๋กํผ ์ฌ์ดํธ ์ด์ฉ
โ ๊ฒ์ โ ๋ฌธ์๋ณด๊ธฐ โ ์ฑ
๋ฌธ์
- get ์ฃผ์ ๋ถ๋ฌ์ค๊ธฐ / ๋ด ์ ํ๋ฆฌ์ผ์ด์
REST API ํค ๋ฒํธ ํ์
```html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>async+await3</title>
<style>
ul {
list-style: none;
}
ul li {
border-bottom: 1px solid #000;
}
</style>
</head>
<body>
<h1>์นด์นด์ค ์ฑ
๊ฒ์</h1>
<ul class="result">
</ul>
<script>
const result = document.querySelector('.result');
const APIKEY = 'a1af021d5b1faa4b101cdea827a269bb';
const URL = 'https://dapi.kakao.com/v3/search/book';
const getBooks = async () => {
try {
const res = await fetch(`${URL}?query=๋ํ`, {
method: "GET",
headers: {
//"Host": "dapi.kakao.com",
"Authorization": `KakaoAK ${APIKEY}`
}
});
const bookData = await res.json();
console.log(bookData.documents);
spreadBooks(bookData.documents);
} catch (err) {
console.log(err)
}
};
const spreadBooks = (items) => {
let output = '';
items.forEach(item => {
output += `
<li>
<h2>์ฑ
์ ๋ชฉ : ${item.title}</h2>
<p><img src=${item.thumbnail} alt = ${item.title}></p>
<p>์ง์์ด : ${item.authors}</p>
<p>์ค๊ฑฐ๋ฆฌ : ${item.contents}</p>
<p>๊ฐ๊ฒฉ : ${item.price}</p>
<p>ํ ์ธ๊ฐ๊ฒฉ : ${item.sale_price}</p>
<p>ํ๋งค์ฌ๋ถ : ${item.status}</p>
</li>
`
});
result.innerHTML = output;
}
getBooks();
</script>
</body>
</html>
```
- ์ฃผ์์ฌํญ : "Authorization": `KakaoAK ${APIKEY}` / ์๋ฌธ์ ๋๋ฌธ์ ๊ตฌ๋ณ ํ์


```html
const output = items.map(item =>
`
<li>
<h2>์ฑ
์ ๋ชฉ : ${item.title}</h2>
<p><img src=${item.thumbnail} alt = ${item.title}></p>
<p>์ง์์ด : ${item.authors}</p>
<p>์ค๊ฑฐ๋ฆฌ : ${item.contents}</p>
<p>๊ฐ๊ฒฉ : ${item.price}</p>
<p>ํ ์ธ๊ฐ๊ฒฉ : ${item.sale_price}</p>
<p>ํ๋งค์ฌ๋ถ : ${item.status}</p>
</li>
`
);
result.innerHTML = output;
}
```
- let๊ณผ ํจ๊ป ์ฐ์ด๋ ํจ์ / map ํ์์ด ๋ ๋ง์ด ์ฌ์ฉ๋๊ธฐ๋ ํจ
- item โ {}์ ๊ฐ์ด ์ค๊ดํธ๋ฅผ ์ฌ์ฉํ ๊ฒฝ์ฐ์๋ ``๋ฐฑํฑ ์์ผ๋ก return์ ๋ถ์ฌ์ผ ์๋๋จ ์์ฐ๊ณ ์ถ์ ๊ฒฝ์ฐ {} ์์ฐ๊ธฐ
- Ex 1
- const *random* = *Math.floor*(*Math.random*()*100); //*0~99 โ ๋๋ค์ ๋ฌด์กฐ๊ฑด Math๋ฅผ ์ด๋ค*
- title 10์๋ฆฌ๋ก ๋์ผ๋ ค๋ฉด substring(0,n)์ ๋ฃ์ด์ค๋ค / n = ์ํ๋ ๊ฐ
```html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>async+awaitEx1</title>
<style></style>
</head>
<body>
<div class="result"></div>
<script>
//https://jsonplaceholder.typicode.com/photos
//๋๋ค์ผ๋ก <h3>title</h3>, <img srs = url> ์ถ๋ ฅ
//title ๋ช
์ ๊ธ์ ์ถ๋ ฅ์๋ 10์๋ฆฌ ๊น์ง๋ง
const result = document.querySelector('.result')
const URL = 'https://jsonplaceholder.typicode.com/photos';
fetch(URL).then(res => res.json()).then(pics => {
const random = Math.floor(Math.random() * 100); //0~99
console.log(pics[random]);
result.innerHTML = `
<h3>${pics[random].title.substring(0, 11)}...</h3 >
<img src=${pics[random].thumbnailUrl} alt=${pics[random].title}>
`
}).*catch*(err => *console.log*(err));
</script>
</body>
</html>
```
- ๋น๋๊ธฐ ํจ์๋ก ์ ๋ฆฌ
```html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>async+awaitEx1</title>
<style></style>
</head>
<body>
<div class="result"></div>
<script>
//https://jsonplaceholder.typicode.com/photos
//๋๋ค์ผ๋ก <h3>title</h3>, <img srs = url> ์ถ๋ ฅ
//title ๋ช
์ ๊ธ์ ์ถ๋ ฅ์๋ 10์๋ฆฌ ๊น์ง๋ง
const result = document.querySelector('.result')
const URL = 'https://jsonplaceholder.typicode.com/photos';
//๋น๋๊ธฐ ํจ์๋ก ์ ๋ฆฌ
const data = async () => {
const res = await fetch(URL);
const pics = await res.json();
//console.log(pics)
userPics(pics)
}
const userPics = (pics) => {
const random = Math.floor(Math.random() * 100); //0~99
result.innerHTML = `
<h3>${pics[random].title.substring(0, 11)}...</h3 >
<img src=${pics[random].thumbnailUrl} alt=${pics[random].title}>
`;
}
data();
</script>
</body>
</html>
```

โ ์๋ก ๊ณ ์นจ ํ ๋๋ง๋ค text์ ์ด๋ฏธ์ง ๊ฐ์ด ๋ณ๊ฒฝ ๋จ
โ *catch*(err => *console.log*(err)); ์๋ฌ ์ฐพ๊ณ ์ถ์ผ๋ฉด ์ถ๊ฐ
๋ฐฐ์ด
```html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Array</title>
<style></style>
</head>
<body>
<script>
// ๋ฆฌ์ํธ์์๋ .concat(), spread ์ฐ์ฐ์
// ์๋ณธ ๋ฐฐ์ด์ ๊ฑด๋๋ฆฌ์ง ์๊ณ ์๋ก์ด ๋ฐฐ์ด๋ก ๋ฐํํ๊ธฐ ๋๋ฌธ์ ๋ง์ด ์ฌ์ฉ
let arr1 = [10, 20, 30];
arr1.push(40); //์๋ณธ ๋ฐฐ์ด์ด ์์ ๋๊ธฐ ๋๋ฌธ์ ๋ฐฐ์ด ์ ์ง ์๋จ
console.log(arr1);
let arr2 = [10, 20, 30];
let arr3 = arr2.concat();
let arr4 = arr2.concat('a', 'b', 'c');
let arr5 = arr2.concat(true, 100);
console.log(arr2);
console.log(arr3);
console.log(arr4);
console.log(arr5);
console.log(arr2);
</script>
</body>
</html>
```

- ๊ตฌ์กฐ ๋ถํด ํ ๋น
- ๊ตฌ์กฐ๋ถํด, ๊ตฌ์กฐ๋ถํดํ ๋น, ๋น๊ตฌ์กฐํ ๋น ๋ฑ์ผ๋ก ๋ถ๋ฆผ
```
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>๊ตฌ์กฐ ๋ถํด ํ ๋น</title>
<style></style>
</head>
<body>
<h1>๊ตฌ์กฐ๋ถํด, ๊ตฌ์กฐ๋ถํดํ ๋น, ๋น๊ตฌ์กฐํ ๋น</h1>
<script>
/*
์์ฑ )
๊ฐ์ฑ = { ํค: ๊ฐ }
์ฌ์ฉ)
๊ฐ์ฒด.ํค(๊ธฐ๋ณธ ์ฌ์ฉ๊ฐ)
๊ฐ์ฒด['ํค']
*/
const user = {
id: 1,
item: 'js',
email: 'js@js.org',
addr: '์์'
}
console.log(user.id, user.item);
//๋น๊ตฌ์กฐํ ๋น
const { id, item, email, addr } = user;
console.log(id, item); //๊ฐ์ฒด๋ช
์๋ต ๊ฐ๋ฅ
const data = {
a: 10,
b: 20,
c: 30
}
const { a, b, c } = data;
console.log(a, b, c)
</script>
</body>
</html>
```

map
- st
```html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>map</title>
<style></style>
</head>
<body>
<script>
// ๋ฐฐ์ด์ ๊ฐ ์์์ ํจ์ ํธ์ถ ๊ฒฐ๊ณผ๋ฅผ ์๋ก์ด ๋ฐฐ์ด๋ก ๋ฐํ
const arr1 = [10, 20, 30, 40, 50];
//(์ธ๋ฑ์ค ๋ฒํธ: ์์, 1: 20, 2: 30)
//arr.map(์ฝ๋ฐฑํจ์)
arr1.map((item, idx) => console.log(idx + ':' + item))
const arr2 = [
{ id: 1, name: 'html5' },
{ id: 2, name: 'css3' },
{ id: 3, name: 'js' },
{ id: 4, name: 'react' }
]
// (1, html5) (2, css3) ...
arr2.map((arr) => console.log(arr.id, arr.name))
</script>
</body>
</html>
```

filter
```html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>filter+find</title>
<style></style>
</head>
<body>
<script>
/*
ํ์(ํจ์)์ ํตํด ์๋ก์ด ๋ฐฐ์ด๋ก ๋ฐํ.
.filter(): ๋ฐฐ์ด๋ก ๋ชจ๋ ๋ฐํ
.find(): ํ๋์ ๊ฐ๋ง ๋ฐํ
*/
let arr = [10, 20, 30, 40, 50];
//์กฐ๊ฑด์ ๋ง๋ ๊ฐ ์ ๋ถ ๋ฐฐ์ด๋ก ๋ฐํ
const result1 = arr.filter(item => item > 30);
console.log(result1);
const result2 = arr.filter(item => item > 50);
console.log(result2); // ์กฐ๊ฑด์ ๋ง๋ ๊ฐ์ด ์์ผ๋ฉด ๋น ๋ฐฐ์ด์ ๋ฐํ[]
const data = [
{ id: 1, name: '์๋ฉ๋ฆฌ์นด๋
ธ' },
{ id: 2, name: '์นดํ๋ผ๋ผ' },
{ id: 3, name: '์นดํธ์น๋
ธ' },
{ id: 4, name: '๋ฐ๋๋ผ๋ผ๋ผ' },
{ id: 5, name: '์นดํ๋ชจ์นด' }
]
//๋ฐ์ดํฐ ์ญ์ ์ ์ฃผ๋ก ์ฌ์ฉ
const result3 = data.filter(item => item.id !== 1);
console.log(result3);
const result4 = arr.find(elem => elem > 20);
console.log(result4)
const result5 = data.find(item => item.id === 5);
console.log(result5)
</script>
</body>
</html>
```

์ผํญ์ฐ์ฐ์ + ๋ ผ๋ฆฌ์ฐ์ฐ์
```
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>์ผํญ์ฐ์ฐ์ + ๋
ผ๋ฆฌ์ฐ์ฐ์</title>
<style></style>
</head>
<body>
<script>
/*
์ผํญ ์ฐ์ฐ์)
์กฐ๊ฑด ? true์ผ ๋ : false ์ผ ๋;
๋
ผ๋ฆฌ ์ฐ์ฐ์)
(์กฐ๊ฑด) && true์ธ ๊ฒฐ๊ณผ
true && ๊ฒฐ๊ณผ
(์กฐ๊ฑด) || false์ธ ๊ฒฐ๊ณผ
false || ๊ฒฐ๊ณผ
null || ๊ฒฐ๊ณผ
undefined || ๊ฒฐ๊ณผ
*/
const done1 = true;
const done2 = false;
const done3 = undefined;
const result1 = done1 === true ? '์ฐธ' : '๊ฑฐ์ง';
console.log(result1)
// 1. true && '์ฐธ์ธ ๊ฒฐ๊ณผ' ์ฐ์ฐ
// 2. ์์ ๊ฒฐ๊ณผ๋ฌผ done1๊ณผ ๋น๊ต
const result2 = done1 === true && '์ฐธ์ธ ๊ฒฐ๊ณผ';
console.log(result2)
//done2๊ฐ ๊ฑฐ์ง์ด์ด์ผ๋ง '๊ฑฐ์ง์ธ ๊ฒฐ๊ณผ'๊ฐ ์ถ๋ ฅ๋๋ค
const result3 = done2 || '๊ฑฐ์ง์ธ ๊ฒฐ๊ณผ';
console.log(result3)
const result4 = done3 || '๊ฐ์ด ์กด์ฌํ์ง ์์';
console.log(result4)
</script>
</body>
</html>
```
- spread ์ฐ์ฐ์
```html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>spread ์ฐ์ฐ์</title>
<style></style>
</head>
<body>
<script>
let data = [
{ id: 1, name: '์๋ฉ๋ฆฌ์นด๋
ธ' },
{ id: 2, name: '์นดํ๋ผ๋ผ' },
{
id: 3,
"name": "jimin",
"username": "mjkkcalb",
"email": "mjkkca1b@naver.com",
"adress": {
"city": "ํํ",
"zipcode": "629-9๋ฒ์ง",
"street": "๋น์ 1๋ก"
}
},
{ id: 4, name: '์นดํ๋ชจ์นด' },
]
const output1 = [...data];
const output2 = [...data, { id: 6, name: "์์ํ๋ ์" }];
console.log(output1);
console.log(output2);
console.log(data);
//id ๊ฐ์ด 3์ธ ๊ฐ์ฒด๋ฅผ ํ์ ํ name: 'jim'์ผ๋ก ๋ณ๊ฒฝ
const output3 = data.map(item => {
if (item.id === 3) {
//return { name: 'jim' }์ด ๊ฐ๋ง ๋ฐํ ๋ค๋ฅธ ๊ฐ์ ๋ชจ๋ ์ฌ๋ผ์ง
return {
...item,
name: 'jim'
}
} else {
return item
}
});
console.log(output3);
const output4 = data.map(item => item.id === 2 ? { ...item, name: '์์ด์ค๋ผ๋ผ' } : item);
console.log(output4)
</script>
</body>
</html>
```

์์์์
- Ex1
```jsx
<body>
<script>
// 1. '์๋ฆผ์ฐฝ์
๋๋ค' - ์๋ฆผ์ฐฝ ํธ์ถ
alert('์๋ฆผ์ฐฝ์
๋๋ค');
// 2. '์
๋ ฅ์ฐฝ์
๋๋ค' - ์
๋ ฅ์ฐฝ ํธ์ถ
let msg = prompt('์
๋ ฅ์ฐฝ์
๋๋ค');
// 3. ์
๋ ฅ ๋ฐ์ ๊ฐ์ ๋ค์ ์๋ฆผ์ฐฝ์ผ๋ก ์ถ๋ ฅ
alert(msg);
</script>
</body>
```
- Ex ๋์
์ฐ์ฐ์
```html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>๋์
์ฐ์ฐ์ Ex</title>
<script>
//๋ฌธ์ ์ค๋น ์ด๋ฒคํธ
window.onload = funcion() {
//์๋์ฐ์ ๋ก๋๊ฐ ๋๋๋ฉด ํจ์ ์คํ
let output = '';
//๋ฌธ์์ฌ๋ ์ ๋ํ๊ธฐ ๋์
์ฐ์ฐ์ฌ ์ฌ์ฉ์ ์์ ๋ด์ฉ์ด ๊ทธ๋๋ก ์ถ๊ฐ
output += '<ul>'; //output('') = '<ul>' -> output("<ul>")
output += '<li>html5</li>';
output += '<li>css3</li>';
output += '<li>javascript</li>';
output += '<li>react</li>';
output += '</ul>';
document.body.innerHTML = output;
}
</script>
</head>
<body>
<!--
<ul>
<li>html5</li>
<li>css3</li>
<li>javascirpt</li>
<li>react</li>
</ul>
-->
<!-- <script>
let output = '';
//๋ฌธ์์ฌ๋ ์ ๋ํ๊ธฐ ๋์
์ฐ์ฐ์ฌ ์ฌ์ฉ์ ์์ ๋ด์ฉ์ด ๊ทธ๋๋ก ์ถ๊ฐ
output += '<ul>'; //output('') = '<ul>' -> output("<ul>")
output += '<li>html5</li>';
output += '<li>css3</li>';
output += '<li>javascript</li>';
output += '<li>react</li>';
output += '</ul>';
document.body.innerHTML = output;
/*
๋ณ์ ์ด๊ธฐํ
let txt = ''; ๋ฌธ์์ด
let num = 0 ์ซ์
let boo = false; ๋ถ๋ฆฌ์ธ
let obj = null; ๊ฐ์ฒด
*/
</script> -->
</body>
</html>
```
- if Ex
- Ex if
```
<!--
์
๋ ฅ ๋ฐ์ ์ ์๊ฐ 60์ ์ด์์ด๋ฉด, 'xx์ ์ ํต๊ณผ์
๋๋ค' ์ถ๋ ฅ
60์ ๋ฏธ๋ง์ด๋ฉด, 'xx์ ์ ์ฌํ๊ฐ ์
๋๋ค' ์ถ๋ ฅ
100์ ์ด๊ณผ์ด๋ฉด, '100์ ์ดํ๋ก๋ง ์
๋ ฅํด ์ฃผ์ธ์' ์ถ๋ ฅ
๊ทธ ์ธ '์ซ์๋ง ์
๋ ฅํด ์ฃผ์ธ์' ์ถ๋ ฅ
-->
<script>
let num = prompt('์ ์๋ฅผ ์
๋ ฅํด ์ฃผ์ธ์');
if (num > 100) {
alert(`100์ ์ดํ๋ก๋ง ์
๋ ฅํด ์ฃผ์ธ์`)
} else if (num >= 60) {
alert(`${num}์ ์ ํต๊ณผ์
๋๋ค.`)
} else if (num < 60) {
alert(`${num}์ ์ ์ฌํ๊ฐ ์
๋๋ค`)
} else {
alert(`์ซ์๋ง ์
๋ ฅํด ์ฃผ์ธ์`)
}
```
- Ex2 if
```jsx
let out = confirm('ํ์ ํํด ํ์๊ฒ ์ต๋๊น')
// if (out == true) {
// if (out === true) {
// if (out === 1) {์๊ฒฉํ ๋น๊ต. ๋ฐ์ดํฐ์ ํ์
๋ค๋ฅด๊ธฐ ๋๋ฌธ์ false
/*if (out) {
alert('ํํด ์ฒ๋ฆฌ ๋์์ต๋๋ค.')
} else {
alert('ํํด ์ทจ์ ๋์์ต๋๋ค')
}; */
//์ผํญ ์ฐ์ฐ์
// (์กฐ๊ฑด์) ? ์ฐธ์ธ ์คํ๋ฌธ : ๊ฑฐ์ง์ธ ์คํ๋ฌธ;
out ? alert('์ฒ๋ฆฌ ๋์์ต๋๋ค') : alert('์ทจ์ ๋์์ต๋๋ค');
```
- Ex3 if
```jsx
let num = prompt('์ซ์๋ฅผ ์
๋ ฅํ์ธ์');
if (num % 2 == 0) { //0 == false, 1 == true
alert(`${num}์ ์ง์์
๋๋ค`)
} else {
alert(`${num}์ ํ์์
๋๋ค`)
}
</script>
```
- Ex4 if
```jsx
const month = prompt('์ข์ํ๋ ๋ฌ์ ์
๋ ฅํ์ธ์');
// && ์ฐ์ฐ์ : A, B ์กฐ๊ฑด ๋ชจ๋ ๋ง์กฑ์์ผฐ์ ๋ ๋ฐํ
if (month >= 3 && month <= 5) {
alert(`๋ด์ ๋ธ๊ธฐ!`)
} else if (month >= 6 && month <= 8) {
alert(`์ฌ๋ฆ์ ์๋ฐ!`)
} else if (month >= 9 && month <= 11) {
alert(`๊ฐ์์ ์ฌ๊ณผ!`)
} else if (month == 12 || 2 >= month) {
//or ์ฐ์ฑ์ : A,B ์กฐ๊ฑด ์ค ํ๋๋ง ๋ง์กฑ์์ผฐ์ ๋ ๋ฐํ
alert(`๊ฒจ์ธ์ ๊ทค!`)
} else {
alert(`1์์ 12์ฌ์ด์ ๊ฐ๋ง ์
๋ ฅํด ์ฃผ์ธ์`)
};
```
- Ex5 if
```jsx
/* let num = prompt('1~4 ์ฌ์ด์ ์ซ์๋ฅผ ์
๋ ฅํ์ธ์');
console.log(typeof num) //string
//๋ฐ์ดํฐ ํ์
๊น์ง ๋น๊ตํ๋ ์๊ฒฉํ ๋น๊ต
/* if (num == 1) {
document.body.innerHTML = '<img src="./images/food1.jpg" alt="img1">'
} else if (num == 2) {
document.body.innerHTML = '<img src="./images/food2.jpg" alt="img2">'
} else if (num == 3) {
document.body.innerHTML = '<img src="./images/food3.jpg" alt="img3">'
} else if (num == 4) {
document.body.innerHTML = '<img src="./images/food4.jpg" alt="img4">'
} */
//์ซ์ํ ๋ณํ
//num = Number(num);
//num = parseInt(num);
//num = +num;
num = num * 1;
if (num == 1) {
document.body.innerHTML = '<img src="./images/food1.jpg" alt="img1">'
} else if (num == 2) {
document.body.innerHTML = '<img src="./images/food2.jpg" alt="img2">'
} else if (num == 3) {
document.body.innerHTML = '<img src="./images/food3.jpg" alt="img3">'
} else if (num == 4) {
document.body.innerHTML = '<img src="./images/food4.jpg" alt="img4">'
```
- Ex6 if
```jsx
let num = prompt('์ ์๋ฅผ ์
๋ ฅํ์ธ์');
/* if (num > 80 && num <= 100) {
alert(`${num}์ ์ ์ ์
๋๋ค`)
} else if (num > 60 && num <= 80) {
alert(`${num}์ ์ ์ค ์
๋๋ค`)
} else if (num > 40 && num <= 60) {
alert(`${num}์ ์ ํ ์
๋๋ค`)
} else if (num >= 0 && num <= 40) {
alert(`${num}์ ์ ํ๋ฝ ์
๋๋ค`)
} else {
alert(`์ ์๋ง ์
๋ ฅํ์ธ์`)
} */
/* if (num === null) { //์์๊ฐ ์ค์~~
document.body.innerHTML = `<h2>์
๋ ฅ์ด ์ทจ์๋์์ต๋๋ค.</h2>`
} else if (num <= 100 && 81 <= num) {
document.body.innerHTML = `<h2>${num}์ ์ '์'์
๋๋ค.</h2>`
} else if (num <= 80 && 61 <= num) {
document.body.innerHTML = `<h2>${num}์ ์ '์ค'์
๋๋ค.</h2>`
} else if (num <= 60 && 41 <= num) {
document.body.innerHTML = `<h2>${num}์ ์ 'ํ'์
๋๋ค.</h2>`
} else if (num <= 40 && 0 <= num) {
document.body.innerHTML = `<h2>${num}์ ์ 'ํ๋ฝ'์
๋๋ค.</h2>`
} else {
document.body.innerHTML = `<h2>์ ์๋ง ์
๋ ฅํ์ธ์</h2>`
} */
let grade = '';// ๋ฌธ์์ด ์ด๊ธฐํ
if (num === null) {
document.body.innerHTML = `<h2>์
๋ ฅ์ด ์ทจ์๋์์ต๋๋ค.</h2>`
} else if (num <= 100 && 81 <= num) {
grade = '์';
} else if (num <= 80 && 61 <= num) {
grade = '์ค';
} else if (num <= 60 && 41 <= num) {
grade = 'ํ';
} else if (num <= 40 && 0 <= num) {
grade = 'ํ๋ฝ';
} else {
document.body.innerHTML = `<h2>์ ์๋ง ์
๋ ฅํ์ธ์</h2>`
}
/* if (grade) {
document.body.innerHTML = `<h2>${num}์ ์ ${grade}์
๋๋ค.</h2>`
} else { false } */
/* grade ? document.body.innerHTML = `<h2>${num}์ ์ ${grade}์
๋๋ค.</h2>` : false */
grade && (document.body.innerHTML = `<h2>${num}์ ์ ${grade}์
๋๋ค.</h2>`);
```
- Ex ์ค์ฒฉ if
```jsx
/*
์์ด๋๋ฅผ ์
๋ ฅ ๋ฐ์ ์ผ์นํ๋ฉด
์์ด๋๊ฐ ์ผ์นํฉ๋๋ค ์๋ฆผ
๋ค์ ๋น๋ฐ๋ฒํธ ์
๋ ฅ ์ฐฝ ๋จ๊ณ
์
๋ ฅ ๋ฐ์ ๋น๋ฐ๋ฒํธ์ ๋น๊ตํ์ฌ
์ผ์นํ๋ฉด ๋ก๊ทธ์ธ ๋์์ต๋๋ค
ํ๋ฆฌ๋ฉด ๋น๋ฐ๋ฒํธ๊ฐ ์ผ์นํ์ง ์์ต๋๋ค
*/
// ์์ด๋๊ฐ ์ผ์นํ์ง ์์ผ๋ฉด ์ผ์นํ์ง ์๋๋ค ์๋ฆผ
/*
let userId = prompt('์์ด๋๋ฅผ ์
๋ ฅํ์ธ์');
if (userId === 'web') {
alert(`์์ด๋๊ฐ ์ผ์นํฉ๋๋ค`)
let userPw = prompt('๋น๋ฐ๋ฒํธ๋ฅผ ์
๋ ฅํ์ธ์');
if (userPw === '1234') {
alert('๋ก๊ทธ์ธ ๋์์ต๋๋ค')
} else {
alert('๋น๋ฐ๋ฒํธ๊ฐ ์ผ์นํ์ง ์์ต๋๋ค')
}
} else {
alert(`์์ด๋๊ฐ ์ผ์นํ์ง ์์ต๋๋ค.`)
};
*/
const defaultId = 'web';
const defaultPw = 1234;
let userId = prompt('์์ด๋๋ฅผ ์
๋ ฅํ์ธ์');
if (userId === defaultId) {//์์ด๋๋ฅผ ์
๋ ฅ ๋ฐ์ ์ผ์นํ๋ฉด
alert(`์์ด๋๊ฐ ์ผ์นํฉ๋๋ค`); // ์์ด๋๊ฐ ์ผ์นํฉ๋๋ค ์๋ฆผ
//๋ค์ ๋น๋ฐ๋ฒํธ ์
๋ ฅ ์ฐฝ ๋จ๊ณ
let userPw = prompt('๋น๋ฐ๋ฒํธ๋ฅผ ์
๋ ฅํ์ธ์');
userPw = userPw * 1; //์ซ์ ๋ณํ
if (userPw === defaultPw) { // ์
๋ ฅ ๋ฐ์ ๋น๋ฐ๋ฒํธ์ ๋น๊ตํ์ฌ
alert('๋ก๊ทธ์ธ ๋์์ต๋๋ค'); //์ผ์นํ๋ฉด ๋ก๊ทธ์ธ ๋์์ต๋๋ค
} else {//ํ๋ฆฌ๋ฉด ๋น๋ฐ๋ฒํธ๊ฐ ์ผ์นํ์ง ์์ต๋๋ค
alert('๋น๋ฐ๋ฒํธ๊ฐ ์ผ์นํ์ง ์์ต๋๋ค')
}
} else { // ์์ด๋๊ฐ ์ผํผํ์ง ์์ผ๋ฉด ์ผ์นํ์ง ์๋๋ค๊ณ ์๋ฆผ
alert(`์์ด๋๊ฐ ์ผ์นํ์ง ์์ต๋๋ค.`)
};
```
- switch Ex
- Ex1 switch
```jsx
let num = prompt('์ซ์๋ฅผ ์
๋ ฅํด ์ฃผ์ธ์')
console.log(typeof num)
/*switch (num % 2) {
case 0:
console.log(`์
๋ ฅ ๋ฐ์ ๊ฐ ${num}์ ์ง์์
๋๋ค`)
break;
case 1:
console.log(`์
๋ ฅ ๋ฐ์ ๊ฐ ${num}์ ํ์์
๋๋ค`)
break;
default:
console.log(`์ซ์๋ง ์
๋ ฅํด ์ฃผ์ธ์.`)
}*/
switch (num % 2) {
case 0:
msg = '์ง์';
break;
case 1:
msg = 'ํ์';
break
default:
console.log(`์ซ์๋ง ์
๋ ฅํด ์ฃผ์ธ์.`);
}
//num && (console.log(`์
๋ ฅ ๋ฐ์ ๊ฐ ${num}์ ${msg}์
๋๋ค`));
if (msg) console.log(`์
๋ ฅ ๋ฐ์ ๊ฐ ${num}์ ${msg}์
๋๋ค`);
```
- Ex2 switch
```html
let coffee = prompt('์๋ฉ๋ฆฌ์นด๋
ธ, ์นดํ๋ผ๋ผ, ์นดํ๋ชจ์นด, ๋ฐ๋๋ผ๋ผ๋ผ ์ค ์ ํํ์ธ์.')
/* switch (coffee) {
case '์๋ฉ๋ฆฌ์นด๋
ธ':
document.body.innerHTML = `${coffee} : 15,000`;
break;
case '์นดํ๋ผ๋ผ':
document.body.innerHTML = `${coffee} : 20,000`;
break;
case '์นดํ๋ชจ์นด':
document.body.innerHTML = `${coffee} : 20,000`;
break;
case '๋ฐ๋๋ผ๋ผ๋ผ':
document.body.innerHTML = `${coffee} : 25,000`;
break;
default:
document.body.innerHTML = `์ค๋น๋์ง ์์ ๋ฉ๋ด์
๋๋ค`;
}*/
switch (coffee) {
case '์๋ฉ๋ฆฌ์นด๋
ธ':
price = 15000
break;
case '์นดํ๋ผ๋ผ':
price = 20000
break;
case '์นดํ๋ชจ์นด':
dprice = 20000
break;
case '๋ฐ๋๋ผ๋ผ๋ผ':
price = 25000
break;
default:
document.body.innerHTML = `<h2>์ค๋น๋์ง ์์ ๋ฉ๋ด์
๋๋ค</h2>`;
}
if (price) document.body.innerHTML = `<h2>์ฃผ๋ฌธํ์ ${coffee}์ ๊ฐ๊ฒฉ์ ${price.toLocaleString()}์ ์
๋๋ค.</h2>`;
//price.toLocaleString() ์ง์ญ๋ณ ์ ์๊ฐ์ ๋ฌธ์์ด๋ก ๋ฐํ
</script>
```
- Ex3 switch
```jsx
/* let num = prompt('์ซ์๋ฅผ ์
๋ ฅํ์ธ์')
switch (num) {
case null:
alert('์
๋ ฅ์ด ์ทจ์๋์์ต๋๋ค.');
break;
case '1':
document.body.innerHTML = '<img src="./images/food1.jpg">';
break;
case '2':
document.body.innerHTML = '<img src="./images/food2.jpg">';
break;
case '3':
document.body.innerHTML = '<img src="./images/food3.jpg">';
break;
case '4':
document.body.innerHTML = '<img src="./images/food4.jpg">';
break;
default:
document.body.innerHTML = '<`1~4๊น์ง์ ์ซ์ ์ค ํ๋๋ง ์
๋ ฅํด ์ฃผ์ธ์`>';
break;
} */
let num = prompt('์ซ์๋ฅผ ์
๋ ฅํ์ธ์');
num = +num;
let url = '';
switch (num) {
/*case null:
url = '<h2>์ทจ์ ๋์์ต๋๋ค</h2>';
break;*/
case 1:
url = `food1.jpg`;
break;
case 2:
url = `food2.jpg`;
break;
case 3:
url = `food3.jpg`;
break;
case 4:
url = `food4.jpg`;
break;
default:
url = '<h2>1~4๊น์ง์ ์ซ์ ์ค ํ๋๋ง ์
๋ ฅํด ์ฃผ์ธ์</h2>';
}
//document.body.innerHTML = url;
/* if (num) {
document.body.innerHTML = `<img src="./images/${url}" alt="img${num}">`;
} else if (num === null) {
document.body.innerHTML = '<h2>์ทจ์ ํ์ต๋๋ค</h2>'
} */
//document.body.innerHTML = `<img src="./images/${url}" alt="img${url}">`
document.body.innerHTML = `<img src="./images/${url}" alt="img${num}">`
```
- Ex ์ค์ฒฉ switch
```
const defaultId = 'web';
const defaultPw = 1234;
/*
let userId = prompt('์์ด๋๋ฅผ ์
๋ ฅํ์ธ์')
switch (userId) {
case defaultId:
alert('์์ด๋๊ฐ ์ผ์นํฉ๋๋ค')
let userPw = prompt('๋น๋ฐ๋ฒํธ๋ฅผ ์
๋ ฅํ์ธ์')
userPw = userPw * 1;
switch (userPw) {
case defaultPw:
alert('๋ก๊ทธ์ธ ๋์์ต๋๋ค');
break;
default:
alert('๋น๋ฐ๋ฒํธ๊ฐ ํ๋ ธ์ต๋๋ค.');
}
break;
default:
alert('์์ด๋๊ฐ ํ๋ ธ์ต๋๋ค')
}
*/
let userId = prompt('์์ด๋๋ฅผ ์
๋ ฅํ์ธ์')
switch (userId === defaultId) {
case true:
alert('์์ด๋๊ฐ ์ผ์นํฉ๋๋ค')
let userPw = prompt('๋น๋ฐ๋ฒํธ๋ฅผ ์
๋ ฅํ์ธ์')
userPw = + userPw;
switch (userPw) {
case defaultPw:
alert('๋ก๊ทธ์ธ ๋์์ต๋๋ค');
break;
default:
alert('๋น๋ฐ๋ฒํธ๊ฐ ํ๋ ธ์ต๋๋ค.');
}
break;
default:
alert('์์ด๋๊ฐ ์ผ์นํ์ง ์์ต๋๋ค')
}
```
- for Ex
- Ex1 for
```jsx
<!-- ์ฌ์ฉ์๊ฐ ์
๋ ฅํ ๊ฐ๊น์ง์ ํฉ์ ์ถ๋ ฅ
5 -> 1+2+3+4+5 =??
-->
const num = prompt('์ซ์๋ฅผ ์
๋ ฅํ์ธ์');// ๋ฌธ์์ด
let total = 0;
for (let i = 1; i <= num; i++) {// ์ซ์ํ ๋ฌธ์์ด์ ์๋๋ณํ
total += i;
}
console.log(`์ฌ์ฉ์ ์
๋ ฅํ ${num}์ ํฉ์ ${total}์
๋๋ค.`);
```
- Ex2 for
```jsx
<!-- forEx2
๊ตฌ๊ตฌ๋จ 2๋จ ์ถ๋ ฅ
2*1=2;
2*2=4;
2*3=6;
2*4=8;
2*5=10;
...
-->
let sum = '';
for (i = 1; i <= 9; i++) {
let total = 2 * i;
sum += `<p> 2 * ${i} = ${total}</p>`;
}
document.body.innerHTML = sum;
```
- Ex3 for
```jsx
<!-- 1~100์ ์ซ์ ์ค 3์ ๋ฐฐ์์ด์ง๋ง 7์ ๋ฐฐ์๋ ์๋ ์ซ์๋ง ์ถ๋ ฅ
3,6,9,12,15,18,(21์ 7์ ๋ฐฐ์์ด๋ฏ๋ก ์ถ๋ ฅ x)... -->
//let i;
for (let i = 1; i <= 100; i++) {
if (i % 3 === 0 && i % 7 !== 0) {
console.log(i)
}
}
//console.log(i);
```
- Ex4 for
```jsx
๊ตฌ๊ตฌ๋จ 2๋จ๋ถํฐ 9๋จ
/*
let sum = '';
for (i = 2; i <= 9; i++) {
for (j = 1; j <= 9; j++)
console.log(i + "*" + j + "=" + i * j)
}*/
let result = '';
for (let i = 2; i <= 9; i++) {
result += `<h3>---- ${i}๋จ----</h3>`
for (let k = 1; k <= 9; k++) {
result += `${i} + ${k} = ${i + k}<br>`
}
}
document.body.innerHTML = result;
```
- break Ex
```jsx
/*
for (let i = 1; i <= 100; i++) {
if (i % 3 === 0 && i <= 40) {
console.log(i)
}
}
*/
let total = '';
for (let i = 0; i <= 100; i += 3) {
if (i >= 40) {
break;
}
total += i + ',';
}
document.body.innerHTML = total;
```
- while Ex
- Ex1 while
```jsx
//๊ตฌ๊ตฌ๋จ 8๋จ
let num = prompt('2์9์ฌ์ด์ ์ซ์๋ฅผ ์
๋ ฅํ์ธ์')
let i = 1;
while (i <= 9) {
console.log(`${num} * ${i} = ${i * num}`)
// console.log(`8 * ${i} = ${i * 8}`)
i++;
}
```
- Ex2 while
```jsx
let total = 0;
let i = 1;
while (i <= 100) {
total += i; // total = total + i
i++;
}
console.log(`1๋ถํฐ 100๊น์ง์ ํฉ์ ${total} ์
๋๋ค.`)
```
- Ex3 while
```jsx
* 1๋ถํฐ 30๊น์ง ์ซ์ ์ค 2์ ๋ฐฐ์์ 6์ ๋ฐฐ์
let i = 1;
while (i <= 30) {
if (i % 2 === 0 && i % 6 === 0) {
console.log(i)
}
i++;
}
```
- Ex4 while
```
let i = 2;
let k = 1;
while (i <= 9) {
console.log(`---${i}๋จ---`);
while (k <= 9) {
console.log(`${i} * ${k} = ${i * k}`)
k++;
}
i++;
k = 1; // 1์ ์ฌํ ๋นํด์ ์ด๊ธฐํ
}
```
- Ex5 while
```jsx
*1๋ถํฐ n๊น์ง ๋ํ๋ฉด n์ผ๋ก 3000์ ๋๊ธด๋ค
let i = 1;
let sum = 0;
while (true) {
sum += i;
if (sum > 3000) {
break;
}
i++;
}
console.log(`1๋ถํฐ ${i}๊น์ง ๋ํ๋ฉด ${sum}์ผ๋ก 3000์ ๋๊ธด๋ค`);
```