🎨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) λ˜λŠ” 정적 μŠ€μ½”ν”„λΌκ³  ν•œλ‹€.

 

 

μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό μ‚¬μš©ν•œλ‹€λ©΄ κΌ­ μ•Œμ•„μ•Ό ν•˜λŠ” κ°œλ…μΈ μŠ€μ½”ν”„, μŠ€μ½”ν”„μ²΄μΈ, λ ‰μ‹œμ»¬ μŠ€μ½”ν”„μ— λŒ€ν•΄μ„œ μ•Œμ•„λ΄€λ‹€.

λ‹€μŒ ν¬μŠ€νŒ…μ€ 쑰금 더 κΉŠμ΄κ°€ μžˆλŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ— λŒ€ν•΄ μ•Œμ•„λ³΄κ² λ‹€.