Today I Learned-05

์ก์ด๐Ÿฅจยท2022๋…„ 11์›” 18์ผ
0

๊ฐœ๋ฐœ์ผ์ง€

๋ชฉ๋ก ๋ณด๊ธฐ
12/38

2022-11-18 (๊ธˆ)

๐Ÿค JavaScript์˜ ์ž๋ฃŒํ˜•๊ณผ JavaScript๋งŒ์˜ ํŠน์„ฑ์€ ๋ฌด์—‡์ผ๊นŒ ?
  • JavaScript๋Š” ๋Š์Šจํ•œ ํƒ€์ž…(loosely typed)์˜ ๋™์ (dynamic) ์–ธ์–ด. ๋Š์Šจํ•œ ํƒ€์ž…์€ ํƒ€์ž… ์—†์ด ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๋Š” ๊ฒƒ. JavaScript์˜ ๋ณ€์ˆ˜๋Š” ์–ด๋–ค ํŠน์ • ํƒ€์ž…๊ณผ ์—ฐ๊ฒฐ๋˜์ง€ ์•Š์œผ๋ฉฐ, ๋ชจ๋“  ํƒ€์ž…์˜ ๊ฐ’์œผ๋กœ ํ• ๋‹น (๋ฐ ์žฌํ• ๋‹น) ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

  • JavaScript ํ˜•๋ณ€ํ™˜
    ํ•จ์ˆ˜์™€ ์—ฐ์‚ฐ์ž์— ์ „๋‹ฌ๋˜๋Š” ๊ฐ’์€ ๋Œ€๋ถ€๋ถ„ ์ ์ ˆํ•œ ์ž๋ฃŒํ˜•์œผ๋กœ ์ž๋™ ๋ณ€ํ™˜๋ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฐ ๊ณผ์ •์„ "ํ˜• ๋ณ€ํ™˜(type conversion)"์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

  • ==, ===
    ==๋Š” === ์™€ ๊ฐ™์€ ๊ธฐ๋Šฅ์„ ํ•˜๋Š” ์—ฐ์‚ฐ์ž์ด๋‚˜, ==๋Š” ๋ฒ„๊ทธ๋ฅผ ์œ ๋ฐœํ•˜๊ธฐ ์‰ฌ์šด ๋ฌธ๋ฒ•์œผ๋กœ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๊ฒƒ์„ ๊ถŒ์žฅํ•˜๊ณ  '==='์„ ์‚ฌ์šฉํ•˜๋„๋ก ๋ฒ„๋ฆ‡์„ ๋“ค์ด๋Š”๊ฒŒ ์ข‹๋‹ค.

  • ๋Š์Šจํ•œ ํƒ€์ž…(loosely typed)์˜ ๋™์ (dynamic) ์–ธ์–ด์˜ ๋ฌธ์ œ์ , ๋ณด์™„ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•
    ์‹คํ–‰ ๋„์ค‘์— ๋ณ€์ˆ˜์— ์˜ˆ์ƒ์น˜ ๋ชปํ•œ ํƒ€์ž…์ด ๋“ค์–ด์™€ ํƒ€์ž…์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Œ. ๋™์ ํƒ€์ž… ์–ธ์–ด๋Š” ๋Ÿฐํƒ€์ž„ ์‹œ ํ™•์ธํ•  ์ˆ˜ ๋ฐ–์— ์—†๊ธฐ ๋•Œ๋ฌธ์—, ์ฝ”๋“œ๊ฐ€ ๊ธธ๊ณ  ๋ณต์žกํ•ด์งˆ ๊ฒฝ์šฐ ํƒ€์ž… ์—๋Ÿฌ๋ฅผ ์ฐพ๊ธฐ๊ฐ€ ์–ด๋ ค์›Œ ์ง‘๋‹ˆ๋‹ค.
    ์ด๋Ÿฌํ•œ ๋ถˆํŽธํ•จ์„ ํ•ด์†Œํ•˜๊ธฐ ์œ„ํ•ด ์ •์  ํƒ€์ž… ์ฒดํฌ์™€ ๊ฐ•๋ ฅํ•œ ๋ฌธ๋ฒ•์„ ์ถ”๊ฐ€ํ•œ TypeScript๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ Flow ๋“ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ณด์™„ ๊ฐ€๋Šฅ

  • undefined์™€ null์˜ ๋ฏธ์„ธํ•œ ์ฐจ์ด๋“ค์„ ๋น„๊ตํ•ด๋ณด์„ธ์š”.
    ๊ฐ’์„ ํ• ๋‹นํ•˜์ง€ ์•Š์€ ๋ณ€์ˆ˜๋Š” undefined ๊ฐ’์„ ๊ฐ€์ง‘๋‹ˆ๋‹ค.
    ์ž๋ฃŒํ˜•์ด ์—†๋Š” ์ƒํƒœ.

    null์€ JavaScript์˜ ์›์‹œ ๊ฐ’ ์ค‘ ํ•˜๋‚˜๋กœ, ์–ด๋–ค ๊ฐ’์ด ์˜๋„์ ์œผ๋กœ ๋น„์–ด์žˆ์Œ์„ ํ‘œํ˜„ํ•˜๋ฉฐ ๋ถˆ๋ฆฌ์–ธ ์—ฐ์‚ฐ์—์„œ๋Š” ๊ฑฐ์ง“์œผ๋กœ ์ทจ๊ธ‰. ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ  ๋นˆ ๊ฐ’์„ ํ• ๋‹นํ•œ ์ƒํƒœ(๋นˆ ๊ฐ์ฒด)์ด๋‹ค


    ๐Ÿค JavaScript ๊ฐ์ฒด์™€ ๋ถˆ๋ณ€์„ฑ์ด๋ž€ ?
  • ๊ธฐ๋ณธํ˜• ๋ฐ์ดํ„ฐ์™€ ์ฐธ์กฐํ˜• ๋ฐ์ดํ„ฐ

    ๊ธฐ๋ณธํ˜• ๋ฐ์ดํ„ฐ๊ฐ€ ํ• ๋‹น๋œ ๋ณ€์ˆ˜๋Š” ์ž๊ธฐ ์ž์‹ ๋งŒ์˜ ๊ณ ์œ  ํ•œ ๊ฐ’์„ ๊ฐ€์ง„๋‹ค.
    ๊ธฐ๋ณธํ˜• ๋ฐ์ดํ„ฐ๋Š” ๋ณ€๊ฒฝ ๋ถˆ๊ฐ€๋Šฅํ•œ ๊ฐ’์œผ๋กœ ํ•œ ๋ฒˆ ์ƒ์„ฑ๋œ ๊ธฐ๋ณธํ˜• ๋ฐ์ดํ„ฐ๋Š” ๋ณ€๊ฒฝํ•  ์ˆ˜ ์—†๋‹ค. (๋ถˆ๋ณ€์„ฑ)
    ๊ธฐ๋ณธํ˜• ๋ฐ์ดํ„ฐ๋ฅผ ํ• ๋‹นํ•œ ๋ณ€์ˆ˜๋Š” ์žฌํ• ๋‹น ์ด์™ธ์—๋Š” ๋ณ€์ˆ˜๊ฐ’์„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์—†๋‹ค.
    call-by-value (๊ฐ’์— ์˜ํ•œ ํ˜ธ์ถœ)์˜ ํ˜•ํƒœ๋กœ ์ „๋‹ฌ๋œ๋‹ค.
    <๊ธฐ๋ณธํ˜• ์ข…๋ฅ˜>
    -Number
    -String
    -Boolean
    -null
    -undefined
    -Symbol (ES6 ์ถ”๊ฐ€๋จ)

  1. ์ฐธ์กฐํ˜• (Reference Type)
    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค.
    ์ฐธ์กฐํ˜• ๋ฐ์ดํ„ฐ๋Š” ๋ณ€์ˆ˜์— ๊ฐ’์„ ์ง์ ‘ ์ €์žฅํ•˜์ง€ ์•Š๋Š”๋‹ค.
    ๋ณ€์ˆ˜์— ์ €์žฅ๋˜๋Š” ๊ฒƒ์€ ๋ฉ”๋ชจ๋ฆฌ ์•ˆ์—์„œ ๊ฐ์ฒด์˜ ์œ„์น˜๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋Š” ํฌ์ธํ„ฐ ์ด๋‹ค.
    call-by-reference (์ฐธ์กฐ์— ์˜ํ•œ ํ˜ธ์ถœ)๋กœ ์ „๋‹ฌ๋œ๋‹ค.
    <์ฐธ์กฐํ˜• ์ข…๋ฅ˜>
    -Array
    -Function
    -RegExp
    -Set / WeakSet
    -Map / WeakMap
  • ๋ถˆ๋ณ€ ๊ฐ์ฒด๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•
    ๊ทธ๋Ÿผ '๋ถˆ๋ณ€ ๊ฐ์ฒด'๋ž€? '๋ณ€ํ•˜์ง€ ์•Š๋Š” ๊ฐ์ฒด' ์ฆ‰ ์ด๋ฏธ ํ• ๋‹น๋œ ๊ฐ์ฒด๊ฐ€ ๋ณ€ํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๋œป์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.
    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋ถˆ๋ณ€ ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์€ ๊ธฐ๋ณธ์ ์œผ๋กœ 2๊ฐ€์ง€ ์ธ๋ฐ const์™€ Object.freeze()๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

    const๋Š”,
    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ‚ค์›Œ๋“œ ์ค‘ ํ•˜๋‚˜์ธ const์ด๋‹ค. ES6๋ฌธ๋ฒ•๋ถ€ํ„ฐ let๊ณผ const๋ฅผ ์ง€์›ํ•œ๋‹ค. const ํ‚ค์›Œ๋“œ๋Š” ๋ณ€์ˆ˜๋ฅผ ์ƒ์ˆ˜๋กœ ์„ ์–ธํ•  ์ˆ˜ ์žˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ ์ƒ์ˆ˜๋กœ ์„ ์–ธ๋œ ๋ณ€์ˆ˜๋Š” ๊ฐ’์„ ๋ฐ”๊พธ์ง€ ๋ชปํ•˜๋Š” ๊ฒƒ์œผ๋กœ ์•Œ๋ ค์ ธ ์žˆ๋‹ค.

    Object.freeze()๋Š”,
    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ œ๊ณตํ•˜๋Š” ๋ฉ”์†Œ๋“œ์ธ Object.freeze() ๋ฉ”์†Œ๋“œ์ด๋‹ค. ๊ณต์‹ ๋ฌธ์„œ์—์„œ๋Š” "๊ฐ์ฒด๋ฅผ ๋™๊ฒฐํ•˜๊ธฐ ์œ„ํ•œ ๋ฉ”์†Œ๋“œ" ๋ผ๊ณ  ์ ํ˜€์žˆ๋‹ค.

  • ์–•์€ ๋ณต์‚ฌ์™€ ๊นŠ์€ ๋ณต์‚ฌ
    ๊นŠ์€ ๋ณต์‚ฌ(Deep Copy)
    ๊ฐ์ฒด๋ฅผ ๋ณต์‚ฌํ•  ๋•Œ ํ•ด๋‹น ๊ฐ์ฒด์™€ ์ธ์Šคํ„ด์Šค ๋ณ€์ˆ˜๊นŒ์ง€ ๋ณต์‚ฌํ•œ๋‹ค. ๋ฐ์ดํ„ฐ ์ฐธ์กฐ๊ฐ€ ์•„๋‹Œ ๊ฐ์ฒด์˜ ํ˜•ํƒœ๋ฅผ ๊ทธ๋Œ€๋กœ ๋ณต์‚ฌํ•จ์œผ๋กœ์จ ํ•œ ๊ฐ์ฒด๊ฐ€ ๋ณ€๊ฒฝ๋˜์–ด๋„ ๋‹ค๋ฅธ ๊ฐ์ฒด์˜ ๋ฐ์ดํ„ฐ์—๋Š” ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๋Š”๋‹ค.

    ๊นŠ์€ ๋ณต์‚ฌ(Deep Copy)
    ๊ฐ์ฒด๋ฅผ ๋ณต์‚ฌํ•  ๋•Œ ํ•ด๋‹น ๊ฐ์ฒด์™€ ์ธ์Šคํ„ด์Šค ๋ณ€์ˆ˜๊นŒ์ง€ ๋ณต์‚ฌํ•œ๋‹ค. ๋ฐ์ดํ„ฐ ์ฐธ์กฐ๊ฐ€ ์•„๋‹Œ ๊ฐ์ฒด์˜ ํ˜•ํƒœ๋ฅผ ๊ทธ๋Œ€๋กœ ๋ณต์‚ฌํ•จ์œผ๋กœ์จ ํ•œ ๊ฐ์ฒด๊ฐ€ ๋ณ€๊ฒฝ๋˜์–ด๋„ ๋‹ค๋ฅธ ๊ฐ์ฒด์˜ ๋ฐ์ดํ„ฐ์—๋Š” ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๋Š”๋‹ค.


๐Ÿค ํ˜ธ์ด์ŠคํŒ…๊ณผ TDZ๋Š” ๋ฌด์—‡์ผ๊นŒ ?
  • ์Šค์ฝ”ํ”„, ํ˜ธ์ด์ŠคํŒ…, TDZ
    -์Šค์ฝ”ํ”„ : ๋ณ€์ˆ˜๋‚˜ ํ•จ์ˆ˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ์œ„์น˜
    -ํ˜ธ์ด์ŠคํŒ… : ์ธํ„ฐํ”„๋ฆฌํ„ฐ๊ฐ€ ๋ณ€์ˆ˜์™€ ํ•จ์ˆ˜์˜ ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์„ ์„ ์–ธ ์ „์— ๋ฏธ๋ฆฌ ํ• ๋‹นํ•˜๋Š” ๊ฒƒ.
    -TDZ : ์ฐธ์กฐ ์˜ค๋ฅ˜๊ฐ€ ๋‚˜๋Š” ๊ตฌ๊ฐ„์ธ ์Šค์ฝ”ํ”„ ์‹œ์ž‘์ง€์ ๋ถ€ํ„ฐ ์ดˆ๊ธฐํ™” ์ง€์ ๊นŒ์ง€์˜ ๊ตฌ๊ฐ„. ์„ ์–ธ ์ „์— ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ๋น„ํ—ˆ์šฉํ•˜๋Š” ๊ฐœ๋…์ƒ์˜ ๊ณต๊ฐ„์ด๋‹ค.

  • ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ๊ณผ ํ•จ์ˆ˜ ํ‘œํ˜„์‹์—์„œ ํ˜ธ์ด์ŠคํŒ… ๋ฐฉ์‹์˜ ์ฐจ์ด
    -ํ•จ์ˆ˜ ์„ ์–ธ์‹์€ ํ˜ธ์ด์ŠคํŒ… ๋˜์ง€๋งŒ ํ•จ์ˆ˜ ํ‘œํ˜„์‹์€ ํ˜ธ์ด์ŠคํŒ… ๋˜์ง€ ์•Š์œผ๋ฏ€๋กœ ์ •์˜๋œ ๋ฒ”์œ„์—์„œ ๋กœ์ปฌ ๋ณ€์ˆ˜์˜ ๋ณต์‚ฌ๋ณธ์„ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ๋‹ค.

  • ์—ฌ๋Ÿฌ๋ถ„์ด ๋งŽ์ด ์ž‘์„ฑํ•ด์˜จ let, const, var, function ์ด ์–ด๋–ค ์›๋ฆฌ๋กœ ์‹คํ–‰๋˜๋Š”์ง€ ์•Œ ์ˆ˜ ์žˆ์–ด์š”.

  • ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์™€ ์ฝœ ์Šคํƒ
    -์‹คํ–‰ ์ปจํ…์ŠคํŠธ : ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋˜๋Š” ํ™˜๊ฒฝ์„ ์˜๋ฏธ
    -์ฝœ ์Šคํƒ : ์ฝœ ์Šคํƒ์€ ์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋˜๋ฉด์„œ ์ƒ์„ฑ๋˜๋Š” ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋ฅผ ์ €์žฅํ•˜๋Š” ์ž๋ฃŒ๊ตฌ์กฐ

  • ์Šค์ฝ”ํ”„ ์ฒด์ธ, ๋ณ€์ˆ˜ ์€๋‹‰ํ™”
    -์Šค์ฝ”ํ”„ ์ฒด์ธ : ์Šค์ฝ”ํ”„ ์ฒด์ธ์— ์‹๋ณ„์ž๊ฐ€ ์—†์œผ๋ฉด ์ƒ์œ„ ์Šค์ฝ”ํ”„์—์„œ ๋‹ค์‹œ ์ฐพ์•„ ๋‚˜๊ฐ„๋‹ค.
    -๋ณ€์ˆ˜ ์€๋‹‰ํ™” : ์ง์ ‘์ ์œผ๋กœ ๋ณ€๊ฒฝ๋˜๋ฉด ์•ˆ ๋œ๋Š ๋ณ€์ˆ˜์— ๋Œ€ํ•œ ์ ‘๊ทผ์„ ๋ง‰๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค.


๐Ÿค ์ฝ˜์†”์— ์ฐํž b ๊ฐ’์„ ์˜ˆ์ƒํ•ด๋ณด๊ณ , ์–ด๋””์—์„œ ์„ ์–ธ๋œ โ€œbโ€๊ฐ€ ๋ช‡๋ฒˆ์งธ ๋ผ์ธ์—์„œ ํ˜ธ์ถœํ•œ console.log์— ์ฐํ˜”๋Š”์ง€, ์™œ ๊ทธ๋Ÿฐ์ง€ ์„ค๋ช…ํ•ด๋ณด์„ธ์š”. ์ฃผ์„์„ ํ’€์–ด๋ณด๊ณ  ์˜ค๋ฅ˜๊ฐ€ ๋‚œ๋‹ค๋ฉด ์™œ ์˜ค๋ฅ˜๊ฐ€ ๋‚˜๋Š” ์ง€ ์„ค๋ช…ํ•˜๊ณ  ์˜ค๋ฅ˜๋ฅผ ์ˆ˜์ •ํ•ด๋ณด์„ธ์š”.
<let b = 1;
function hi () {
const a = 1;
let b = 100;
b++;
console.log(a,b);
}

//console.log(a);

console.log(b);
hi();
console.log(b);

ํ•จ์ˆ˜์˜ ์Šค์ฝ”ํ”„ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์ค‘๊ด„ํ˜ธ์•ˆ์— ์ฝ˜์†”๋กœ๊ทธ๊ฐ€ ์—†์–ด์„œ ๋ฐ–์— ์žˆ๋Š” let b = 1์˜ ๊ฐ’์ด ๋ฉ๋‹ˆ๋‹ค.

๐Ÿค๋‘ ๊ฐ’์ด ๋‹ค๋ฅธ ์ด์œ ๋ฅผ ์„ค๋ช…ํ•ด๋ณด์„ธ์š”.

 1 == "1";
 1 === "1";

=> '=='๋Š” ์ž๋ฃŒํ˜•์ด ๋‹ฌ๋ผ๋„ ์–ด๋–ป๊ฒŒ๋“  ๋ณ€ํ™˜์„ ํ•˜๊ณ  ๋‚˜๋ฉด ๊ฐ’์ด ๊ฐ™์•„์ ธ์„œ true๋‹ค.
=> '==='์€ ํƒ€์ž…๊นŒ์ง€ ํ™•์ธ์„ ํ•ด์ค˜์„œ 1๊ณผ "1" ์„ ๋‹ค๋ฅด๊ฒŒ ์ธ์‹ํ•ด์„œ false๊ฐ€ ๋‚˜์˜จ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€