Skip to main content

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์™œ ์ด๋ ‡๊ฒŒ ์ž‘๋™ํ• ๊นŒ? ์Šค์ฝ”ํ”„์™€ ํ˜ธ์ด์ŠคํŒ… ๊ฐœ๋… ์ •๋ฆฌ

ํšจ๋นˆ2024๋…„ 12์›” 11์ผAbout 2 minJavaScriptArticle(s)blogyozm.wishket.comjsjavascript

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์™œ ์ด๋ ‡๊ฒŒ ์ž‘๋™ํ• ๊นŒ? ์Šค์ฝ”ํ”„์™€ ํ˜ธ์ด์ŠคํŒ… ๊ฐœ๋… ์ •๋ฆฌ ๊ด€๋ จ

JavaScript > Article(s)

Article(s)

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์™œ ์ด๋ ‡๊ฒŒ ์ž‘๋™ํ• ๊นŒ? ์Šค์ฝ”ํ”„์™€ ํ˜ธ์ด์ŠคํŒ… ๊ฐœ๋… ์ •๋ฆฌ
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(Javascript)๋Š” ๋‹จ์ˆœํžˆ ์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ ์‹คํ–‰๋˜๋Š” ์Šคํฌ๋ฆฝํŠธ ์–ธ์–ด๋ฅผ ๋„˜์–ด, ์›น ๊ฐœ๋ฐœ์€ ๋ฌผ๋ก  ๋ฐฑ์—”๋“œ, ๋ชจ๋ฐ”์ผ ์•ฑ, ๊ทธ๋ฆฌ๊ณ  ๋ฐ์Šคํฌํ†ฑ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๊นŒ์ง€ ๋‹ค์–‘ํ•œ ๋ถ„์•ผ์—์„œ ๋„๋ฆฌ ์‚ฌ์šฉ๋˜๋Š” ์–ธ์–ด์ž…๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์ด๋ ‡๊ฒŒ ๋‹ค์–‘ํ•œ ๋ถ„์•ผ์—์„œ ํ™œ์•ฝํ•  ์ˆ˜ ์žˆ๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ผ๊นŒ์š”? ์—ฌ๋Ÿฌ ์ด์œ ๊ฐ€ ์žˆ๊ฒ ์ง€๋งŒ, ๊ทธ์ค‘ ํ•˜๋‚˜๋Š” ๋ฐ”๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๊ฐ€์ง„ ๋…ํŠนํ•œ ์‹คํ–‰ ๋ฐฉ์‹์— ์žˆ์Šต๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋‹ค๋ฅธ ์–ธ์–ด๋“ค๊ณผ ๋น„๊ตํ–ˆ์„ ๋•Œ โ€˜์Šค์ฝ”ํ”„(Scope)โ€™์™€ โ€˜ํ˜ธ์ด์ŠคํŒ…(Hoisting)โ€™๊ณผ ๊ฐ™์€ ๋…ํŠนํ•œ ๊ฐœ๋…์„ ๋ฐ”ํƒ•์œผ๋กœ ๋™์ž‘ํ•˜๋ฉฐ, ์ด ๋‘ ๊ฐœ๋…์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ฐฐ์šฐ๊ณ  ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ํ•„์ˆ˜์ ์œผ๋กœ ์•Œ์•„์•ผ ํ•˜๋Š” ๊ฐœ๋… ์ค‘ ํ•˜๋‚˜๋กœ, ์ด๋ฒˆ ๊ธ€์—์„œ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(Javascript)๋Š” ๋‹จ์ˆœํžˆ ์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ ์‹คํ–‰๋˜๋Š” ์Šคํฌ๋ฆฝํŠธ ์–ธ์–ด๋ฅผ ๋„˜์–ด, ์›น ๊ฐœ๋ฐœ์€ ๋ฌผ๋ก  ๋ฐฑ์—”๋“œ, ๋ชจ๋ฐ”์ผ ์•ฑ, ๊ทธ๋ฆฌ๊ณ  ๋ฐ์Šคํฌํ†ฑ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๊นŒ์ง€ ๋‹ค์–‘ํ•œ ๋ถ„์•ผ์—์„œ ๋„๋ฆฌ ์‚ฌ์šฉ๋˜๋Š” ์–ธ์–ด์ž…๋‹ˆ๋‹ค. ์ฒ˜์Œ์—” HTML๊ณผ CSS์™€ ํ•จ๊ป˜ ์›น ํŽ˜์ด์ง€์˜ ๋™์ ์ธ ๋™์ž‘์„ ๋‹ด๋‹นํ•˜๋Š” ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ ์–ธ์–ด๋กœ ์‚ฌ์šฉ๋˜์—ˆ์ง€๋งŒ, ํ˜„์žฌ๋Š” Node.js์™€ ๊ฐ™์€ ๋Ÿฐํƒ€์ž„ ํ™˜๊ฒฝ ๋•๋ถ„์— ์„œ๋ฒ„ ์‚ฌ์ด๋“œ์—์„œ๋„ ๋งŽ์ด ์‚ฌ์šฉ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ React, Vue์™€ ๊ฐ™์€ ํ”„๋ก ํŠธ์—”๋“œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, ํ”„๋ ˆ์ž„์›Œํฌ๋ถ€ํ„ฐ Express, Nest์™€ ๊ฐ™์€ ๋ฐฑ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ, ๊ทธ๋ฆฌ๊ณ  Electron, React Native๋ฅผ ํ™œ์šฉํ•œ ํฌ๋กœ์Šค ํ”Œ๋žซํผ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ๊นŒ์ง€ ๊ฐ€๋Šฅํ•ด, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ํ˜„๋Œ€ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์—์„œ ๋นผ๋†“์„ ์ˆ˜ ์—†๋Š” ํ•ต์‹ฌ์ ์ธ ์–ธ์–ด๊ฐ€ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋ ‡๋‹ค๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์ด๋ ‡๊ฒŒ ๋‹ค์–‘ํ•œ ๋ถ„์•ผ์—์„œ ํ™œ์•ฝํ•  ์ˆ˜ ์žˆ๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ผ๊นŒ์š”? ์—ฌ๋Ÿฌ ์ด์œ ๊ฐ€ ์žˆ๊ฒ ์ง€๋งŒ, ๊ทธ์ค‘ ํ•˜๋‚˜๋Š” ๋ฐ”๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๊ฐ€์ง„ ๋…ํŠนํ•œ ์‹คํ–‰ ๋ฐฉ์‹์— ์žˆ์Šต๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋‹ค๋ฅธ ์–ธ์–ด๋“ค๊ณผ ๋น„๊ตํ–ˆ์„ ๋•Œ โ€˜์Šค์ฝ”ํ”„(Scope)โ€™์™€ โ€˜ํ˜ธ์ด์ŠคํŒ…(Hoisting)โ€™๊ณผ ๊ฐ™์€ ๋…ํŠนํ•œ ๊ฐœ๋…์„ ๋ฐ”ํƒ•์œผ๋กœ ๋™์ž‘ํ•˜๋ฉฐ, ์ด ๋‘ ๊ฐœ๋…์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ฐฐ์šฐ๊ณ  ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ํ•„์ˆ˜์ ์œผ๋กœ ์•Œ์•„์•ผ ํ•˜๋Š” ๊ฐœ๋… ์ค‘ ํ•˜๋‚˜๋กœ, ์ด๋ฒˆ ๊ธ€์—์„œ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.


์Šค์ฝ”ํ”„๋ž€?

๋จผ์ € ์Šค์ฝ”ํ”„์— ๋Œ€ํ•ด ์•Œ์•„๋ณผ๊นŒ์š”? ์Šค์ฝ”ํ”„๋Š” โ€˜๋ฒ”์œ„โ€™๋ฅผ ์˜๋ฏธํ•˜๋ฉฐ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ์ƒ์„ฑ๋œ ๋ณ€์ˆ˜๋‚˜ ํ•จ์ˆ˜๊ฐ€ ์–ด๋””์—์„œ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•˜๊ณ , ์œ ํšจํ•œ์ง€๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ๊ทœ์น™์„ ๋งํ•ฉ๋‹ˆ๋‹ค. ์‰ฝ๊ฒŒ ๋งํ•ด, ์–ด๋–ค ๋ณ€์ˆ˜๋‚˜ ํ•จ์ˆ˜๊ฐ€ ์˜ํ–ฅ์„ ๋ฏธ์น  ์ˆ˜ ์žˆ๋Š” ๋ฒ”์œ„๋ฅผ ์Šค์ฝ”ํ”„๋ผ๊ณ  ๋ถ€๋ฆ…๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—๋Š” ์—ฌ๋Ÿฌ ์ข…๋ฅ˜์˜ ์Šค์ฝ”ํ”„๊ฐ€ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค.

1) ์ „์—ญ, ์ง€์—ญ ์Šค์ฝ”ํ”„

๋จผ์ € ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์Šค์ฝ”ํ”„๋Š” ํฌ๊ฒŒ ์ „์—ญ(Global)๊ณผ ์ง€์—ญ(Local)์œผ๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ „์—ญ ์Šค์ฝ”ํ”„๋Š” ํ”„๋กœ๊ทธ๋žจ ์ „์ฒด์—์„œ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•œ ๋ณ€์ˆ˜์˜ ๋ฒ”์œ„๋ฅผ ์˜๋ฏธํ•˜๋ฉฐ, ์ง€์—ญ ์Šค์ฝ”ํ”„๋Š” ํŠน์ • ํ•จ์ˆ˜๋‚˜ ๋ธ”๋ก ๋‚ด๋ถ€์—์„œ๋งŒ ์œ ํšจํ•œ ๋ฒ”์œ„๋ฅผ ๋œปํ•ฉ๋‹ˆ๋‹ค. ๊ฐ„๋‹จํ•œ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ์ด ๋‘ ์Šค์ฝ”ํ”„์˜ ์ฐจ์ด๋ฅผ ์‚ดํŽด๋ณผ๊ฒŒ์š”.

let globalNum = 100;

function example() {
    let localNum = 50;
    console.log(globalNum); //100
    console.log(localNum); //50
}

example();

console.log(globalNum); //100
console.log(localNum); //localNum is not defined

์œ„ ์ฝ”๋“œ๋Š” globalNum๊ณผ localNum ๋ณ€์ˆ˜๊ฐ€ ์„œ๋กœ ๋‹ค๋ฅธ ์Šค์ฝ”ํ”„๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์ƒํ™ฉ์„ ๋ณด์—ฌ์ฃผ๋Š” ์ฝ”๋“œ์ธ๋ฐ์š”. ์ด์ œ ๋‘ ๋ณ€์ˆ˜๊ฐ€ ์–ด๋–ค ์œ ํšจ ๋ฒ”์œ„๋ฅผ ๊ฐ€์ง€๋ฉฐ, ์ฝ”๋“œ์˜ ์‹คํ–‰ ๊ฒฐ๊ณผ๋Š” ์–ด๋–ป๊ฒŒ ๋‚˜์˜ค๋Š”์ง€ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋จผ์ € ์ฝ”๋“œ์˜ ๊ฐ€์žฅ ๋ฐ”๊นฅ์ชฝ์ธ ์ „์—ญ ๊ณต๊ฐ„์— ์„ ์–ธ๋œ globalNum ๋ณ€์ˆ˜๋ฅผ ์‚ดํŽด๋ด…์‹œ๋‹ค. ์ „์—ญ ๋ณ€์ˆ˜๋Š” ํ”„๋กœ๊ทธ๋žจ ์ „์ฒด์—์„œ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ํŠน์ง•์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š”๋ฐ์š”. ์ด๋Ÿฌํ•œ ์ „์—ญ ๋ณ€์ˆ˜๋Š” ์ „์—ญ ์Šค์ฝ”ํ”„๋ฅผ ๊ฐ€์ง‘๋‹ˆ๋‹ค. ์ „์—ญ ์Šค์ฝ”ํ”„๋ฅผ ๊ฐ€์ง„ ๋ณ€์ˆ˜๋Š” ์–ด๋””์—์„œ๋“  ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ํŠน์ง•์ด ์žˆ์Šต๋‹ˆ๋‹ค.

์ฝ”๋“œ์—์„œ example ํ•จ์ˆ˜ ๋‚ด๋ถ€์˜ console.log(globalNum)์ด ์‹คํ–‰๋˜์—ˆ์„ ๋•Œ, globalNum ๋ณ€์ˆ˜๋Š” ํ•จ์ˆ˜ ๋‚ด๋ถ€์— ์„ ์–ธ๋˜์ง€๋Š” ์•Š์•˜์ง€๋งŒ, ์ „์—ญ ์Šค์ฝ”ํ”„๋ฅผ ๊ฐ€์ง„ ๋ณ€์ˆ˜์ด๊ธฐ ๋•Œ๋ฌธ์— ์ „์—ญ ๊ณต๊ฐ„์— ์„ ์–ธ๋œ globalNum ๊ฐ’์ธ 100์— ์ ‘๊ทผํ•ด ์ถœ๋ ฅํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ํ•จ์ˆ˜ ํ˜ธ์ถœ ์ดํ›„, ํ•จ์ˆ˜ ์™ธ๋ถ€์—์„œ console.log(globalNum)์„ ์‹คํ–‰ํ•  ๋•Œ๋„ ์ „์—ญ ๋ณ€์ˆ˜์ธ globalNum ๋ณ€์ˆ˜์— ์ ‘๊ทผ ๊ฐ€๋Šฅํ•˜๋ฏ€๋กœ ๊ฐ™์€ ๊ฐ’์ด ์ถœ๋ ฅ๋ฉ๋‹ˆ๋‹ค.

๋‹ค์Œ์œผ๋กœ, example ํ•จ์ˆ˜ ๋‚ด๋ถ€์— ์„ ์–ธ๋œ localNum ๋ณ€์ˆ˜๋ฅผ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. localNum ๋ณ€์ˆ˜๋Š” ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ๋งŒ ์œ ํšจํ•œ ์ง€์—ญ ๋ณ€์ˆ˜๋กœ, ์ „์—ญ ๋ณ€์ˆ˜์ธ globalNum๊ณผ๋Š” ๋‹ค๋ฅธ ์ ‘๊ทผ ๋ฒ”์œ„๋ฅผ ๊ฐ€์ง‘๋‹ˆ๋‹ค. ์ง€์—ญ ๋ณ€์ˆ˜๋Š” ์ง€์—ญ ์Šค์ฝ”ํ”„๋ฅผ ๊ฐ€์ง€๋ฉฐ, ํ•ด๋‹น ํ•จ์ˆ˜๋‚˜ ๋ธ”๋ก ๋‚ด๋ถ€์—์„œ๋งŒ ์œ ํšจํ•ฉ๋‹ˆ๋‹ค.

์ฝ”๋“œ์—์„œ console.log(localNum)๊ฐ€ example ๋‚ด๋ถ€์—์„œ ์‹คํ–‰๋  ๋•Œ, localNum ๋ณ€์ˆ˜๋Š” ํ•จ์ˆ˜ ๋‚ด๋ถ€์— ์„ ์–ธ๋œ ๋ณ€์ˆ˜์ด๋ฏ€๋กœ, ํ•ด๋‹น ๋ณ€์ˆ˜์˜ ๊ฐ’์ธ 50์ด ์ •์ƒ์ ์œผ๋กœ ์ถœ๋ ฅ๋˜์ฃ . ๊ทธ๋ ‡๋‹ค๋ฉด, ํ•จ์ˆ˜ ํ˜ธ์ถœ์ด ๋๋‚œ ์ดํ›„์— ํ•จ์ˆ˜ ์™ธ๋ถ€์—์„œ console.log(localNum)๋ฅผ ์‹คํ–‰ํ•˜๋ฉด ์–ด๋–ป๊ฒŒ ๋ ๊นŒ์š”?

localNum ๋ณ€์ˆ˜๋Š” ์ง€์—ญ ์Šค์ฝ”ํ”„๋ฅผ ๊ฐ–๋Š” ์ง€์—ญ ๋ณ€์ˆ˜๋กœ, example ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ๋งŒ ์œ ํšจํ•œ ์ ‘๊ทผ ๋ฒ”์œ„๋ฅผ ๊ฐ–๊ธฐ ๋•Œ๋ฌธ์—, ํ•จ์ˆ˜ ๋ฐ”๊นฅ์—์„œ๋Š” ์กด์žฌํ•˜์ง€ ์•Š๋Š” ๋ณ€์ˆ˜๋กœ ๊ฐ„์ฃผ๋ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ ‘๊ทผ์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋ฉฐ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์ด์ฒ˜๋Ÿผ ์ง€์—ญ ๋ณ€์ˆ˜๋Š” ์„ ์–ธ๋œ ํ•จ์ˆ˜๋‚˜ ๋ธ”๋ก ๋‚ด๋ถ€์—์„œ๋งŒ ์œ ํšจํ•œ ๋ฒ”์œ„๋ฅผ ๊ฐ–๊ณ , ์Šค์ฝ”ํ”„๋ฅผ ๋ฒ—์–ด๋‚˜๋ฉด ๋” ์ด์ƒ ์ ‘๊ทผํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

์ „์—ญ ๋ณ€์ˆ˜์™€ ์ง€์—ญ ๋ณ€์ˆ˜๊ฐ€ ์–ด๋–ค ๋ฒ”์œ„๋ฅผ ๊ฐ€์ง€๋Š”์ง€, ๊ทธ ์ฐจ์ด๋ฅผ ๊ทธ๋ฆผ์œผ๋กœ ๋‚˜ํƒ€๋‚ด๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์ „์—ญ ์Šค์ฝ”ํ”„์™€ ์ง€์—ญ ์Šค์ฝ”ํ”„์˜ ์ฐจ์ด๋ฅผ ์ดํ•ดํ–ˆ์œผ๋‹ˆ, ์ด์ œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ์ค‘์š”ํ•œ ๋˜ ๋‹ค๋ฅธ ์Šค์ฝ”ํ”„์ธ ํ•จ์ˆ˜ ์Šค์ฝ”ํ”„(Function Scope)์™€ ๋ธ”๋ก ์Šค์ฝ”ํ”„(Block Scope)๋ฅผ ์•Œ์•„๋ณผ๊ฒŒ์š”.

2) ํ•จ์ˆ˜, ๋ธ”๋ก ์Šค์ฝ”ํ”„

ํ•จ์ˆ˜ ์Šค์ฝ”ํ”„์™€ ๋ธ”๋ก ์Šค์ฝ”ํ”„๋Š” ๋ณ€์ˆ˜ ์„ ์–ธ ๋ฐฉ์‹์— ๋”ฐ๋ผ ๋™์ž‘ ๋ฐฉ์‹์ด ๋‹ฌ๋ผ์ง€๋ฉฐ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐ ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค. ํ•จ์ˆ˜ ์Šค์ฝ”ํ”„๋Š” ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ ์„ ์–ธ๋œ ๋ณ€์ˆ˜๋‚˜ ํ•จ์ˆ˜๊ฐ€ ํ•ด๋‹น ํ•จ์ˆ˜ ๋‚ด์—์„œ๋งŒ ์œ ํšจํ•œ ๋ฒ”์œ„๋ฅผ ๊ฐ€์ง€๋Š” ์Šค์ฝ”ํ”„๋ฅผ ๋งํ•ฉ๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ var ํ‚ค์›Œ๋“œ๋Š” ํ•จ์ˆ˜ ์Šค์ฝ”ํ”„๋ฅผ ๋”ฐ๋ฅด๋ฉฐ, ํ•จ์ˆ˜ ๋‚ด๋ถ€์— ์„ ์–ธ๋œ ๋ณ€์ˆ˜๋Š” ํ•จ์ˆ˜ ์™ธ๋ถ€์—์„œ ์ ‘๊ทผํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์•„๋ž˜์˜ ์˜ˆ์‹œ๋ฅผ ํ†ตํ•ด ์‚ดํŽด๋ณผ๊ฒŒ์š”.

function example() {
    var funcVar = "๋‚˜๋Š” ํ•จ์ˆ˜ ์Šค์ฝ”ํ”„ ๋ณ€์ˆ˜!";
    console.log(funcVar); // "๋‚˜๋Š” ํ•จ์ˆ˜ ์Šค์ฝ”ํ”„ ๋ณ€์ˆ˜!"
}

example();

console.log(funcVar); // ์˜ค๋ฅ˜: funcVar is not defined

funcVar ๋ณ€์ˆ˜๋Š” ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ ์„ ์–ธ๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์—, ํ•จ์ˆ˜ ์™ธ๋ถ€์—์„œ๋Š” ์ ‘๊ทผํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ example ํ•จ์ˆ˜์˜ ๋‚ด๋ถ€์—์„œ funcVar ํ•จ์ˆ˜์— ์ ‘๊ทผํ•˜๋ ค ํ•œ๋‹ค๋ฉด, ์œ„์˜ ์ฝ”๋“œ์™€ ๊ฐ™์ด funcVar ๋ณ€์ˆ˜๊ฐ€ ์ •์˜๋˜์–ด ์žˆ์ง€ ์•Š๋‹ค๋Š” ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ํ•จ์ˆ˜ ์Šค์ฝ”ํ”„๋Š” ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋  ๋•Œ ๋ณ€์ˆ˜๊ฐ€ ์ƒ์„ฑ๋˜๊ณ , ํ•จ์ˆ˜๊ฐ€ ์ข…๋ฃŒ๋˜๋ฉด ๋ณ€์ˆ˜๊ฐ€ ์†Œ๋ฉธ๋˜๋Š” ๊ตฌ์กฐ๋ฅผ ๊ฐ€์ง‘๋‹ˆ๋‹ค.

ํ•จ์ˆ˜ ์Šค์ฝ”ํ”„์™€๋Š” ๋‹ค๋ฅด๊ฒŒ, ๋ธ”๋ก ์Šค์ฝ”ํ”„๋Š” {} ์ค‘๊ด„ํ˜ธ๋กœ ๊ฐ์‹ธ์ง„ ๋ธ”๋ก ๋‚ด๋ถ€์—์„œ๋งŒ ์œ ํšจํ•œ ๋ฒ”์œ„๋ฅผ ๊ฐ€์ง‘๋‹ˆ๋‹ค. let๊ณผ const ํ‚ค์›Œ๋“œ๋Š” ๋ธ”๋ก ์Šค์ฝ”ํ”„๋ฅผ ๋”ฐ๋ฅด๋ฉฐ, ํ•ด๋‹น ๋ธ”๋ก์„ ๋ฒ—์–ด๋‚˜๋ฉด ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์˜ˆ์ œ ์ฝ”๋“œ๋ฅผ ํ†ตํ•ด ์ž์„ธํ•˜๊ฒŒ ํ™•์ธํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

if (true) {
    let blockVar = "๋‚˜๋Š” ๋ธ”๋ก ์Šค์ฝ”ํ”„ ๋ณ€์ˆ˜!";
    console.log(blockVar); // "๋‚˜๋Š” ๋ธ”๋ก ์Šค์ฝ”ํ”„ ๋ณ€์ˆ˜!"
}

console.log(blockVar); // ์˜ค๋ฅ˜: blockVar is not defined

blockVar ๋ณ€์ˆ˜๋Š” let ํ‚ค์›Œ๋“œ๋กœ ์„ ์–ธ๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ธ”๋ก ์Šค์ฝ”ํ”„๋ฅผ ๊ฐ–๊ณ , ๋ธ”๋ก ์Šค์ฝ”ํ”„๋Š” ์ค‘๊ด„ํ˜ธ๋กœ ๊ฐ์‹ธ์ง„ ๋ธ”๋ก ๋‚ด๋ถ€์—์„œ๋งŒ ์œ ํšจํ•˜๋ฏ€๋กœ, ์œ„์˜ ์ฝ”๋“œ์—์„œ๋Š” if ๋ฌธ์˜ ๋‚ด๋ถ€์—์„œ๋งŒ ์œ ํšจํ•œ ๋ณ€์ˆ˜์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฏ€๋กœ ๋ธ”๋ก์„ ๋ฒ—์–ด๋‚œ ์œ„์น˜์—์„œ blockVar ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•˜๊ฒŒ ๋  ๊ฒฝ์šฐ์—๋Š” ์œ„์™€ ๊ฐ™์€ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

์ด์ฒ˜๋Ÿผ ๋ธ”๋ก ์Šค์ฝ”ํ”„๋Š” ๋ณ€์ˆ˜์˜ ์œ ํšจ ๋ฒ”์œ„๋ฅผ ์ข€ ๋” ๋ช…ํ™•ํ•˜๊ฒŒ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค๋‹ˆ๋‹ค. ํŠนํžˆ ๋ธ”๋ก ์Šค์ฝ”ํ”„๋ฅผ ํ™œ์šฉํ•˜๋ฉด ํ•จ์ˆ˜ ์Šค์ฝ”ํ”„(var)์˜ ์˜๋„์น˜ ์•Š์€ ๋™์ž‘์„ ๋ฐฉ์ง€ํ•  ์ˆ˜ ์žˆ์–ด, ์ฝ”๋“œ์˜ ์•ˆ์ •์„ฑ๊ณผ ๊ฐ€๋…์„ฑ์„ ๋†’์ผ ์ˆ˜ ์žˆ๋‹ค๋Š” ์žฅ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์–ด๋–ป๊ฒŒ ๋ณ€์ˆ˜์˜ ์œ ํšจ ๋ฒ”์œ„๋ฅผ ๊ฒฐ์ •ํ• ๊นŒ์š”? ์ด์ œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์Šค์ฝ”ํ”„ ๊ฒฐ์ • ๋ฐฉ๋ฒ•์„ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.


์Šค์ฝ”ํ”„ ๊ฒฐ์ • ๋ฐฉ๋ฒ•

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—๋Š” ๋ณ€์ˆ˜์™€ ํ•จ์ˆ˜๊ฐ€ ์–ด๋””์—์„œ ์œ ํšจํ•œ์ง€๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ๋‘ ๊ฐ€์ง€ ๋ฐฉ์‹์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฐ”๋กœ ๋™์  ์Šค์ฝ”ํ”„(Dynamic Scope)์™€ ์ •์  ์Šค์ฝ”ํ”„(Static Scope)์ž…๋‹ˆ๋‹ค. ์ด ๊ฐœ๋…๋“ค์€ ์ฝ”๋“œ๊ฐ€ ์ž‘์„ฑ๋œ ์œ„์น˜์™€ ์‹คํ–‰๋˜๋Š” ์‹œ์ ์— ๋”ฐ๋ผ, ํŠน์ • ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š”์ง€๋ฅผ ์ •์˜ํ•˜๋Š” ์ค‘์š”ํ•œ ๊ฐœ๋…์ธ๋ฐ์š”. ์ด๋ฅผ ํ†ตํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์ฝ”๋“œ์˜ ๋™์ž‘ ๋ฐฉ์‹์„ ๊ฒฐ์ •ํ•˜๊ณ , ๋ณ€์ˆ˜ ๊ฐ„์˜ ํ˜ผ๋ž€์„ ๋ฐฉ์ง€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด์ œ ๋™์  ์Šค์ฝ”ํ”„์™€ ์ •์  ์Šค์ฝ”ํ”„๊ฐ€ ๊ฐ๊ฐ ์–ด๋–ค ํŠน์ง•์„ ๊ฐ€์ง€๋Š”์ง€, ๊ทธ๋ฆฌ๊ณ  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์ด ์ค‘ ์–ด๋–ค ๋ฐฉ์‹์„ ๋”ฐ๋ฅด๋Š”์ง€ ๋ณผ๊นŒ์š”?

1) ๋™์ , ์ •์  ์Šค์ฝ”ํ”„

๋™์  ์Šค์ฝ”ํ”„๋Š” ํ•จ์ˆ˜๋‚˜ ๋ณ€์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋œ ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๋ณ€์ˆ˜์˜ ์œ ํšจ ๋ฒ”์œ„๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค. ์‹คํ–‰ ์‹œ์ ์— ํ™œ์„ฑํ™”๋œ ํ™˜๊ฒฝ์— ๋”ฐ๋ผ ๋ณ€์ˆ˜์˜ ๊ฐ’์„ ์ฐพ๊ธฐ ๋•Œ๋ฌธ์—, ์ฝ”๋“œ์˜ ์ž‘์„ฑ ์‹œ์ ๊ณผ ์‹คํ–‰ ๊ฒฐ๊ณผ๊ฐ€ ๋‹ค๋ฅผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ์ œ ์ฝ”๋“œ๋ฅผ ํ†ตํ•ด ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

let globalVar = "๋‚˜๋Š” ์ „์—ญ ๋ณ€์ˆ˜";

function outer() {
    let outerVar = "๋‚˜๋Š” ์™ธ๋ถ€ ๋ณ€์ˆ˜";
    inner();
}

function inner() {
    console.log(globalVar); // "๋‚˜๋Š” ์ „์—ญ ๋ณ€์ˆ˜"
    console.log(outerVar);  // ์˜ค๋ฅ˜ ๋ฐœ์ƒ
}

outer();

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๋™์  ์Šค์ฝ”ํ”„๋ฅผ ์„ ํƒํ•˜๋Š” ๊ฒฝ์šฐ, inner ํ•จ์ˆ˜๊ฐ€ outer ํ•จ์ˆ˜์—์„œ ํ˜ธ์ถœ๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— outerVar ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์‹ค์ œ๋กœ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๋ฉด inner ํ•จ์ˆ˜๋Š” outerVar ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์— ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ๊ทธ ์ด์œ ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๋™์  ์Šค์ฝ”ํ”„๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์ด์ฃ .

๋™์  ์Šค์ฝ”ํ”„๋Š” ๋ณ€์ˆ˜์˜ ์œ ํšจ ๋ฒ”์œ„๊ฐ€, ์‹คํ–‰๋˜๋Š” ์‹œ์ ์— ๋”ฐ๋ผ ๋™์ ์œผ๋กœ ๊ฒฐ์ •๋œ๋‹ค๋Š” ํŠน์ง•์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์‹คํ–‰ ์ค‘์ธ ํ™˜๊ฒฝ์— ๋”ฐ๋ผ ๋ณ€์ˆ˜์˜ ์œ ํšจ ๋ฒ”์œ„๊ฐ€ ๋‹ฌ๋ผ์ง€๊ธฐ ๋•Œ๋ฌธ์—, ํ˜ธ์ถœ๋˜๋Š” ์œ„์น˜์— ๋”ฐ๋ผ ๋ณ€์ˆ˜์˜ ๊ฐ’์„ ์ฐพ๋Š” ๋ฐฉ์‹์ด ๋‹ฌ๋ผ์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋กœ ์ธํ•ด ์ฝ”๋“œ์˜ ๊ฒฐ๊ณผ๋ฅผ ์˜ˆ์ธกํ•˜๊ธฐ ์–ด๋ ค์šด ๊ฒฝ์šฐ๊ฐ€ ๋งŽ๊ณ , ๋™์  ์Šค์ฝ”ํ”„๋Š” ์ด๋Ÿฐ ๋ถˆํ™•์‹ค์„ฑ ๋•Œ๋ฌธ์— ์œ ์ง€๋ณด์ˆ˜์™€ ๋””๋ฒ„๊น…์ด ์–ด๋ ต์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ํ˜„๋Œ€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์—์„œ๋Š” ๊ฑฐ์˜ ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.

๋Œ€์‹  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํฌํ•จํ•œ ๋Œ€๋ถ€๋ถ„์˜ ์–ธ์–ด๋Š” ์˜ˆ์ธก ๊ฐ€๋Šฅ์„ฑ๊ณผ ์•ˆ์ •์„ฑ์„ ์œ„ํ•ด ์ •์  ์Šค์ฝ”ํ”„๋ฅผ ์ฑ„ํƒํ•˜๊ณ  ์žˆ๋Š”๋ฐ์š”. ์ •์  ์Šค์ฝ”ํ”„๋Š” ์ฝ”๋“œ๊ฐ€ ์ž‘์„ฑ๋œ ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ, ์ฆ‰ ๋ณ€์ˆ˜๊ฐ€ ์„ ์–ธ๋œ ์‹œ์ ์„ ๊ธฐ์ค€์œผ๋กœ ๋ณ€์ˆ˜์˜ ์œ ํšจ ๋ฒ”์œ„๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค. ์‹คํ–‰ ์‹œ์ ๊ณผ๋Š” ๊ด€๊ณ„์—†์ด, ๋ณ€์ˆ˜์™€ ํ•จ์ˆ˜๊ฐ€ ์„ ์–ธ๋œ ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ฝ”๋“œ๊ฐ€ ๋™์ž‘ํ•˜๋ฉฐ, ์ •์  ์Šค์ฝ”ํ”„๋Š” ์‹คํ–‰ ํ™˜๊ฒฝ์— ์ƒ๊ด€์—†์ด ์ฝ”๋“œ์˜ ๋™์ž‘์„ ์˜ˆ์ธก ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋งŒ๋“ ๋‹ค๋Š” ํŠน์ง•์ด ์žˆ์Šต๋‹ˆ๋‹ค.

2) ๋ ‰์‹œ์ปฌ ์Šค์ฝ”ํ”„

์ •์  ์Šค์ฝ”ํ”„๋Š” โ€˜๋ ‰์‹œ์ปฌ ์Šค์ฝ”ํ”„โ€™๋ผ๊ณ  ๋ถˆ๋ฆฌ๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋ฐ”๋กœ ์ด ๋ ‰์‹œ์ปฌ ์Šค์ฝ”ํ”„๋ฅผ ๋”ฐ๋ฅด๋Š” ์–ธ์–ด์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฏ€๋กœ ํ•จ์ˆ˜์˜ ํ˜ธ์ถœ ์œ„์น˜๊ฐ€ ์•„๋‹Œ, ์„ ์–ธ๋œ ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์Šค์ฝ”ํ”„๊ฐ€ ๊ณ ์ •๋ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ๋ณ€์ˆ˜์™€ ํ•จ์ˆ˜์˜ ์ ‘๊ทผ ๊ฐ€๋Šฅ ๋ฒ”์œ„๊ฐ€ ๋ช…ํ™•ํ•˜๊ฒŒ ์ •์˜๋˜๋ฉฐ, ์ฝ”๋“œ๋Š” ๋” ์ง๊ด€์ ์ด๊ณ  ์˜ˆ์ธก์ด ๊ฐ€๋Šฅํ•ด์ง‘๋‹ˆ๋‹ค.

let globalVar = "๋‚˜๋Š” ์ „์—ญ ๋ณ€์ˆ˜";

function outer() {
    let outerVar = "๋‚˜๋Š” ์™ธ๋ถ€ ๋ณ€์ˆ˜";

    function inner() {
        console.log(globalVar); // "๋‚˜๋Š” ์ „์—ญ ๋ณ€์ˆ˜"
        console.log(outerVar);  // "๋‚˜๋Š” ์™ธ๋ถ€ ๋ณ€์ˆ˜"
    }

    inner();
}

outer();

์œ„์˜ ์ฝ”๋“œ์—์„œ inner ํ•จ์ˆ˜๋Š” outer ํ•จ์ˆ˜ ๋‚ด๋ถ€์— ์„ ์–ธ๋˜์–ด ์žˆ์œผ๋ฏ€๋กœ, inner ํ•จ์ˆ˜๋Š” ์„ ์–ธ๋œ ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ outerVar ๋ณ€์ˆ˜์™€ globalVar ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ˜ธ์ถœ ์œ„์น˜์™€๋Š” ์ƒ๊ด€์—†์ด, ์ž‘์„ฑ๋œ ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๋ณ€์ˆ˜๊ฐ€ ๊ฒฐ์ •๋˜๋Š” ๊ฒƒ์ด ๋ ‰์‹œ์ปฌ ์Šค์ฝ”ํ”„์˜ ํ•ต์‹ฌ์ด๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


ํ˜ธ์ด์ŠคํŒ…์ด๋ž€?

์ด์ฒ˜๋Ÿผ ๋ ‰์‹œ์ปฌ ์Šค์ฝ”ํ”„์™€ ํ•จ๊ป˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋™์ž‘ ๋ฐฉ์‹์„ ์ดํ•ดํ•˜๋ ค๋ฉด, โ€˜ํ˜ธ์ด์ŠคํŒ…(Hoisting)โ€™์ด๋ผ๋Š” ๊ฐœ๋…๋„ ํ•„์ˆ˜์ ์œผ๋กœ ์•Œ๊ณ  ์žˆ์–ด์•ผ ํ•˜๋Š”๋ฐ์š”. ํ˜ธ์ด์ŠคํŒ…์€ ๋ณ€์ˆ˜์™€ ํ•จ์ˆ˜์˜ ์„ ์–ธ๋ฌธ์„ ์ฝ”๋“œ์˜ ์ตœ์ƒ๋‹จ์œผ๋กœ ๋Œ์–ด์˜ฌ๋ฆฌ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋™์ž‘ ๋ฐฉ์‹์„ ๋œปํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ํ˜ธ์ด์ŠคํŒ…์„ ์‚ฌ์šฉํ•˜๋ฉด ์ฝ”๋“œ์˜ ์‹คํ–‰ ์ˆœ์„œ์™€ ์ž‘์„ฑ ์ˆœ์„œ๋ฅผ ๋‹ค๋ฅด๊ฒŒ ๋ณ€๊ฒฝํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

1) ํ•จ์ˆ˜ ํ˜ธ์ด์ŠคํŒ…

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” ํ˜ธ์ด์ŠคํŒ…์„ ์‚ฌ์šฉํ•˜๋ฉด, ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํ•จ์ˆ˜๊ฐ€ ์„ ์–ธ๋˜๊ธฐ ์ „์— ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

sayHello();

function sayHello() {
    console.log("hello world!");
}

์ฝ”๋“œ๋ฅผ ๋ณด๋ฉด, sayHello ํ•จ์ˆ˜๊ฐ€ ์„ ์–ธ๋˜๊ธฐ ์ด์ „์— ํ˜ธ์ถœ๋˜์—ˆ์ง€๋งŒ ์‹คํ–‰ ๊ฒฐ๊ณผ, ์ฝ”๋“œ๊ฐ€ ์ •์ƒ์ ์œผ๋กœ ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค. ์ด๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์—”์ง„์ด ์‹คํ–‰ ์‹œ์ ์— ํ•จ์ˆ˜ ์„ ์–ธ์„ ์ฝ”๋“œ์˜ ์ตœ์ƒ๋‹จ์œผ๋กœ ๋Œ์–ด์˜ฌ๋ฆฌ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ, ํ•จ์ˆ˜ ํ‘œํ˜„์‹์€ ํ˜ธ์ด์ŠคํŒ…๋˜์ง€ ์•Š์•„ ์•„๋ž˜์™€ ๊ฐ™์€ ์ฝ”๋“œ๋Š” ์˜ค๋ฅ˜๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค๋ฏ€๋กœ ์ฃผ์˜ํ•ด์„œ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

sayHello(); // TypeError: sayHello is not a function

const sayHello = function () {
    console.log("hello world!");
};

2) ๋ณ€์ˆ˜ ํ˜ธ์ด์ŠคํŒ…

๋ณ€์ˆ˜ ์„ ์–ธ ๋˜ํ•œ ํ˜ธ์ด์ŠคํŒ…์˜ ์˜ํ–ฅ์„ ๋ฐ›์Šต๋‹ˆ๋‹ค. var ํ‚ค์›Œ๋“œ๋กœ ์„ ์–ธ๋œ ๋ณ€์ˆ˜๋Š” ์„ ์–ธ๋ฌธ๋งŒ ๋Œ์–ด์˜ฌ๋ ค์ง€๊ณ , ์ดˆ๊ธฐํ™”๋Š” ํ˜ธ์ด์ŠคํŒ… ๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์„ ์–ธ ์ „์— ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•˜๋ฉด undefined๊ฐ€ ์ถœ๋ ฅ๋ฉ๋‹ˆ๋‹ค.

console.log(num); // undefined
var num = 10;

์œ„์˜ ์ฝ”๋“œ๋ฅผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์ด ํ•ด์„ํ•˜๋Š” ์ˆœ์„œ๋กœ ๋‚˜ํƒ€๋‚ด๋ณด๋ฉด, ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋‚˜ํƒ€๋‚ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

var num; // ์„ ์–ธ๋ฌธ์ด ๋Œ์–ด์˜ฌ๋ ค์ง
console.log(num); //undefined
num = 10; //์ดˆ๊ธฐํ™”๋Š” ๋‚˜์ค‘์— ์ด๋ค„์ง

์œ„ ์ฝ”๋“œ์™€ ๊ฐ™์ด, var num; ์ด๋ผ๋Š” ์„ ์–ธ๋ฌธ์€ ์ฝ”๋“œ์˜ ์ตœ์ƒ๋‹จ์œผ๋กœ ๋Œ์–ด์˜ฌ๋ ค์กŒ์ง€๋งŒ, num = 10; ์ดˆ๊ธฐํ™” ๋ฌธ์€ ๋Œ์–ด์˜ฌ๋ ค์ง€์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์— undefined๊ฐ€ ์ถœ๋ ฅ๋ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋™์ž‘์€ ์˜ˆ๊ธฐ์น˜ ์•Š์€ ๊ฒฐ๊ณผ๋ฅผ ์œ ๋ฐœํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ, ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ธฐ ์ „์— ์‚ฌ์šฉํ•˜๋Š” ์Šต๊ด€์€ ์ง€์–‘ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

3) let๊ณผ var

var ํ‚ค์›Œ๋“œ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ, ๋˜ ๋‹ค๋ฅธ ๋ณ€์ˆ˜ ์„ ์–ธ ํ‚ค์›Œ๋“œ์ธ let๊ณผ const ํ‚ค์›Œ๋“œ๋„ ํ˜ธ์ด์ŠคํŒ…์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ var ํ‚ค์›Œ๋“œ์™€๋Š” ๋‹ค๋ฅด๊ฒŒ ์ดˆ๊ธฐํ™” ์ด์ „์— ์ ‘๊ทผํ•˜๋ ค๊ณ  ํ•˜๋ฉด ์˜ค๋ฅ˜๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค๋Š”๋ฐ์š”. ๊ทธ ์ด์œ ๋Š” ๋ฐ”๋กœ TDZ๋ผ๋Š” ๊ณต๊ฐ„ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

TDZ๋Š” Temporal Dead Zone, ์ฆ‰ โ€˜์ผ์‹œ์ ์ธ ์ฃฝ์Œ์˜ ๊ณต๊ฐ„โ€™์„ ๋œปํ•˜๋ฉฐ, ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋Š” ์ƒํƒœ๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. let๊ณผ const๋กœ ์„ ์–ธ๋œ ๋ณ€์ˆ˜๋Š” ์Šค์ฝ”ํ”„์˜ ์‹œ์ž‘ ์ง€์ ๋ถ€ํ„ฐ ์ดˆ๊ธฐํ™”๊ฐ€ ์™„๋ฃŒ๋  ๋•Œ๊นŒ์ง€ TDZ์— ๋จธ๋ฌผ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์ด ๋•Œ๋ฌธ์— ์ดˆ๊ธฐํ™” ์ „์— ๋ณ€์ˆ˜๋ฅผ ์ฐธ์กฐํ•˜๋ ค๊ณ  ํ•˜๋ฉด ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค๊ณ  ํ•ด์„œ ํ˜ธ์ด์ŠคํŒ…์ด ์ผ์–ด๋‚˜์ง€ ์•Š๋Š” ๊ฒƒ์€ ์•„๋‹™๋‹ˆ๋‹ค. ์„ ์–ธ ์ž์ฒด๋Š” ์—ฌ์ „ํžˆ ํ˜ธ์ด์ŠคํŒ…๋˜๊ณ , ์ดˆ๊ธฐํ™”๊ฐ€ ์ด๋ฃจ์–ด์ง€๊ธฐ ์ „๊นŒ์ง€๋Š” TDZ์— ์˜ํ•ด ๋ณดํ˜ธ๋˜๋ฉฐ ์ฐธ์กฐ๊ฐ€ ์ฐจ๋‹จ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด๋Ÿฌํ•œ ํŠน์ง•์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์ฝ”๋“œ์˜ ์•ˆ์ „์„ฑ์„ ๋ณด์žฅํ•˜๊ธฐ ์œ„ํ•œ ์žฅ์น˜๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

console.log(num); // ReferenceError: Cannot access โ€˜numโ€™ before initialization
let num = 10;

์‹ค์ œ๋กœ ์œ„์˜ ์ฝ”๋“œ์ฒ˜๋Ÿผ num ๋ณ€์ˆ˜์˜ ์„ ์–ธ๋ฌธ ์œ„์—์„œ num ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•˜๋ฉด ์œ„์™€ ๊ฐ™์€ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด๋Ÿฌํ•œ ํ˜„์ƒ์€ TDZ ๋•Œ๋ฌธ์ด๋ฉฐ, TDZ๋Š” ๋ณ€์ˆ˜๊ฐ€ ์„ ์–ธ๋˜๊ธฐ ์ „์—๋Š” ์ ‘๊ทผํ•  ์ˆ˜ ์—†๋„๋ก ๋ง‰์•„์ฃผ๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค.


๋งˆ์น˜๋ฉฐ

์ง€๊ธˆ๊นŒ์ง€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์Šค์ฝ”ํ”„์™€ ํ˜ธ์ด์ŠคํŒ…์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์•˜์Šต๋‹ˆ๋‹ค. ์Šค์ฝ”ํ”„๋Š” ๋ณ€์ˆ˜์™€ ํ•จ์ˆ˜์˜ ์œ ํšจ ๋ฒ”์œ„๋ฅผ ๊ฒฐ์ •ํ•˜๋ฉฐ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋ ‰์‹œ์ปฌ ์Šค์ฝ”ํ”„๋ฅผ ์‚ฌ์šฉํ•ด ์ฝ”๋“œ ์ž‘์„ฑ ์‹œ์ ์— ๋ณ€์ˆ˜์˜ ์„ ์–ธ ์œ„์น˜์— ๋”ฐ๋ผ ๋ณ€์ˆ˜๊ฐ€ ์œ ํšจํ•œ ๋ฒ”์œ„๋ฅผ ๊ณ ์ •ํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์ฝ”๋“œ๋ฅผ ๋” ์ง๊ด€์ ์ด๊ณ , ์˜ˆ์ธก ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋˜ํ•œ ํ˜ธ์ด์ŠคํŒ…์€ ๋ณ€์ˆ˜์™€ ํ•จ์ˆ˜ ์„ ์–ธ์„ ์ฝ”๋“œ์˜ ์ตœ์ƒ๋‹จ์œผ๋กœ ๋Œ์–ด์˜ฌ๋ฆฌ๋Š” ๋“ฏํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋…ํŠนํ•œ ๋™์ž‘ ๋ฐฉ์‹์œผ๋กœ, ์œ ์—ฐํ•œ ์‹คํ–‰ ํ™˜๊ฒฝ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด๋Ÿฌํ•œ ์œ ์—ฐ์„ฑ์ด ๋•Œ๋กœ๋Š” ์˜๋„ํ•˜์ง€ ์•Š์€ ์˜ค๋ฅ˜๋ฅผ ๋ฐœ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋Š”๋ฐ์š”. ์ด๋ฅผ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด let๊ณผ const๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ธ”๋ก ์Šค์ฝ”ํ”„์™€ TDZ๋ฅผ ํ™œ์šฉํ•˜๋Š” ๊ฒƒ์ด ๋” ์•ˆ์ „ํ•ฉ๋‹ˆ๋‹ค. ์Šค์ฝ”ํ”„์™€ ํ˜ธ์ด์ŠคํŒ…์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋” ๊นŠ์ด ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•œ ์ฒซ๊ฑธ์Œ์ด๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ฐœ๋…๋“ค์„ ์ดํ•ดํ•˜๋ฉด, ์ฝ”๋“œ ์ตœ์ ํ™”๋‚˜ ์œ ์ง€๋ณด์ˆ˜ ์ธก๋ฉด์—์„œ๋„ ๋”์šฑ ๋ช…ํ™•ํ•˜๊ณ  ์‰ฌ์šด ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์ฃ . ์ด์ œ ์ด ๊ฐœ๋…๋“ค์„ ํ™œ์šฉํ•ด ๋” ํšจ์œจ์ ์ด๊ณ  ์•ˆ์ •์ ์ธ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด ๋ณด์‹œ๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์™œ ์ด๋ ‡๊ฒŒ ์ž‘๋™ํ• ๊นŒ? ์Šค์ฝ”ํ”„์™€ ํ˜ธ์ด์ŠคํŒ… ๊ฐœ๋… ์ •๋ฆฌ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(Javascript)๋Š” ๋‹จ์ˆœํžˆ ์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ ์‹คํ–‰๋˜๋Š” ์Šคํฌ๋ฆฝํŠธ ์–ธ์–ด๋ฅผ ๋„˜์–ด, ์›น ๊ฐœ๋ฐœ์€ ๋ฌผ๋ก  ๋ฐฑ์—”๋“œ, ๋ชจ๋ฐ”์ผ ์•ฑ, ๊ทธ๋ฆฌ๊ณ  ๋ฐ์Šคํฌํ†ฑ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๊นŒ์ง€ ๋‹ค์–‘ํ•œ ๋ถ„์•ผ์—์„œ ๋„๋ฆฌ ์‚ฌ์šฉ๋˜๋Š” ์–ธ์–ด์ž…๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์ด๋ ‡๊ฒŒ ๋‹ค์–‘ํ•œ ๋ถ„์•ผ์—์„œ ํ™œ์•ฝํ•  ์ˆ˜ ์žˆ๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ผ๊นŒ์š”? ์—ฌ๋Ÿฌ ์ด์œ ๊ฐ€ ์žˆ๊ฒ ์ง€๋งŒ, ๊ทธ์ค‘ ํ•˜๋‚˜๋Š” ๋ฐ”๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๊ฐ€์ง„ ๋…ํŠนํ•œ ์‹คํ–‰ ๋ฐฉ์‹์— ์žˆ์Šต๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋‹ค๋ฅธ ์–ธ์–ด๋“ค๊ณผ ๋น„๊ตํ–ˆ์„ ๋•Œ โ€˜์Šค์ฝ”ํ”„(Scope)โ€™์™€ โ€˜ํ˜ธ์ด์ŠคํŒ…(Hoisting)โ€™๊ณผ ๊ฐ™์€ ๋…ํŠนํ•œ ๊ฐœ๋…์„ ๋ฐ”ํƒ•์œผ๋กœ ๋™์ž‘ํ•˜๋ฉฐ, ์ด ๋‘ ๊ฐœ๋…์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ฐฐ์šฐ๊ณ  ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ํ•„์ˆ˜์ ์œผ๋กœ ์•Œ์•„์•ผ ํ•˜๋Š” ๊ฐœ๋… ์ค‘ ํ•˜๋‚˜๋กœ, ์ด๋ฒˆ ๊ธ€์—์„œ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.