Skip to content

Latest commit

ย 

History

History
3032 lines (2382 loc) ยท 116 KB

README.md

File metadata and controls

3032 lines (2382 loc) ยท 116 KB

JavaScript (๋Œ€ํ™”์‹ ์›น ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด)

1. JS ๊ธฐ๋ณธ

  • html์— ๋น„ํ•ด์„œ๋Š” ์—„๊ฒฉํ•˜์ง€๋งŒ ๋‹ค๋ฅธ ์–ธ์–ด๋“ค๊ณผ ๋น„๊ตํ–ˆ์„ ๋•Œ๋Š” ์œ ์—ฐํ•œ ํŽธ์ด๋‹ค
  • // ํ•œ ์ค„ ์ฃผ์„
  • /**/ ์—ฌ๋Ÿฌ ์ค„ ์ฃผ์„ โ†’ (shift+art+a)
  • undefined โ†’ ๋ณ€์ˆ˜๊ฐ€ ์„ ์–ธ๋งŒ ๋˜๊ณ  ๊ฐ’์„ ํ• ๋‹น ๋ฐ›์ง€ ๋ชปํ–ˆ์„ ๋•Œ

2. ์ž‘์„ฑ ์œ„์น˜

  • @charset โ€œutfโ€-8; โ†’ ์“ธ ํ•„์š” ์—†๋‹ค.
  • object.method(parameter) ; ๊ฐ์ฒด. ๋ฉ”์„œ๋“œ (๋งค๊ฐœ๋ณ€์ˆ˜*)*
  • js ์ž‘์„ฑ ์‹œ ์ฃผ์˜์‚ฌํ•ญ โ†’head ์˜์—ญ ๋“ฑ DOM์„ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ ์ „์— ์ž‘์„ฑ์‹œ ๋ฌธ์„œ ์ค€๋น„ ์ด๋ฒคํŠธ ํ•„์š”

  1. HTML ํƒœ๊ทธ์˜ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ์†์„ฑ์— ์ž‘์„ฑ

<img src=โ€œapple.jpgโ€ alt=โ€œimgโ€ onclick=โ€œthis" src=โ€™banana.pngโ€™โ€>

  1. <script> </script> ๋‚ด ์ž‘์„ฑ
  2. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ๋ณ„๋„ ํŒŒ์ผ์— ์ž‘์„ฑ

  • 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>

# ์ž‘์—…

1. ๋ฐ์ดํ„ฐ ํƒ€์ž…์ด๋ž€ ?

  • ์›์‹œ ํƒ€์ž… (primitive data type)

    : ํ•œ๋ฒˆ์— ํ•˜๋‚˜์˜ ๊ฐ’๋งŒ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์œผ๋ฉฐ ํ•˜๋‚˜์˜ ๊ณ ์ •๋œ ์ €์žฅ๊ณต๊ฐ„ ์ด์šฉ

    ยท string(๋ฌธ์ž์—ด)

    ยท number(์ˆซ์ž)

    ยท boolean

    ยท null : ๊ฐœ๋ฐœ์ž๊ฐ€ ์˜๋„์ ์œผ๋กœ ์—†์•ค ๊ฐ’

    ยท undefined : ๋ณ€์ˆ˜ ์„ ์–ธ์€ ๋˜์—ˆ์œผ๋‚˜ ๊ฐ’์ด ์—†๋Š” ์ƒํƒœ, ์ƒ์ˆ˜๋‚˜ ๋ณ€์ˆ˜๋กœ ์„ ์–ธ

    ยท symbol(ES6์—์„œ ์ถ”๊ฐ€)

  • ๊ฐ์ฒด(์ฐธ์กฐ) ํƒ€์ž… (object/reference type)

    : ํ•œ๋ฒˆ์— ์—ฌ๋Ÿฌ ๊ฐœ์˜ ๊ฐ’์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์Œ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ๊ณ ์ •๋˜์ง€ ์•Š์€ ๋™์  ๊ณต๊ฐ„ ์‚ฌ์šฉ

    object : ๋ฐฐ์—ด, ํ•จ์ˆ˜, ์ •๊ทœํ‘œํ˜„์‹

2. ๋ฐ์ดํ„ฐ ํƒ€์ž… ์ข…๋ฅ˜

3. ์„ ์–ธ

  • header ์œ„๋กœ ์ž‘์„ฑ
    • ๋‚ด๋ถ€ ์„ ์–ธ
      • <script *type*="text/javascript"></script>
      • <script></script>
    • ์™ธ๋ถ€ ์„ ์–ธ
      • <script *src*="./script.js"></script>

4. ์ถœ๋ ฅ

  • 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)
            ```
            
            ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/1b515f9e-7154-4118-918b-a7808eaa713c/Untitled.png)
            
        - ๊ฐ’์˜ ์žฌํ• ๋‹น
            
            ```
            //๋ณ€์ˆ˜ ์„ ์–ธ ํ›„ ๋Œ€์ž…
                let banana; //๋ณ€์ˆ˜ ์„ ์–ธ
                banana = 1000; //๋ณ€์ˆ˜ banana์— ์ˆซ์ž 1000dmf '๋Œ€์ž…'
                // alert(banana)
                console.log(banana)
                banana = 2000; // ๊ฐ’์˜ ์žฌํ• ๋‹น
                console.log(banana);
            ```
            
            ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/cad87bf4-54cc-4c73-a843-a1a77c0cf400/Untitled.png)
            
        - ๋ณ€์ˆ˜ ์„ ์–ธ๊ณผ ๋™์‹œ์— ๋Œ€์ž…
            
            ```
            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)
            ```
            
            ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/71aba68d-9a6e-46b5-8217-9e5595743387/Untitled.png)
            
        - *ํ•œ ์ค„์— ์—ฌ๋Ÿฌ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•จ๊ณผ ๋™์‹œ์— ๊ฐ’ ๋Œ€์ž…*
            
            ```jsx
            let ๋ณ€์ˆ˜1 = 22, ๋ณ€์ˆ˜2 = 33, ํ•ฉ๊ณ„ = ๋ณ€์ˆ˜1 + ๋ณ€์ˆ˜2;
                console.log(ํ•ฉ๊ณ„);
                let num1 = 21234, num2 = 3453464534, sum = num1 + num2;
                console.log(sum);
                console.log(sum = ํ•ฉ๊ณ„);
            ```
            
            ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/936ad506-2f67-461b-8c7c-8490507bf41b/Untitled.png)
            
    - 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;
        ```
        
        ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/39f4493a-69ca-49ba-b5d6-dba949ef171c/Untitled.png)
        
        - ์žฌํ• ๋‹น
            
            ```jsx
            // console.log(b); ์ฐธ์กฐ ์—๋Ÿฌ. ๋ณ€์ˆ˜ ํ˜ธ์ด์ŠคํŒ… x
                let b = 500;
                b = 1000;
                console.log(b);
            ```
            
            ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/14e951fc-2802-4461-a520-0877fc54ac9b/Untitled.png)
            
        - 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('์•Œ๋ฆผ์ฐฝ์ž…๋‹ˆ๋‹ค');
        ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/122fdf43-0b5a-46f3-aa7e-ede61132e94e/Untitled.png)
        
    - ํ™•์ธ์ฐฝ. ํ™•์ธ(true), ์ทจ์†Œ(false) ๋ฒ„ํŠผ์„ ๊ฐ€์ง„ ์ฐฝ
        - confirm(); โ†’ ex) confirm('ํ™•์ธ ์ฐฝ์ž…๋‹ˆ๊นŒ?');
        
        ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/a37048db-cc13-47bc-b7dc-be36d93d2263/Untitled.png)
        
    - ์ž…๋ ฅ์ฐฝ ('๋ฉ”์„ธ์ง€', '์ƒ๋žต ๊ฐ€๋Šฅํ•œ ์ž…๋ ฅ๊ฐ’')
        - prompt(); โ†’ ex) prompt('์ž…๋ ฅ๊ฐ’์„ ์ž‘์„ฑํ•˜์„ธ์š”', '์ด ๊ณณ์— ์ž‘์„ฑํ•˜์„ธ์š”');
            
            ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/447bbfcb-1e32-4680-9749-e295e94f2b43/Untitled.png)
Const ์ƒ์ˆ˜
    ```
    //conts ์ƒ์ˆ˜: ๋ณ€ํ•˜์ง€ ์•Š๋Š” ๋ณ€์ˆ˜
    
        //const apple; ์ƒ์ˆ˜์˜ ๊ฒฝ์šฐ ์„ ์–ธ ํ›„ ๋Œ€์ž… x
    
        apple = '์‚ฌ๊ณผ'; //ํ‚ค์›Œ๋“œ ์—†์ด ์ž‘์„ฑํ•˜๋ฉด ์ผ๋ฐ˜์ ์œผ๋กœ ๋ณ€์ˆ˜(var)๋กœ ์ธ์‹
        //const apple = 2000; ํ‚ค์›Œ๋“œ ์—†๋Š” ๋ณ€์ˆ˜๋ช…๊ณผ ๋™์ผํ•œ ์ด๋ฆ„ ์‚ฌ์šฉ x
        console.log(apple);
    
        //์„ ์–ธ๊ณผ ๋™์‹œ์— ๋Œ€์ž…
        const orange = '์˜ค๋ Œ์ง€';
        console.log(orange);
        //orange = '์žฌํ• ๋‹น ๊ฐ€๋Šฅ?'; ๋ถˆ๊ฐ€๋Šฅ
    		//const orange = '์žฌ์„ ์–ธ ๊ฐ€๋Šฅ?'; ๋ถˆ๊ฐ€๋Šฅ
    ```
    
    ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/0d470baf-1872-4c83-99cb-2fe89a60a26c/Untitled.png)
    
    ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/fe57643c-f512-41d9-ab0c-f092d171b063/Untitled.png)
์—ฐ์‚ฐ์ž - ์‚ฐ์ˆ  ์—ฐ์‚ฐ์ž
        ```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
        ```
        
        ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/92ca969d-37e2-48be-bde6-834fd32823c6/Untitled.png)
        
    - ๋ฌธ์ž์—ด ์—ฐ์‚ฐ์ž
        - ๋”ํ•˜๊ธฐ
            - ์ˆซ์ž
                
                ```jsx
                let num;
                
                    //๋”ํ•˜๊ธฐ ์—ฐ์‚ฐ์ž
                    num = 11 + 22; //์ˆซ์ž + ์ˆซ์ž = 33์ˆซ์ž
                    console.log(num, typeof num);
                ```
                
                ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/ffc5d6f5-5dc9-4cbb-a2af-079a37503ddc/Untitled.png)
                
            - ๋ฌธ์ž์—ด
                
                ```jsx
                let num;
                
                    //๋”ํ•˜๊ธฐ ์—ฐ์‚ฐ์ž
                    num = `์žฌ๋ฏธ์žˆ๋Š”!` + `์ฆ๊ฑฐ์šด!` + `์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ` + `!!`;
                    //๋ฌธ์ž์—ด + ๋ฌธ์ž์—ด + ๋ฌธ์ž์—ด = string
                    console.log(num, typeof num);
                ```
                
                ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/be3277bb-d46f-4d4b-a996-8d0ca5484bc0/Untitled.png)
                
            - ์ˆซ์ž ๋ฌธ์ž์—ด
                
                ```jsx
                let num;
                
                    //๋”ํ•˜๊ธฐ ์—ฐ์‚ฐ์ž
                    num = "11" + "22";
                    console.log(num, typeof num);
                ```
                
                ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/4520363d-aedc-44a7-bb50-43034b920d15/Untitled.png)
                
            - ๋ฌธ์ž์—ด + ์ˆซ์ž
                
                ```jsx
                let num;
                
                    //๋”ํ•˜๊ธฐ ์—ฐ์‚ฐ์ž
                    num = '11' + 22;
                    num = 11 + `22`;
                    console.log(num, typeof num);
                ```
                
                ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/85576fc0-894f-48cd-b518-e872c641203f/Untitled.png)
                
        - ๋นผ๊ธฐ
            - ์ˆซ์ž
                
                ```jsx
                let num;
                
                    //๋นผ๊ธฐ ์—ฐ์‚ฐ์ž
                    num = 11 - 22;
                    console.log(num, typeof num);
                ```
                
                ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/71da3b40-6494-4801-a4bb-206cfa548b7c/Untitled.png)
                
            - ๋ฌธ์ž์—ด
                
                ```jsx
                let num;
                
                    //๋นผ๊ธฐ ์—ฐ์‚ฐ์ž
                    num = '์˜ค๋Š˜์€' - '์‹ ๋‚˜๋Š”' - '์ˆ˜์š”์ผ!';
                    console.log(num, typeof num);
                ```
                
                ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/e7ba0d3f-669f-4fec-803e-799dd31e11c0/Untitled.png)
                
            - (์ˆซ์žํ˜•) ๋ฌธ์ž์—ด
                - ์ˆซ์žํ˜• ๋ฌธ์ž์—ด์˜ ๊ฒฝ์šฐ ์ž๋™ ๋ณ€ํ™˜ํ•˜์—ฌ ์—ฐ์‚ฐ
                
                ```jsx
                let num;
                
                    //๋นผ๊ธฐ ์—ฐ์‚ฐ์ž
                    num = '11' - 22;
                    console.log(num, typeof num);
                ```
                
                ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/9353b23a-8658-4039-8e16-8cb63f56c182/Untitled.png)
                
            - ์ˆซ์ž-๋ฌธ์ž์—ด
                
                ```jsx
                let num;
                
                    //๋นผ๊ธฐ ์—ฐ์‚ฐ์ž
                    num = 11 - "22"
                    console.log(num, typeof num);
                ```
                
                ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/9bf4f44a-f4f5-4a67-8ba0-53454157ab2d/Untitled.png)
                
        - ๊ณฑํ•˜๊ธฐ,๋‚˜๋ˆ„๊ธฐ,๋‚˜๋จธ์ง€๊ฐ’,๊ฑฐ๋“ญ์ œ๊ณฑ
            
            ```jsx
            let num;
            
                //๊ณฑํ•˜๊ธฐ,๋‚˜๋ˆ„๊ธฐ,๋‚˜๋จธ์ง€๊ฐ’,๊ฑฐ๋“ญ์ œ๊ณฑ ์—ฐ์‚ฐ์ž
                num = '์˜ค๋Š˜์€' * '๊ณต๋ถ€๊ฐ€' * '์žฌ๋ฐŒ์–ด์š”!';
                num = '์˜ค๋Š˜์€' / '๊ณต๋ถ€๊ฐ€' ** '์žฌ๋ฐŒ์–ด์š”!';
                console.log(num, typeof num);
            ```
            
            ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/8d25ac1a-e0c0-45a6-89fa-426a4e922baf/Untitled.png)
            
            ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/cd4f4c95-6811-42a7-8e9b-cb035866d7a1/Untitled.png)
            
            ```jsx
            let num;
            
                //๊ณฑํ•˜๊ธฐ,๋‚˜๋ˆ„๊ธฐ,๋‚˜๋จธ์ง€๊ฐ’,๊ฑฐ๋“ญ์ œ๊ณฑ ์—ฐ์‚ฐ์ž
                num = '11' * 22; //์ž๋™ ๋ณ€ํ™˜ํ•˜์—ฌ ์—ฐ์‚ฐ
                num = '11' ** "2";
                console.log(num, typeof num);
            ```
            
            ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/96ded5b0-7914-43b0-a0e1-acfd8092fc4d/Untitled.png)
            
            ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/cd4f4c95-6811-42a7-8e9b-cb035866d7a1/Untitled.png)
            
        - ๊ธฐํƒ€
            
            ```
            let sum = 11 + 22 + '์˜ ํ•ฉ์€?'; // 33์˜ ํ•ฉ์€? string (์ˆซ์ž+์ˆซ์ž)->์ˆซ์ž+๋ฌธ์ž->๋ฌธ์ž์—ด
                sum = '11' + 22 + '์˜ ํ•ฉ์€?';
                console.log(sum, typeof sum);
            ```
            
             *(์ˆซ์ž+์ˆซ์ž)->์ˆซ์ž+๋ฌธ์ž->๋ฌธ์ž์—ด*
            
            ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/a1833183-d9cd-45a3-bb2f-486dd4793d16/Untitled.png)
            
            (๋ฌธ์ž์—ด+๋ฌธ์ž์—ด)โ†’๋ฌธ์ž์—ด=๋ฌธ์ž์—ดโ†’๋ฌธ์ž์—ด
            
            ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/21295b12-25c6-4396-be2a-ebde226098de/Untitled.png)
            
            ```
            let sum = '๋‹ค์Œ ์ˆ˜์˜ ํ•ฉ์€?' + 11 + 22;
                console.log(sum, typeof sum);
            ```
            
            *(๋ฌธ์ž์—ด+์ˆซ์ž)โ†’ ๋ฌธ์ž์—ด+์ˆซ์ž โ†’ ๋ฌธ์ž์—ด*
            
            ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/f51abd27-8ebc-4de8-b2f9-c03155e06d8b/Untitled.png)
            
    - ์ฆ๊ฐ ์—ฐ์‚ฐ์ž
        - ๋ณ€์ˆ˜์˜ ๊ฐ’์„ 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
            ```
            
            ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/a2bcfee5-61a2-461e-b51a-fd5627c827bc/Untitled.png)
            
    - ๋Œ€์ž…(ํ• ๋‹น) ์—ฐ์‚ฐ์ž
        - *= ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์šฐ๋ณ€์˜ ์ˆซ์ž๋งŒํผ ์—ฐ์‚ฐํ•˜์—ฌ ์ขŒ๋ณ€์˜ ๋ณ€์ˆ˜์— '์ƒˆ๋กœ์šด ๊ฐ’์œผ๋กœ ๊ฐฑ์‹ '.*
        - *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}`);
        ```
        
        ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/5c07ae62-4e40-4738-8afb-6d8c9242990e/Untitled.png)
        
    - ๋น„๊ต ์—ฐ์‚ฐ์ž
        
        ```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}`);
                }
            ```
            
            ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/ac975789-bd02-4ba3-b46b-b4296acf93aa/Untitled.png)
            
    - 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);
        ```
        
        ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/daf23ec7-d431-4982-a8ae-0f15ed530e1a/Untitled.png)
        
    - 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)
                    );
                ```
                
                ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/266c705c-26a7-4ec6-973d-f3d9f97c7c37/Untitled.png)
                
        - 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))
            ```
            
            ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/0335c03b-922f-4b5f-80c0-b08e52d1040e/Untitled.png)
            
            - ์ฒซ๋ฒˆ์งธ ์•„์ดํ…œ๋งŒ ์ถœ๋ ฅ
            
            ```html
            //json ํŒŒ์ผ ์š”์ฒญ 
                fetch('https://dummyjson.com/users')
                  //json ํŒŒ์ผ์„ js ๊ฐ์ฒด๋กœ ๋ณ€ํ™˜
                  //,(์„ธ๋ฏธ์ฝœ๋ก )์„ ์‚ฌ์šฉํ•˜๋ฉด ์•ˆ๋œ๋‹ค
                  .then(resolve => resolve.json())
                  //์ถœ๋ ฅ
                  .then(item => console.log(item.users[0]))
            ```
            
            ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/cff70770-c937-47b6-a573-f8316b29a587/Untitled.png)
            
            - ์‚ฌ์šฉ์ž์˜ ์ •๋ณด ์ถœ๋ ฅ
                
                ```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))
                ```
                
                ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/7801a136-ca0a-4d1a-9b99-7e8b5046a0e6/Untitled.png)
                
        - 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();
                ```
                
                ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/e5af85cd-1024-4c88-bc7a-b076b42c735f/Untitled.png)
                
            - 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));
                ```
                
                ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/f21ef9f4-f294-42a5-ba0b-4705bb476909/Untitled.png)
                
                ```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>
                ```
                
                ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/3d55206d-d19f-4557-9ca2-c017c4604549/Untitled.png)
                
            - 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}` / ์†Œ๋ฌธ์ž ๋Œ€๋ฌธ์ž ๊ตฌ๋ณ„ ํ•„์ˆ˜
                
                ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/3d90d12c-7373-496e-8e9e-cf9932191d4f/Untitled.png)
                
                ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/30df2c9b-fdd1-408a-8f10-9e6a7f227449/Untitled.png)
                
                ```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>
                    ```
                    
                
                ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/375d7237-e814-43cf-bbd5-892fc81829e2/Untitled.png)
                
                โ†’ ์ƒˆ๋กœ ๊ณ ์นจ ํ•  ๋•Œ๋งˆ๋‹ค 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>
    ```
    
    ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/45b0a03c-a9b7-430d-920e-8de6e9a9a0ea/Untitled.png)
    
- ๊ตฌ์กฐ ๋ถ„ํ•ด ํ• ๋‹น
    - ๊ตฌ์กฐ๋ถ„ํ•ด, ๊ตฌ์กฐ๋ถ„ํ•ดํ• ๋‹น, ๋น„๊ตฌ์กฐํ• ๋‹น ๋“ฑ์œผ๋กœ ๋ถˆ๋ฆผ
    
    ```
    <!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>
    ```
    
    ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/69641251-06ee-4a1a-9aa7-d7f2e6b3343c/Untitled.png)
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>
        ```
        
        ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/fd3db29b-5f94-4a5a-8a9a-b59771b74280/Untitled.png)
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>
    ```
    
    ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/9aa7db93-13f9-473c-8667-e7fb3b9159c0/Untitled.png)
์‚ผํ•ญ์—ฐ์‚ฐ์ž + ๋…ผ๋ฆฌ์—ฐ์‚ฐ์ž
    ```
    <!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>
    ```
    
    ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/a669081c-5776-46fa-897c-e787e4b50139/3e685b00-325c-4aa4-8a59-6c11222dc54d/Untitled.png)
์˜ˆ์‹œ์ž‘์—…
- 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์„ ๋„˜๊ธด๋‹ค`);
        ```