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

์ง€ํ˜„ยท2023๋…„ 1์›” 31์ผ
0

JavaScript

๋ชฉ๋ก ๋ณด๊ธฐ
1/2

ํ˜ธ์ด์ŠคํŒ…


๐Ÿ’ก ์ธํ„ฐํ”„๋ฆฌํ„ฐ๊ฐ€ ๋ณ€์ˆ˜์™€ ํ•จ์ˆ˜์˜ ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์„ ์„ ์–ธ ์ „์— ๋ฏธ๋ฆฌ ํ• ๋‹นํ•˜๋Š” ๊ฒƒ

MDN web docs๊ฐ€ ๋งํ•˜๋Š” ํ˜ธ์ด์ŠคํŒ…์˜ ์ •์˜์ด๋‹ค.

๋ณ€์ˆ˜๋‚˜ ํ•จ์ˆ˜๋ฅผ ์„ ์–ธํ•˜๋Š” ๋ถ€๋ถ„๋งŒ ํ•ด๋‹น ์Šค์ฝ”ํ”„์˜ ๊ฐ€์žฅ ์œ„๋กœ ์˜ฎ๊ธฐ๋Š” ๊ฒƒ

์ด๋ผ๊ณ ๋„ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.

๋ณ€์ˆ˜ ์ƒ์„ฑ ๋‹จ๊ณ„

โ‘  ์„ ์–ธ : ๋ณ€์ˆ˜ ๊ฐ์ฒด๋ฅผ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ (์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋˜๊ธฐ ์œ„ํ•œ ํ™˜๊ฒฝ)์— ๋“ฑ๋กํ•œ๋‹ค
โ‘ก ์ดˆ๊ธฐํ™” : ๋“ฑ๋ก๋œ ๋ณ€์ˆ˜์˜ ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ํ™•๋ณดํ•œ๋‹ค. ๋ณ€์ˆ˜๋Š” undefined๋กœ ์ดˆ๊ธฐํ™”๋œ๋‹ค!
โ‘ข ํ• ๋‹น : ์ดˆ๊ธฐํ™” ๋œ ๋ณ€์ˆ˜์— ๊ฐ’์„ ํ• ๋‹นํ•œ๋‹ค

var๋กœ ์„ ์–ธ

  • ์„ ์–ธ + ์ดˆ๊ธฐํ™”๊ฐ€ ๋™์‹œ์— ์ง„ํ–‰
  • ๋ณ€์ˆ˜๋ฅผ ๋“ฑ๋กํ•จ๊ณผ ๋™์‹œ์— ๋ฉ”๋ชจ๋ฆฌ๋ฅผ undefined๋กœ ๋งŒ๋“ ๋‹ค

let, const๋กœ ์„ ์–ธ

  • ์„ ์–ธ, ์ดˆ๊ธฐํ™” ๋‹จ๊ณ„ ๋ถ„๋ฆฌ๋˜์–ด ์ง„ํ–‰
  • ์„ ์–ธ๋˜๊ณ  ์ดˆ๊ธฐํ™” ์ „๊นŒ์ง€๋Š” ์ผ์‹œ์  ์‚ฌ๊ฐ์ง€๋Œ€ (Temporal Dead Zone; TDZ)๊ฐ€ ๋œ๋‹ค.
    + ํ˜ธ์ด์ŠคํŒ…์€ ๋˜์—ˆ์œผ๋‚˜ ๋ฉ”๋ชจ๋ฆฌ ํ• ๋‹น๋˜์ง€ ์•Š์•„ ์ ‘๊ทผ๋ถˆ๊ฐ€ ์ƒํƒœ
    +Reference Error: Cannot access before initialization

ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ

  • ํ•จ์ˆ˜ ์„ ์–ธ์‹์€ ์œ„์˜ ์„ธ ๋‹จ๊ณ„๊ฐ€ ๋™์‹œ์— ์ง„ํ–‰
  • ํ• ๋‹น ์ „ ํ˜ธ์ถœํ•ด๋„ undefined๊ฐ€ ์•„๋‹Œ ํ•จ์ˆ˜ ๋‚ด์šฉ์ด ๋ฆฌํ„ด๋œ๋‹ค!
// ํ•จ์ˆ˜ ์„ ์–ธ์‹

function() {
 console.log("test");
}

ํ•จ์ˆ˜ ๋™์ž‘ ์›๋ฆฌ

โ‘  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Parser๊ฐ€ ํ•จ์ˆ˜ ์‹คํ–‰ ์ „ ํ•ด๋‹น ํ•จ์ˆ˜๋ฅผ ํ•œ๋ฒˆ ํ›‘๋Š”๋‹ค.

โ‘ก ํ•จ์ˆ˜์•ˆ์— ์กด์žฌํ•˜๋Š” ๋ณ€์ˆ˜/ํ•จ์ˆ˜์„ ์–ธ์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ๊ธฐ์–ตํ•˜๊ณ  ์žˆ๋‹ค๊ฐ€ ์‹คํ–‰ํ•œ๋‹ค.

  • ๋ธ”๋ก ์Šค์ฝ”ํ”„: ์ค‘๊ด„ํ˜ธ {}๋กœ ๊ฐ์‹ธ์ง„ ๋ฒ”์œ„.

  • ํ•จ์ˆ˜ ์Šค์ฝ”ํ”„: function(){}์—์„œ ์ค‘๊ด„ํ˜ธ {} ๋‚ด๋ถ€์˜ ๋ฒ”์œ„. ์ฆ‰ ํ•จ์ˆ˜ ์ฝ”๋“œ ๋ธ”๋ก ๋‚ด๋ถ€์˜ ๋ฒ”์œ„.

    • var๋กœ ๋ณ€์ˆ˜ ์ƒ์„ฑ -> ํ•จ์ˆ˜ ์Šค์ฝ”ํ”„ ๋‚ด์—์„œ ์œ ํšจ
    • let, const๋กœ ๋ณ€์ˆ˜ ์ƒ์„ฑ -> ๋ธ”๋ก ์Šค์ฝ”ํ”„ ๋‚ด์—์„œ ์œ ํšจ

โ‘ข ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•  ๋•Œ, ํ˜ธ์ถœํ•œ ์œ„์น˜๋ณด๋‹ค ํ•ด๋‹น ํ•จ์ˆ˜๊ฐ€ ํ•˜๋‹จ๋ถ€์— ์žˆ์„ ๊ฒฝ์šฐ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Parser๊ฐ€ ๋‚ด๋ถ€์ ์œผ๋กœ ํ•จ์ˆ˜ ์œ„์น˜๋ฅผ ๋Œ์–ด์˜ฌ๋ ค์„œ ์ฒ˜๋ฆฌํ•œ๋‹ค. -> ํ˜ธ์ด์ŠคํŒ…

ํ˜ธ์ด์ŠคํŒ…์ด ์ผ์–ด๋‚˜๋Š” ๊ฒฝ์šฐ

  • var์„ ๋ช…์‹œ์ ์œผ๋กœ ์‚ฌ์šฉํ•ด ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•  ๋•Œ
  • ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ : ์„ ์–ธ, ์ดˆ๊ธฐํ™”, ํ• ๋‹น ๋™์‹œ์— ์ด๋ฃจ์–ด์ง -> ํ•จ์ˆ˜ ์ „์ฒด๊ฐ€ ์ตœ์ƒ๋‹จ์œผ๋กœ ํ˜ธ์ด์ŠคํŒ…
  • let, const๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ -> ์„ ์–ธ๋งŒ ์ตœ์ƒ๋‹จ์œผ๋กœ ํ˜ธ์ด์ŠคํŒ…

โ€ป ํ•จ์ˆ˜ ํ‘œํ˜„์‹์€ ํ˜ธ์ด์ŠคํŒ… ๋˜์ง€ ์•Š๋Š”๋‹ค!

์ฝ”๋“œ๋ฅผ ํ†ตํ•ด ํ˜ธ์ด์ŠคํŒ… ์ดํ•ดํ•˜๊ธฐ


// 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

profile
์ œ๋กœ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜๋Š” ๊ฐœ๋ฐœ์ž ์ƒํ™œ (โ‘…ยดโ€ขโŒ”โ€ข`)

0๊ฐœ์˜ ๋Œ“๊ธ€