[HTML/CSS/JS] ํ˜ธ์ด์ŠคํŒ…(Hoisting)

ํ˜ธ์ด์ŠคํŒ… (Hoisting)

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๊ธฐ ์ „ ํ•จ์ˆ˜ ๋‚ด์˜ ํ•„์š”ํ•œ ๋ณ€์ˆ˜๊ฐ’๋“ค์„ ๋ฏธ๋ฆฌ ๋ชจ์•„์„œ ์„ ์–ธํ•˜๋Š”๋ฐ, ์ด๊ฒƒ์„ ํ˜ธ์ด์ŠคํŒ…(Hoisting) ์ด๋ผ๊ณ  ํ•œ๋‹ค.

๋ฏธ๋ฆฌ ์„ ์–ธ๋œ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉ

// ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ
function fristFunc() {
  innerFunction();
  function innerFunction() {
    console.log("firstFunc innerFuncion!");
  }
}

// ํ•จ์ˆ˜ ํ˜ธ์ถœ
fristFunc();

์œ„์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์†Œ์Šค๋ฅผ ํ™•์ธํ•ด๋ณด์ž.
ํ•จ์ˆ˜์˜ ์„ ์–ธ์ด ๋๋‚˜๊ณ , ๋งˆ์ง€๋ง‰ ์ค„ fristFunc(); ๋กœ ์ธํ•ด firstFunc๋ฅผ ๋ถˆ๋Ÿฌ์˜จ๋‹ค.
fristFunc()๊ฐ€ ์ˆœ์ฐจ์ ์œผ๋กœ ์‹คํ–‰ํ•œ๋‹ค๋ฉด, ํ•จ์ˆ˜๋ฅผ ๋ถ€๋ฅด๋Š” innerFunction();๊ฐ€ ๋จผ์ € ๋‚˜์˜ค๊ธฐ ๋•Œ๋ฌธ์— ์˜ค๋ฅ˜๊ฐ€ ๋‚  ๊ฒƒ ๊ฐ™์ง€๋งŒ,
์‹คํ–‰์‹œ์ผœ๋ณด๋ฉด ์ฝ˜์†”์ฐฝ์— firstFunc innerFuncion!๊ฐ€ ์ž˜ ๋‚˜์˜ด์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.
ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ ์ „, ํ•จ์ˆ˜์— ๋Œ€ํ•œ ๋‚ด์šฉ์„ ํ”„๋กœ๊ทธ๋žจ์ด ํ™•์ธํ•˜๊ณ  innerFunction์„ ๋ฏธ๋ฆฌ ์„ ์–ธํ•ด์ฃผ์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ€๋Šฅํ•˜๋‹ค.

ํ•จ์ˆ˜ ํ‘œํ˜„์‹๊ณผ ํ˜ธ์ด์ŠคํŒ…

// ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ
function innerFunction() {
  console.log("firstFunc innerFuncion!");
}

์•ž์„  ์†Œ์Šค์ฒ˜๋Ÿผ ์ด๋ ‡๊ฒŒ ํ•จ์ˆ˜๋ฅผ ๋‚˜ํƒ€๋‚ด๋ฉด ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ์ด์ง€๋งŒ,

// ํ•จ์ˆ˜ ํ‘œํ˜„์‹
const innerValue = function innerFunction() {
  console.log("firstFunc innerFuncion!");
};

์ด๋Ÿฐ ๋ฐฉ์‹์„ ํ•จ์ˆ˜ ํ‘œํ˜„์‹์ด๋ผ๊ณ  ํ•˜๋Š”๋ฐ, ํ˜ธ์ด์ŠคํŒ…์„ ์ƒ๊ฐํ•  ๋•Œ, ํ•จ์ˆ˜ ํ‘œํ˜„์‹์—์„  ์ฃผ์˜๋ฅผ ํ•ด์•ผํ•œ๋‹ค.

// ํ•จ์ˆ˜ ์„ ์–ธ์‹
function secondFunc() {
  innerValue();
  // ํ•จ์ˆ˜ ํ‘œํ˜„์‹
  const innerValue = function innerFunction() {
    console.log("firstFunc innerFuncion!");
  };
}

// ํ•จ์ˆ˜ ํ˜ธ์ถœ
secondFunc();

์œ„์˜ ์†Œ์Šค๋ฅผ ์‹คํ–‰ํ•˜๋ฉด Cannot access 'innerValue' before initialization ๋ผ๋Š” ๋ฉ”์„ธ์ง€๊ฐ€ ๋œจ๊ณ  ์‹คํ–‰์ด ์•ˆ๋œ๋‹ค.
๋งŽ์ด ํ–‡๊น”๋ฆด ์ˆ˜๋„ ์žˆ๋Š” ๋ถ€๋ถ„์ธ๋ฐ, ํ•จ์ˆ˜ ํ‘œํ˜„์‹์„ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด,
ํ˜ธ์ด์ŠคํŒ… ๊ณผ์ •์—์„œ๋Š” ํ•จ์ˆ˜ function innerFunction() ๊ฐ€ ์•„๋‹Œ, ๋ณ€์ˆ˜ const innerValue๋งŒ ๋ฏธ๋ฆฌ ์„ ์–ธํ•ด๋‘๊ธฐ ๋•Œ๋ฌธ์— ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.
์ฃผ์˜๋ฅผ ํ•ด์„œ ์‚ฌ์šฉํ•ด์•ผํ•œ๋‹ค.