Input + Output = True

Javascript] ์Šค์ฝ”ํ”„(์Šค์ฝ”ํ”„, ์Šค์ฝ”ํ”„์ฒด์ธ, ๋ ‰์‹œ์ปฌ ์Šค์ฝ”ํ”„) ๋ณธ๋ฌธ

๐ŸŽจFrontEnd/Javascript

Javascript] ์Šค์ฝ”ํ”„(์Šค์ฝ”ํ”„, ์Šค์ฝ”ํ”„์ฒด์ธ, ๋ ‰์‹œ์ปฌ ์Šค์ฝ”ํ”„)

IOTrue 2023. 5. 10. 21:46

๐Ÿ˜ŽJavascript] ์Šค์ฝ”ํ”„, ์Šค์ฝ”ํ”„์ฒด์ธ, ๋ ‰์‹œ์ปฌ ์Šค์ฝ”ํ”„

โœ… ์Šค์ฝ”ํ”„ Scope

์Šค์ฝ”ํ”„ (Scope) - ๋ฒ”์œ„
Javascript์—์„œ ์Šค์ฝ”ํ”„๋ž€ ‘์‹๋ณ„์ž(๋ณ€์ˆ˜)์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ์œ ํšจ๋ฒ”์œ„’๋ฅผ ๋œปํ•œ๋‹ค.

 

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์Šค์ฝ”ํ”„๋Š” 2๊ฐ€์ง€ ํƒ€์ž…์ด ์žˆ๋‹ค.

1. Global (์ „์—ญ)

2. Local (์ง€์—ญ)


์ „์—ญ ์Šค์ฝ”ํ”„(Global Scope)๋Š” ์ „์—ญ์— ์„ ์–ธ๋˜์–ด ์žˆ์–ด ์–ด๋А ๊ณณ์—์„œ๋‚˜ ํ•ด๋‹น ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ณ 

์ง€์—ญ ์Šค์ฝ”ํ”„(Local Scope)๋Š” ํ•ด๋‹น ์ง€์—ญ์—์„œ๋งŒ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค.

let a = "global"
function aPrint() {
	let a = "local"
	console.log(`aPrint : ${a}`)
}
aPrint() //aPrint : local
console.log(`global : ${a}`) //global : global

 

aPrint ํ•จ์ˆ˜ ๋ฐ”๊นฅ์˜ a๋ณ€์ˆ˜๋Š” ์ „์—ญ ๋ณ€์ˆ˜์ด๊ณ  aPrint ํ•จ์ˆ˜ ๋‚ด์˜ a๋ณ€์ˆ˜๋Š” ์ง€์—ญ ๋ณ€์ˆ˜์ด๋‹ค.

aPrint ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•˜๋ฉด aPrint ๋‚ด์— a๋ณ€์ˆ˜๊ฐ€ ์žˆ๊ณ  ์ง€์—ญ ์Šค์ฝ”ํ”„์— ํ•ด๋‹นํ•˜๊ธฐ ๋•Œ๋ฌธ์— aPrint: local์ด ์ถœ๋ ฅ๋˜๊ณ 

aPrint ํ•จ์ˆ˜ ๋ฐ”๊นฅ์—์„œ console.log(`global : ${a}`)๋ฅผ ์‹คํ–‰ํ•˜๋ฉด

์ „์—ญ ์Šค์ฝ”ํ”„์— ํ•ด๋‹นํ•˜๋Š” a๋ฅผ ์ฐพ์•„ ์‹คํ–‰ํ•˜๊ณ  global : global์ด ์ถœ๋ ฅ๋œ๋‹ค

์ž‘๋™ ์›๋ฆฌ๋Š” ๋‹ค์Œ์— ํฌ์ŠคํŒ…ํ•  ์‹คํ–‰ ์ปจํ…์ŠคํŠธ ๊ธ€์—์„œ ์ž์„ธํžˆ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

 

โœ… ์Šค์ฝ”ํ”„ ์ฒด์ธ Scope Chain

์œ„์—์„œ ์•Œ์•„๋ณธ ์ „์—ญ ์Šค์ฝ”ํ”„์™€ ์ง€์—ญ ์Šค์ฝ”ํ”„์˜ ๊ด€๊ณ„์—์„œ ์Šค์ฝ”ํ”„ ์ฒด์ธ(scope chain)์ด๋ผ๋Š” ๊ฐœ๋…์ด ๋“ฑ์žฅํ•œ๋‹ค.

์Šค์ฝ”ํ”„ ์ฒด์ธ์˜ ํŠน์ง•์„ ๊ฐ„๋‹จํ•˜๊ฒŒ ์„ค๋ช…ํ•˜์ž๋ฉด

1. ๋‚ด๋ถ€ ํ•จ์ˆ˜์—์„œ๋Š” ์™ธ๋ถ€ ํ•จ์ˆ˜์˜ ๋ณ€์ˆ˜์— ์ ‘๊ทผ ๊ฐ€๋Šฅํ•˜๊ณ , ์™ธ๋ถ€ ํ•จ์ˆ˜์—์„œ๋Š” ๋‚ด๋ถ€ ํ•จ์ˆ˜์˜ ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์—†๋‹ค.

์ฆ‰, ์•ˆ์—์„œ ๋ฐ”๊นฅ์œผ๋กœ์˜ ํƒ์ƒ‰์€ ๊ฐ€๋Šฅํ•˜๊ณ  ๋ฐ”๊นฅ์—์„œ ์•ˆ์ชฝ์œผ๋กœ์˜ ํƒ์ƒ‰์€ ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค.

2. ๋ชจ๋“  ํ•จ์ˆ˜๋Š” ์ „์—ญ ๊ฐ์ฒด์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค.

 

๋‹ค์Œ ์˜ˆ์‹œ๋ฅผ ๋ณด์ž.

let name = "scope"
function outer() {
	console.log(`outer name : ${name}`)
	function inner() {
		let innerData = "innerData"
		console.log(`inner name : ${name}`)
	}
	inner()
}
outer() 
//outer name : scope
//inner name : scope

console.log(`innerData : ${innerData}`) 
//Uncaught ReferenceError: innerData is not defined

 

 

inner ํ•จ์ˆ˜๋Š” name ๋ณ€์ˆ˜๋ฅผ ์ฐพ๊ธฐ ์œ„ํ•ด

1. ๋จผ์ € ์ž๊ธฐ ์ž์‹ ์˜ ์Šค์ฝ”ํ”„ (Local Scope)๋ฅผ ํƒ์ƒ‰ํ•˜๊ณ 

2. ์—ฌ๊ธฐ์— ์—†์œผ๋ฉด ํ•œ ๋‹จ๊ณ„ ์˜ฌ๋ผ๊ฐ€์„œ outer ์Šค์ฝ”ํ”„๋ฅผ ํƒ์ƒ‰ํ•˜๊ณ ,

3. ๋˜ ์—ฌ๊ธฐ์— ์—†์œผ๋ฉด ๋‹ค์‹œ ์˜ฌ๋ผ๊ฐ€์„œ ๊ฒฐ๊ตญ์—” ์ „์—ญ ์Šค์ฝ”ํ”„(Global Scope)๋ฅผ ํƒ์ƒ‰ํ•œ๋‹ค.

4. ์ „์—ญ ์Šค์ฝ”ํ”„์—์„œ name ๋ณ€์ˆ˜๋ฅผ ์ฐพ์•˜๊ณ  'scope'๋ผ๋Š” ๊ฐ’์„ ์–ป๋Š”๋‹ค.

 

๋งŒ์•ฝ, ์ „์—ญ ์Šค์ฝ”ํ”„์—๋„ ์ฐพ๊ณ ์ž ํ•˜๋Š” ๋ณ€์ˆ˜๊ฐ€ ์—†๋‹ค๋ฉด ๋ณ€์ˆ˜๋ฅผ ์ฐพ์ง€ ๋ชปํ–ˆ๋‹ค๋Š” ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.

์Šค์ฝ”ํ”„ ์ฒด์ธ์€ '์•ˆ์—์„œ ๋ฐ”๊นฅ์œผ๋กœ์˜ ํƒ์ƒ‰์€ ๊ฐ€๋Šฅํ•˜๊ณ  ๋ฐ”๊นฅ์—์„œ ์•ˆ์ชฝ์œผ๋กœ์˜ ํƒ์ƒ‰์€ ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค.' ๋ผ๊ณ  ์„ค๋ช…ํ–ˆ๋‹ค.

๊ทธ๋ž˜์„œ ๋งจ ์•„๋ž˜ console.log(`innerData : ${innerData}`)์˜ ๊ฒฐ๊ณผ๋Š” ์ฐธ์กฐ์—๋Ÿฌ 'innerData is not defined'๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.

console.log ํ•จ์ˆ˜๊ฐ€ ํƒ์ƒ‰ ๊ฐ€๋Šฅํ•œ ๋ฒ”์œ„์ธ Global Scope์— innerData๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

์ด๋ ‡๊ฒŒ ๊ผฌ๋ฆฌ๋ฅผ ๋ฌผ๊ณ  ๊ณ„์† ์ƒ์œ„๋กœ ๋ฒ”์œ„๋ฅผ ๋„“ํžˆ๋ฉฐ ๊ฐ’์„ ์ฐพ์•„๊ฐ€๋Š” ํ˜„์ƒ์„ ์Šค์ฝ”ํ”„ ์ฒด์ธ์ด๋ผ๊ณ  ํ•œ๋‹ค.

 

โœ… ๋ ‰์‹œ์ปฌ ์Šค์ฝ”ํ”„ Lexical Scope

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์Šค์ฝ”ํ”„๋Š” ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ๊ฐ€ ์•„๋‹ˆ๋ผ ์„ ์–ธํ•  ๋•Œ ์ƒ์„ฑ๋œ๋‹ค. ๋•Œ๋ฌธ์— ์ •์  ์Šค์ฝ”ํ”„๋ผ๊ณ ๋„ ๋ถˆ๋ฆฐ๋‹ค.

์•„๋ž˜ ์ฝ”๋“œ์˜ ๊ฒฐ๊ณผ๋ฅผ ์˜ˆ์ƒํ•ด๋ณด์ž.

let name = "IOTrue"
function inner() {
	console.log(name)
}

function outer() {
	let name = "Javascript"
	inner()
}
outer() //???

 

์ถœ๋ ฅ ๊ฒฐ๊ณผ๋Š” ???

.

.

.

IOTrue์ด๋‹ค.

์Šค์ฝ”ํ”„๋Š” ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ๊ฐ€ ์•„๋‹ˆ๋ผ ์„ ์–ธํ•  ๋•Œ ์ƒ์„ฑ๋˜๊ธฐ ๋•Œ๋ฌธ์—

์ตœ์ข…์ ์œผ๋กœ ์ถœ๋ ฅ๋˜๋Š” inner ํ•จ์ˆ˜์˜ name์€

1. inner ํ•จ์ˆ˜ ๋‚ด์˜ Local Scope์—์„œ name์„ ํƒ์ƒ‰ํ•˜๊ณ , ์—ฌ๊ธฐ์— ์—†๊ธฐ ๋•Œ๋ฌธ์—

2. ํ•œ ๋‹จ๊ณ„ ์œ„์˜ ์Šค์ฝ”ํ”„์ธ Global Scope์—์„œ name์„ ํƒ์ƒ‰ํ•˜๊ณ , ์—ฌ๊ธฐ์— ํ•ด๋‹น ๋ณ€์ˆ˜๊ฐ€ ์žˆ์œผ๋ฏ€๋กœ

3. ์ตœ์ข… ์ถœ๋ ฅ ๊ฒฐ๊ณผ๋Š” IOTrue๊ฐ€ ๋œ๋‹ค.

outer์—์„œ ์„ ์–ธํ•œ let name = "Javascript"๋Š” inner ํ•จ์ˆ˜์™€๋Š” ์ƒ๊ด€ ์—†๋Š” ๊ฒƒ์ด๋‹ค.

์ด๋Ÿฌํ•œ ๊ฒƒ์„ ๋ ‰์‹œ์ปฌ ์Šค์ฝ”ํ”„(Lexical scope) ๋˜๋Š” ์ •์  ์Šค์ฝ”ํ”„๋ผ๊ณ  ํ•œ๋‹ค.

 

 

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ๊ผญ ์•Œ์•„์•ผ ํ•˜๋Š” ๊ฐœ๋…์ธ ์Šค์ฝ”ํ”„, ์Šค์ฝ”ํ”„์ฒด์ธ, ๋ ‰์‹œ์ปฌ ์Šค์ฝ”ํ”„์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ดค๋‹ค.

๋‹ค์Œ ํฌ์ŠคํŒ…์€ ์กฐ๊ธˆ ๋” ๊นŠ์ด๊ฐ€ ์žˆ๋Š” ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ๋‹ค.

 

Comments