JavaScript์์ ๋ณ์๋ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๋๋ฐ ์ฌ์ฉ๋๋ ์ด๋ฆ์ด ๋ถ์ ์ ์ฅ์๋ฅผ ์๋ฏธํ๋ค. ์ฆ ๊ฐ์ด ์ ์ฅ๋์ด ์๋ ์ค์ ๋ฉ๋ชจ๋ฆฌ ์ฃผ์๊ฐ์ ์ ์ฅํ๊ณ ์๋ ๊ฒ์ ์๋ฏธํ๋ค. ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ณ์์ ์ข ๋ฅ๋ var, let, const๊ฐ ์๋ค.var : varํค์๋๋ ๊ฐ์ฅ ์ค๋๋
์คํ ์ปจํ ์คํธ๋ ์คํํ ์ฝ๋์ ์ ๊ณตํ ํ๊ฒฝ ์ ๋ณด๋ค์ ๋ชจ์๋๋ ๊ฐ์ฒด๋ฅผ ์๋ฏธํ๋ค.JS๋ ๋์ผํ ํ๊ฒฝ์ ์๋ ์ ๋ณด๋ค์ ๋ชจ์ ์คํ ์ปจํ ์คํธ๋ฅผ ์ฝ์คํ์ ์์์ฌ๋ฆฐ ํ ์คํํ์ฌ ์ฝ๋์ ํ๊ฒฝ๊ณผ ์์๋ฅผ ๋ณด์ฅํ ์ ์๊ฒ ๋๋ค.์คํ์ด๋? ์ถ์ ๊ตฌ๊ฐ ํ๋๋ฟ์ธ ๊น์ ์ฐ๋ฌผ ๊ฐ์ ๋ฐ์ดํฐ ๊ตฌ์กฐ๋ฅผ ์๋ฏธ
์กฐ๊ฑด๋ฌธ์ด๋? ์ด๋ค ํน๋ณํ ์กฐ๊ฑด์ด ๋์์ ๋๋ง ์คํ๋๋ ํ๋์ ์๋ฏธํ๋ค.์ฝ๊ฒ ์๋ฅผ ๋ค์ด๋ณด์๋ฉด ์ด์ ์๊ฐ ์ ํธ๋ฑ ์์ ์์์ ๋ ํ๋ํ ์ ์๋ ๊ฒ์ ๋ ๊ฐ์ง์ด๋ค.์ ํธ๋ฑ ์์์ ๊ธฐ๋ค๋ฆฐ๋ค.์ ํธ๋ฑ์ ๊ฑด๋๋ค.์ด์ ์ด ํ๋์ ์ทจํ๊ธฐ ์ํด์๋ ์ํฉ์ด ๋๊ฐ์ง๋ก ๋๋๋ค. ๋ง์ฝ ์ ํธ๋ฑ์ด
๋ฐ๋ณต๋ฌธ์ด๋? ์ง์ ํ ์กฐ๊ฑด์ด ์ฐธ(true)๋ก ํ๊ฐ๋๋ ๋์ ์ง์ ํ ๋ธ๋ก๋ฌธ( {} )์ ๋ฐ๋ณตํด์ ์คํํ๋ ๋ฌธ๋ฒ์ ์๋ฏธํ๋ค.์๋ฅผ ๋ค์ด "์๋ ํ์ธ์. ๋ฐ๊ฐ์ต๋๋ค!!"๋ผ๋ ๋ฌธ์ฅ์ 100๋ฒ ์ถ๋ ฅํด์ผ ํ๋ค๋ฉด ์ถ๋ ฅ๋ฌธ์ 100๋ฒ ์์ฑํด์ผํ ๊ฒ์ด๋ค. ์ด๋ ๊ฒ ๋๋ฉด ๊ฐ์ ์ฝ๋๋ฅผ ์ฌ๋ฌ๋ฒ ์์ฑ
this๋ '์ด๊ฒ' ์ด๋ผ๋ ์๋ฏธ์ด๋ฉฐ JavaScript์ ์์ฝ์ด๋ฅผ ์๋ฏธํ๋ค.ํจ์๊ฐ ์คํ๋ ๋ ํจ์ ๋ด๋ถ์์ ์ฌ์ฉ๋๋ ๊ฐ์ ์๋ฏธํ๋ค. ํจ์์ ๊ฐ์ฒด ์ทจ๊ธ์ ๋ฐ๋ ๋๊ตฌ๋ฅผ ์ง์นญํ๋ ๊ฒ์ธ์ง ์๋ ค์ฃผ๋ ๊ฒ์ ์๋ฏธํ๋ค.ํจ์๋ฅผ ํธ์ถํ ์ปจํ ์คํธ๋ฅผ ๊ฐ๋ฆฌํจ๋ค.์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ์ํด ์๋ฌต์
๊ฐ์ฒด๋ ์๋ฃํ์ ๊ด์ ์์ ํค(Key)์ ๊ฐ(Value)์ผ๋ก ๊ตฌ์ฑ๋ ์์ฑ์ ์งํฉ์ ์๋ฏธํ๋ค.๊ฐ์ฒด๋ ์๋ฐ์คํฌ๋ฆฝํธ์์ ์ ๊ณตํ๋ ๊ธฐ๋ณธ ์๋ฃํ๊ณผ๋ ๋ค๋ฅด๊ฒ ์ฌ๋ฌ ๊ฐ์ ๊ฐ์ ๊ฐ์ง ์ ์๊ณ , ๋ค๋ฅธ ์๋ฃํ์ ๊ฐ๋ ๊ฐ์ง ์ ์๋ค.๊ฐ์ฒด๋ฅผ ์์ฑํ ๋๋ { }๋ฅผ ์ด์ฉํ์ฌ ์์ฑํ ์ ์์ผ๋ฉฐ ์ด
๋ชจ๋์ด๋? ํ๋ก๊ทธ๋จ์ ๊ตฌ์ฑํ๋ ๊ตฌ์ฑ์์์ ์ผ๋ถ๋ถ์ ์๋ฏธํ๋ฉฐ, ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํ ์ฝ๋ ์กฐ๊ฐ ๋ชจ์์ ์๋ฏธํ๊ธฐ๋ ํ๋ค.๊ฐ๋ฐํ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ํฌ๊ธฐ๊ฐ ์ปค์ง๋ฉด์ ํ์ฅ์ฑ๊ณผ ์ ์ง๋ณด์ ์ธก๋ฉด์์ ํ์ผ์ ์ฌ๋ฌ๊ฐ๋ก ๋ถ๋ฆฌํ์ฌ ๊ฐ ํ์ผ์ ์ฐ๋ฆฌ๋ ๋ชจ๋์ด๋ผ๊ณ ๋ถ๋ฅธ๋ค.ํ๋ก๊ทธ๋จ์ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌํ๊ณ
์๋ฐ์คํฌ๋ฆฝํธ์ ๋ชจ๋์ ์ข ๋ฅ๋ EMS์ CJS์ ๋๊ฐ์ง ์ข ๋ฅ๋ก ๋๋๋ค๊ณ ๋งํ๊ณ ์๋ค.EMS(ECMAScript) Modules
ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ๋ฌธ๋ฒ์ ๋ง๊ฒ ์์ฑ๋ ํ ์คํธ ๋ฌธ์๋ฅผ ์ฝ๊ณ ์คํํ๊ธฐ ์ํด ํ ์คํธ ๋ฌธ์์ ๋ฌธ์์ด์ ๋ถํดํ๊ณ ๊ตฌ์กฐ๋ฅผ ์์ฑํ๋ ์ผ๋ จ์ ๊ณผ์ ์ ์๋ฏธํ๋ค.HTML/CSS, JS๋ก ์์ฑ๋ ๋ฌธ์๋ฅผ ํ์ฑํ์ฌ ๋ธ๋ผ์ฐ์ ์ ์๊ฐ์ ์ผ๋ก ์ถ๋ ฅํ๋ ๊ฒ์ ์๋ฏธํ๋ค.Server Side Render
Block์ ์ฌ์ ์ ์๋ฏธ์ธ '๋ง๋ค'์ ๊ฐ์ด ํ๋ก๊ทธ๋จ์ด ์คํ์ ์ ์ด๋ฅผ ๋ง๋๋ค๋ผ๋ ์๋ฏธ๋ฅผ ๊ฐ์ง๋ฉฐ, ๋์์ฑ์ ๊ฐ์ง๊ณ ์์ง ์์ ์ด์ ์์ ์ด ๋๋๊ธฐ ์ ๊น์ง ๋ค์ ์์ ์ ์คํํ์ง ์๋๋ค. ์ฆ ์ ์ด๊ถ์ ๋ฐํ๋ฐ๊ธฐ ์ ๊น์ง ๊ธฐ๋ค๋ฆฐ๋ค.\-Non-Block : ์ ์ด๊ถ์ด ํจ์์๊ฒ ๋์ด๊ฐ๋ค๊ฐ
async, await๋ ES8์์ ๋์ ๋ ๋น๋๊ธฐ ์์ ์ ์ฒ๋ฆฌํ๊ธฐ ์ํ ํจํด์ ์๋ฏธํ๋ค.Callback-๊ณผ Promise๋ณด๋ค ๊ฐ๊ฒฐํ ์ฌ์ฉํ ์ ์๋ค.๊ฐ๋ ์ฑ์ด ๋งค์ฐ ์ฌ๋ผ๊ฐau ๋ฐํ๊ฐ์ resolve ๊ฐ์ฒด ํน์ reject ๊ฐ์ฒด์ด๋ค.throw ํค์๋๋ฅผ ์ฌ์ฉํด์ reject
์๋ฐ์คํฌ๋ฆฝํธ๋ ํจ์ํ ํ๋ก๊ทธ๋๋ฐ ํจ๋ฌ๋ค์์ ์ถ๊ตฌํ๋ฉฐ ์ถ๊ฐ๋ก ๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ ํจ๋ฌ๋ค์์ ์ง์ํ๋ค.์๋ฐ์คํฌ๋ฆฝํธ์ ํต์ฌ์ ํจ์(ํจ์ํ ํ๋ก๊ทธ๋๋ฐ ํจ๋ฌ๋ค์)๊ณผ ๊ฐ์ฒด(๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ ํจ๋ฌ๋ค์)์ด๋ค.์ถ๊ฐ๋ก ํ์ ์คํฌ๋ฆฝํธ๋ฅผ ํตํด ์ธํฐํ์ด์ค(๋คํ์ฑ)์ ๋์ ํ๋ค.1\. ์ผ๊ธํจ์
ECMAScript์์ ํ์คํ๋ฅผ ์งํํ์๋ค.ํ์ฌ ๋ณ์ ์ ์ธ์ ECMAScript6(2015)์ดํ๋ถํฐ ์ด์ ์ var ํ๋์ ๋ฐฉ๋ฒ์ผ๋ก๋ง ์ ์ธํ ์ ์์๋ ๋ณ์๋ฅผ let๊ณผ const๋ก ์ ์ธํ ์ ์๊ฒ ๋์๋ค.var : ์ฌ์ ์ธ ๊ฐ๋ฅ + ์ฌํ ๋น ๊ฐ๋ฅ + ํจ์๋ ๋ฒจ ์ค์ฝํํธ์ด์คํ