2022-11-18 (๊ธ)
๐ค JavaScript์ ์๋ฃํ๊ณผ JavaScript๋ง์ ํน์ฑ์ ๋ฌด์์ผ๊น ?JavaScript๋ ๋์จํ ํ์ (loosely typed)์ ๋์ (dynamic) ์ธ์ด. ๋์จํ ํ์ ์ ํ์ ์์ด ๋ณ์๋ฅผ ์ ์ธํ๋ ๊ฒ. JavaScript์ ๋ณ์๋ ์ด๋ค ํน์ ํ์ ๊ณผ ์ฐ๊ฒฐ๋์ง ์์ผ๋ฉฐ, ๋ชจ๋ ํ์ ์ ๊ฐ์ผ๋ก ํ ๋น (๋ฐ ์ฌํ ๋น) ๊ฐ๋ฅํฉ๋๋ค.
JavaScript ํ๋ณํ
ํจ์์ ์ฐ์ฐ์์ ์ ๋ฌ๋๋ ๊ฐ์ ๋๋ถ๋ถ ์ ์ ํ ์๋ฃํ์ผ๋ก ์๋ ๋ณํ๋ฉ๋๋ค. ์ด๋ฐ ๊ณผ์ ์ "ํ ๋ณํ(type conversion)"์ด๋ผ๊ณ ํฉ๋๋ค.
==, ===
==๋ === ์ ๊ฐ์ ๊ธฐ๋ฅ์ ํ๋ ์ฐ์ฐ์์ด๋, ==๋ ๋ฒ๊ทธ๋ฅผ ์ ๋ฐํ๊ธฐ ์ฌ์ด ๋ฌธ๋ฒ์ผ๋ก ์ฌ์ฉํ์ง ์๋๊ฒ์ ๊ถ์ฅํ๊ณ '==='์ ์ฌ์ฉํ๋๋ก ๋ฒ๋ฆ์ ๋ค์ด๋๊ฒ ์ข๋ค.
๋์จํ ํ์
(loosely typed)์ ๋์ (dynamic) ์ธ์ด์ ๋ฌธ์ ์ , ๋ณด์ํ ์ ์๋ ๋ฐฉ๋ฒ
์คํ ๋์ค์ ๋ณ์์ ์์์น ๋ชปํ ํ์
์ด ๋ค์ด์ ํ์
์๋ฌ๊ฐ ๋ฐ์ํ ์ ์์. ๋์ ํ์
์ธ์ด๋ ๋ฐํ์ ์ ํ์ธํ ์ ๋ฐ์ ์๊ธฐ ๋๋ฌธ์, ์ฝ๋๊ฐ ๊ธธ๊ณ ๋ณต์กํด์ง ๊ฒฝ์ฐ ํ์
์๋ฌ๋ฅผ ์ฐพ๊ธฐ๊ฐ ์ด๋ ค์ ์ง๋๋ค.
์ด๋ฌํ ๋ถํธํจ์ ํด์ํ๊ธฐ ์ํด ์ ์ ํ์
์ฒดํฌ์ ๊ฐ๋ ฅํ ๋ฌธ๋ฒ์ ์ถ๊ฐํ TypeScript๋ฅผ ์ฌ์ฉํ๊ฑฐ๋ Flow ๋ฑ์ ์ฌ์ฉํ์ฌ ๋ณด์ ๊ฐ๋ฅ
undefined์ null์ ๋ฏธ์ธํ ์ฐจ์ด๋ค์ ๋น๊ตํด๋ณด์ธ์.
๊ฐ์ ํ ๋นํ์ง ์์ ๋ณ์๋ undefined ๊ฐ์ ๊ฐ์ง๋๋ค.
์๋ฃํ์ด ์๋ ์ํ.
null์ JavaScript์ ์์ ๊ฐ ์ค ํ๋๋ก, ์ด๋ค ๊ฐ์ด ์๋์ ์ผ๋ก ๋น์ด์์์ ํํํ๋ฉฐ ๋ถ๋ฆฌ์ธ ์ฐ์ฐ์์๋ ๊ฑฐ์ง์ผ๋ก ์ทจ๊ธ. ๋ณ์๋ฅผ ์ ์ธํ๊ณ ๋น ๊ฐ์ ํ ๋นํ ์ํ(๋น ๊ฐ์ฒด)์ด๋ค
๊ธฐ๋ณธํ ๋ฐ์ดํฐ์ ์ฐธ์กฐํ ๋ฐ์ดํฐ
๊ธฐ๋ณธํ ๋ฐ์ดํฐ๊ฐ ํ ๋น๋ ๋ณ์๋ ์๊ธฐ ์์ ๋ง์ ๊ณ ์ ํ ๊ฐ์ ๊ฐ์ง๋ค.
๊ธฐ๋ณธํ ๋ฐ์ดํฐ๋ ๋ณ๊ฒฝ ๋ถ๊ฐ๋ฅํ ๊ฐ์ผ๋ก ํ ๋ฒ ์์ฑ๋ ๊ธฐ๋ณธํ ๋ฐ์ดํฐ๋ ๋ณ๊ฒฝํ ์ ์๋ค. (๋ถ๋ณ์ฑ)
๊ธฐ๋ณธํ ๋ฐ์ดํฐ๋ฅผ ํ ๋นํ ๋ณ์๋ ์ฌํ ๋น ์ด์ธ์๋ ๋ณ์๊ฐ์ ๋ณ๊ฒฝํ ์ ์๋ค.
call-by-value (๊ฐ์ ์ํ ํธ์ถ)์ ํํ๋ก ์ ๋ฌ๋๋ค.
<๊ธฐ๋ณธํ ์ข
๋ฅ>
-Number
-String
-Boolean
-null
-undefined
-Symbol (ES6 ์ถ๊ฐ๋จ)
ํฌ์ธํฐ
์ด๋ค.๋ถ๋ณ ๊ฐ์ฒด๋ฅผ ๋ง๋๋ ๋ฐฉ๋ฒ
๊ทธ๋ผ '๋ถ๋ณ ๊ฐ์ฒด'๋? '๋ณํ์ง ์๋ ๊ฐ์ฒด' ์ฆ ์ด๋ฏธ ํ ๋น๋ ๊ฐ์ฒด๊ฐ ๋ณํ์ง ์๋๋ค๋ ๋ป์ ๊ฐ์ง๊ณ ์๋ค.
์๋ฐ์คํฌ๋ฆฝํธ์์ ๋ถ๋ณ ๊ฐ์ฒด๋ฅผ ๋ง๋ค ์ ์๋ ๋ฐฉ๋ฒ์ ๊ธฐ๋ณธ์ ์ผ๋ก 2๊ฐ์ง ์ธ๋ฐ const์ Object.freeze()๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด๋ค.
const๋,
์๋ฐ์คํฌ๋ฆฝํธ ํค์๋ ์ค ํ๋์ธ const์ด๋ค. ES6๋ฌธ๋ฒ๋ถํฐ let๊ณผ const๋ฅผ ์ง์ํ๋ค. const ํค์๋๋ ๋ณ์๋ฅผ ์์๋ก ์ ์ธํ ์ ์๋ค. ์ผ๋ฐ์ ์ผ๋ก ์์๋ก ์ ์ธ๋ ๋ณ์๋ ๊ฐ์ ๋ฐ๊พธ์ง ๋ชปํ๋ ๊ฒ์ผ๋ก ์๋ ค์ ธ ์๋ค.
Object.freeze()๋,
์๋ฐ์คํฌ๋ฆฝํธ์์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ๊ณตํ๋ ๋ฉ์๋์ธ Object.freeze() ๋ฉ์๋์ด๋ค. ๊ณต์ ๋ฌธ์์์๋ "๊ฐ์ฒด๋ฅผ ๋๊ฒฐํ๊ธฐ ์ํ ๋ฉ์๋" ๋ผ๊ณ ์ ํ์๋ค.
์์ ๋ณต์ฌ์ ๊น์ ๋ณต์ฌ
๊น์ ๋ณต์ฌ(Deep Copy)
๊ฐ์ฒด๋ฅผ ๋ณต์ฌํ ๋ ํด๋น ๊ฐ์ฒด์ ์ธ์คํด์ค ๋ณ์๊น์ง ๋ณต์ฌํ๋ค. ๋ฐ์ดํฐ ์ฐธ์กฐ๊ฐ ์๋ ๊ฐ์ฒด์ ํํ๋ฅผ ๊ทธ๋๋ก ๋ณต์ฌํจ์ผ๋ก์จ ํ ๊ฐ์ฒด๊ฐ ๋ณ๊ฒฝ๋์ด๋ ๋ค๋ฅธ ๊ฐ์ฒด์ ๋ฐ์ดํฐ์๋ ์ํฅ์ ์ฃผ์ง ์๋๋ค.
๊น์ ๋ณต์ฌ(Deep Copy)
๊ฐ์ฒด๋ฅผ ๋ณต์ฌํ ๋ ํด๋น ๊ฐ์ฒด์ ์ธ์คํด์ค ๋ณ์๊น์ง ๋ณต์ฌํ๋ค. ๋ฐ์ดํฐ ์ฐธ์กฐ๊ฐ ์๋ ๊ฐ์ฒด์ ํํ๋ฅผ ๊ทธ๋๋ก ๋ณต์ฌํจ์ผ๋ก์จ ํ ๊ฐ์ฒด๊ฐ ๋ณ๊ฒฝ๋์ด๋ ๋ค๋ฅธ ๊ฐ์ฒด์ ๋ฐ์ดํฐ์๋ ์ํฅ์ ์ฃผ์ง ์๋๋ค.
์ค์ฝํ, ํธ์ด์คํ
, TDZ
-์ค์ฝํ : ๋ณ์๋ ํจ์์ ์ ๊ทผํ ์ ์๋ ์์น
-ํธ์ด์คํ
: ์ธํฐํ๋ฆฌํฐ๊ฐ ๋ณ์์ ํจ์์ ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ์ ์ ์ธ ์ ์ ๋ฏธ๋ฆฌ ํ ๋นํ๋ ๊ฒ.
-TDZ : ์ฐธ์กฐ ์ค๋ฅ๊ฐ ๋๋ ๊ตฌ๊ฐ์ธ ์ค์ฝํ ์์์ง์ ๋ถํฐ ์ด๊ธฐํ ์ง์ ๊น์ง์ ๊ตฌ๊ฐ. ์ ์ธ ์ ์ ๋ณ์๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๋นํ์ฉํ๋ ๊ฐ๋
์์ ๊ณต๊ฐ์ด๋ค.
ํจ์ ์ ์ธ๋ฌธ๊ณผ ํจ์ ํํ์์์ ํธ์ด์คํ
๋ฐฉ์์ ์ฐจ์ด
-ํจ์ ์ ์ธ์์ ํธ์ด์คํ
๋์ง๋ง ํจ์ ํํ์์ ํธ์ด์คํ
๋์ง ์์ผ๋ฏ๋ก ์ ์๋ ๋ฒ์์์ ๋ก์ปฌ ๋ณ์์ ๋ณต์ฌ๋ณธ์ ์ ์งํ ์ ์๋ค.
์ฌ๋ฌ๋ถ์ด ๋ง์ด ์์ฑํด์จ let, const, var, function ์ด ์ด๋ค ์๋ฆฌ๋ก ์คํ๋๋์ง ์ ์ ์์ด์.
์คํ ์ปจํ
์คํธ์ ์ฝ ์คํ
-์คํ ์ปจํ
์คํธ : ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๊ฐ ์คํ๋๋ ํ๊ฒฝ์ ์๋ฏธ
-์ฝ ์คํ : ์ฝ ์คํ์ ์ฝ๋๊ฐ ์คํ๋๋ฉด์ ์์ฑ๋๋ ์คํ ์ปจํ
์คํธ๋ฅผ ์ ์ฅํ๋ ์๋ฃ๊ตฌ์กฐ
์ค์ฝํ ์ฒด์ธ, ๋ณ์ ์๋ํ
-์ค์ฝํ ์ฒด์ธ : ์ค์ฝํ ์ฒด์ธ์ ์๋ณ์๊ฐ ์์ผ๋ฉด ์์ ์ค์ฝํ์์ ๋ค์ ์ฐพ์ ๋๊ฐ๋ค.
-๋ณ์ ์๋ํ : ์ง์ ์ ์ผ๋ก ๋ณ๊ฒฝ๋๋ฉด ์ ๋๋ ๋ณ์์ ๋ํ ์ ๊ทผ์ ๋ง๋ ๊ฒ์ ๋งํ๋ค.
<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๊ฐ ๋์จ๋ค.