(https://dev.to/lydiahallie/javascript-visualized-hoisting-478h) ์ ๋ฒ์ญํ ๊ธ์ ๋๋ค.
ํธ์ด์คํ ์ ๋ชจ๋ JS ๊ฐ๋ฐ์๊ฐ ์ง์ฆ๋๋ ์๋ฌ๋ฅผ ๊ตฌ๊ธ๋งํ๊ณ ๊ฒฐ๊ตญ ์คํ์ค๋ฒ ํ๋ก์ฐ์์ ๋ค์ด๋ณธ ์ฉ์ด ์ค ํ๋์ด๋ค. ๊ฑฐ๊ธฐ์ ์ฌ๋๋ค์ '์ด ์๋ฌ๋ค์ ํธ์ด์คํ (hosisting) ๋๋ฌธ์ด์ผ'๋ผ๊ณ ๋ค์ด๋ดค์ ๊ฒ์ด๋ค. ๐ ๊ทธ๋์ ๋๋์ฒด ํธ์ด์คํ ์ด ๋ญ๊น? (์ฐธ๊ณ ๋ก - ์ค์ฝํ๋ ๋ค๋ฅธ ํฌ์คํธ์์ ๋ค๋ฃฌ๋ค, ๋ ํฌ์คํธ๋ ์๊ณ ์ง์ค์ ์ด๊ฒ ํ๋ ๊ฒ์ ์ข์ํ๋ค.)
๋๊ฐ ์๋ฐ์คํฌ๋ฆฝ๊ฐ ์ฒ์์ด๋ผ๋ฉด, ์๋ง "์ด์ํ" ๋์๋ค์ ๊ฒฝํํ์ ๊ฒ์ด๋ค. ๋ช๋ช ๋ณ์๋ค์ด ๋ฌด์์์ ์ผ๋ก undefined
๋๊ณ ReferenceErrors
๋ฅผ ๋ฑ๋ ๋ฑ์ ๊ฒฝํ๋ง์ด๋ค. ํธ์ด์คํ
์ ํ์ผ ์๋จ์ ๋ณ์๋ค๊ณผ ํจ์๋ค์ด ์ฝ์
๋๋ค๊ณ ์ค๋ช
๋์ง๋ง, ์๋๋ค. ๊ทธ๋ฐ์ผ์ ์ผ์ด๋์ง ์๋๋ค. ๋์๋ค์ด ๋ง์น ๊ทธ๋ ๊ฒ ๋ณด์ผ ์ ์์ด๋ ๋ง์ด๋ค. ๐
JS ์์ง์ด ์คํฌ๋ฆฝํธ๋ฅผ ๊ฐ์ ธ์ฌ ๋, ๊ฐ์ฅ ๋จผ์ , ์ฐ๋ฆฌ์ ์ฝ๋์ ์๋ ๋ฐ์ดํฐ๋ฅผ ์ํด ๋ฉ๋ชจ๋ฆฌ๋ฅผ ์ธํ ํ๋ค. ์ด ์์ ์์ ์คํ๋๋ ์ฝ๋๋ ์๋ค, ๋จ์ํ ์คํ์ ์ํด ๋ชจ๋ ๊ฒ์ ์ค๋นํ ๋ฟ์ด๋ค. ํจ์ ์ ์ธ๊ณผ ๋ณ์๊ฐ ์ ์ฅ๋๋ ๋ฐฉ์์ ๋ค๋ฅด๋ค. ํจ์๋ค์ ์๋ฒฝํ๊ฒ ์ ์ฒด ํจ์๋ฅผ ์ฐธ์กฐํ์ฌ ์ ์ฅํ๋ค.
1|| ํจ์์๋ ์ ์ฒด ํจ์๋ค์ ๋ํ ์ฐธ์กฐ๊ฐ ์ ์ฅ๋์ด ์๋ค.
๋ณ์์์ ์ด์ง ๋ค๋ฅด๋ค. ES6๋ ๋ ๊ฐ์ง ๋ณ์ ์ ์ธ ํค์๋์ธ let
๊ณผ const
๋ฅผ ์๊ฐํ๋ค. let
๊ณผ const
๋ก ๋ณ์์ ์ธ์ ํ๋ฉด ์ด๊ธฐํ ๋์ง ์์ ์ํ๋ก ์ ์ฅํ๋ค.
2 ||
let
๊ณผconst
๋ก ์ ์ธ๋ ๋ณ์๋ค์uninitialized
๋ก ์ ์ฅ๋์ด ์๋ค.(ES6์ class๋ค ํฌํจํจ)
var
ํค์๋๋ก ๋ณ์์ ์ธ์ ํ๋ฉด, ๊ธฐ๋ณธ์ ์ผ๋ก ๊ฐ(value)์ด undefined
๋ก ์ด๊ธฐํ๋์ด ์ ์ฅ๋๋ค.
3 ||
var
๋ก ์ ์ธ๋ ๋ณ์๋ค์undefined
๋ก ์ ์ฅ๋์ด ์๋ค.
์ง๊ธ ์์ฑ๋จ๊ณ(creation phase)๊ฐ ๋๋ฌ๋ค, ์ด์ ์ค์ ๋ก ์ฝ๋๋ฅผ ์คํํ ์ ์๋ค. ์ฐ๋ฆฌ๊ฐ ํ์ผ ์๋จ์ 3๊ฐ์ console.log๋ฌธ์ ๊ฐ์ง๊ณ ์์ผ๋ฉด ์ด๋ค ์ผ์ด ์ผ์ด๋๋์ง ๋ณด์. ๋ณ์๋ ํจ์๋ค์ ๋ชจ๋ ์ ์ธ๋๊ธฐ ์ ์ด๋ค.
ํจ์๊ฐ ์ ์ฒด ํจ์ ์ฝ๋์ ์ฐธ์กฐ๋ฅผ ์ ์ฅํ๊ธฐ ๋๋ฌธ์, ํจ์๋ฅผ ์์ฑํ๋ ์ค ์ด์ ์๋ ํธ์ถํ ์ ์๋ค. ๐ฅ
4 ||
execution phased
๋์์๋, ํจ์๋ค์ ์ ์ธํ๊ธฐ ์ ์, ํธ์ถํ ์ ์๋ค. ์๋ํ๋ฉด ๋ฉ๋ชจ๋ฆฌ ์์ ์ ์ฒด ํจ์๊ฐ ์ฐธ์กฐ๋์ด ์๊ธฐ ๋๋ฌธ์ด๋ค.
๋ณ์๋ค์ด ์ ์ธ๋๊ธฐ ์ ์ var
ํค์๋๋ก ์ ์ธ๋ ๋ณ์๋ฅผ ์ฐธ์กฐํ ๋, ๋จ์ํ๊ฒ๋ ์ ์ฅ๋ undefined
!์ธ ๊ธฐ๋ณธ๊ฐ์ ๋ฐํํ๋ค. ๊ทธ๋ ์ง๋ง, ๋๋๋ก "์๊ธฐ์น๋ชปํ" ๋์์ด ๋ํ๋ ์ ์๋ค. ๋๋ถ๋ถ ๊ฒฝ์ฐ ์ด๊ธฐํ๋์ง ์์ ๋ณ์๋ฅผ ์ฐธ์กฐํ๋ค๋ ์๋ฏธ์ด๋ค. (์๋ง undefined
์ ๊ฐ์ ๊ฐ๋๋ก ์ํ์ง ์์ ๊ฒ์ด๋ค.) ๐ฌ
5 || ์ ์ธ๋๊ธฐ ์ ์
var
ํค์๋๋ก ์ ์ธ๋ ๋ณ์๋ค์ ์ฐธ์กฐํ ๋, ๊ฐ๋ค์ ๊ธฐ๋ณธundefined
๋ก ๋ ๊ฒ์ด๋ค.
var
ํค์๋ ๊ฐ์ undefined
์ธ ๊ฐ์ ์ฐํํ ์ฐธ์กฐํ ์ ์๋ ๊ฒฝ์ฐ๋ฅผ ๋ง๊ธฐ์ํด, ์ฐ๋ฆฌ๊ฐ ์ด๊ธฐํ๋์ง ์๋ ๋ณ์๋ค์ ์ ๊ทผํ๋ ค๊ณ ํ ๋ ReferenceError
๊ฐ ๋ฐ์ํ๋ค. ๊ทธ ์ค์ ๋ก ์ ์ธ๋๊ธฐ ์ ์ "์ง์ (zone)"์ temporal dead zone๋ผ๊ณ ๋ถ๋ฅธ๋ค. TDZ(temporal daed zone)๋ ๋ณ์๋ค์ ์ด๊ธฐํ์ ์ ์ฐธ์กฐํ ์ ์๊ฒํ๋ค.
6 || ์ผ๋จ ์ฐ๋ฆฌ๊ฐ ๋ณ์๋ค์ ์ ์ธํ ์ค์ ๋์ด๊ฐ๊ธฐ๋ง ํ๋ฉด, ๋ฉ๋ชจ๋ฆฌ ์์์ ๋ณ์๋ค์ ๋ค์ ์จ์ง๋ค.
์์ง์ด ์ค์ ๋ก ๋ณ์๋ค์ด ์ ์ธ๋ ๋ผ์ธ์ ๋์ด๊ฐ๋ฉด, ๋ฉ๋ชจ๋ฆฌ์์ ๋ณ์๋ค์ ์ค์ ๋ก ์ ์ธ๋ ๊ฐ๋ค๋ก ๋ฎ์ด์์์ง๋ค.
(์์ค, ์ด์ 7์ด ๋๋ ค๊ณ ํ๋ค. ๋นจ๋ฆฌ ๋๋ด์ผ๊ฒ ๋ค.!!๐ฌ)
๋ชจ๋ ๋๋ฌ๋ค ! ๐ ๋ค์ ์ ๋ฆฌํด๋ณด์.
var
ํค์๋๋ก ์ฌ์ฉ๋ ๋ณ์๋ค์ undefined
๊ฐ๋ค์ ๊ฐ์ง๊ณ , let
๊ณผ const
๋ฅผ ๊ฐ์ง ๋ณ์๋ค์ ์ด๊ธฐํ๋์ง์์(uninitialized)์ฑ๋ก ์ ์ฅ๋๋ค.ํธ์ด์คํ ๋ ๋ง์ด ์กฐ๊ธ ๋ ๋ง์ฐํ๊ฒ ๋์๊ธฐ๋ฅผ ๋ฐ๋๋ค. ์ง๊ธ ์ฐ๋ฆฌ๋ ์ฐ๋ฆฌ ์ฝ๋๊ฐ ์คํ๋ ๋ ๋ฌด์์ด ์ผ์ด๋๋์ง๋ฅผ ๊ด์ฐฐํ๋ค. ํญ์ ๊ทธ๋ ๋ฏ์ด, ์ง๊ธ ์ดํด๊ฐ ๋์ง ์๋๋ผ๋ ๊ฑฑ์ฅํ์ง๋ง๋ผ. ๊ณ์ํด์ ์ต์ํด์ง ๊ฒ์ด๋ค. ํธํํ๊ฒ ๋ฌผ์ด๋ด๋ผ, ๋๋ ๋๋๊ฒ์ ์ฌ๋ํ๋ค. ๐