๐ก ์ธํฐํ๋ฆฌํฐ๊ฐ ๋ณ์์ ํจ์์ ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ์ ์ ์ธ ์ ์ ๋ฏธ๋ฆฌ ํ ๋นํ๋ ๊ฒ
MDN web docs๊ฐ ๋งํ๋ ํธ์ด์คํ ์ ์ ์์ด๋ค.
๋ณ์๋ ํจ์๋ฅผ ์ ์ธํ๋ ๋ถ๋ถ๋ง ํด๋น ์ค์ฝํ์ ๊ฐ์ฅ ์๋ก ์ฎ๊ธฐ๋ ๊ฒ
์ด๋ผ๊ณ ๋ ์ดํดํ ์ ์์๋ค.
โ ์ ์ธ
: ๋ณ์ ๊ฐ์ฒด๋ฅผ ์คํ ์ปจํ
์คํธ (์ฝ๋๊ฐ ์คํ๋๊ธฐ ์ํ ํ๊ฒฝ)์ ๋ฑ๋กํ๋ค
โก ์ด๊ธฐํ
: ๋ฑ๋ก๋ ๋ณ์์ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ํ๋ณดํ๋ค. ๋ณ์๋ undefined๋ก ์ด๊ธฐํ๋๋ค!
โข ํ ๋น
: ์ด๊ธฐํ ๋ ๋ณ์์ ๊ฐ์ ํ ๋นํ๋ค
์ผ์์ ์ฌ๊ฐ์ง๋
(Temporal Dead Zone; TDZ)๊ฐ ๋๋ค.Reference Error: Cannot access before initialization
// ํจ์ ์ ์ธ์
function() {
console.log("test");
}
โ ์๋ฐ์คํฌ๋ฆฝํธ Parser๊ฐ ํจ์ ์คํ ์ ํด๋น ํจ์๋ฅผ ํ๋ฒ ํ๋๋ค.
โก ํจ์์์ ์กด์ฌํ๋ ๋ณ์/ํจ์์ ์ธ์ ๋ํ ์ ๋ณด๋ฅผ ๊ธฐ์ตํ๊ณ ์๋ค๊ฐ ์คํํ๋ค.
๋ธ๋ก ์ค์ฝํ
: ์ค๊ดํธ {}๋ก ๊ฐ์ธ์ง ๋ฒ์.
ํจ์ ์ค์ฝํ
: function(){}์์ ์ค๊ดํธ {} ๋ด๋ถ์ ๋ฒ์. ์ฆ ํจ์ ์ฝ๋ ๋ธ๋ก ๋ด๋ถ์ ๋ฒ์.
var
๋ก ๋ณ์ ์์ฑ -> ํจ์ ์ค์ฝํ
๋ด์์ ์ ํจlet, const
๋ก ๋ณ์ ์์ฑ -> ๋ธ๋ก ์ค์ฝํ
๋ด์์ ์ ํจโข ํจ์๋ฅผ ์คํํ ๋, ํธ์ถํ ์์น๋ณด๋ค ํด๋น ํจ์๊ฐ ํ๋จ๋ถ์ ์์ ๊ฒฝ์ฐ ์๋ฐ์คํฌ๋ฆฝํธ Parser๊ฐ ๋ด๋ถ์ ์ผ๋ก ํจ์ ์์น๋ฅผ ๋์ด์ฌ๋ ค์ ์ฒ๋ฆฌํ๋ค. -> ํธ์ด์คํ
โป ํจ์ ํํ์์ ํธ์ด์คํ ๋์ง ์๋๋ค!
// 1. ๋ด๊ฐ ์์ฑํ ์ฝ๋
console.log(value); // undefined
var value = 'hello, world!';
console.log(value); // hello, world
// 2. ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ด ์คํํ๋ ์ฝ๋
var value; // ์ ์ธ + ์ด๊ธฐํ๋ก undefined ํ ๋น
console.log(value); // undefined
value = 'hello, world!';
console.log(value); // hello, world
Reference โ
MDN Web Docs, ํธ์ด์คํ https://developer.mozilla.org/ko/docs/Glossary/Hoisting
https://nuhends.tistory.com/111
https://velog.io/@gml9812/%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4-%EB%AD%98%EA%B9%8C