Programming/JavaScript

[λͺ¨λ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ Deep Dive] 13μž₯ μŠ€μ½”ν”„

yuri lee 2023. 5. 30. 18:18
λ°˜μ‘ν˜•

13.1 μŠ€μ½”ν”„λž€?


λͺ¨λ“  μ‹λ³„μž(λ³€μˆ˜ 이름, ν•¨μˆ˜ 이름, 클래슀 이름 λ“±)λŠ” μžμ‹ μ΄ μ„ μ–Έλœ μœ„μΉ˜μ— μ˜ν•΄ λ‹€λ₯Έ μ½”λ“œκ°€ μ‹λ³„μž μžμ‹ μ„ μ°Έμ‘°ν•  수 μžˆλŠ” 유 λ²”μœ„κ°€ κ²°μ •λ˜λΉ„λ‹€. 이λ₯Ό μŠ€μ½”ν”„λΌκ³  ν•©λ‹ˆλ‹€. 즉 μŠ€μ½”ν”„λŠ” μ‹λ³„μžκ°€ μœ νš¨ν•œ λ²”μœ„λ₯Ό λ§ν•©λ‹ˆλ‹€. 

var x = 'global'

function foo() {
  var x = 'local'
  console.log(x) //local
}

foo()

console.log(x) //global

 

13.2 μŠ€μ½”ν”„μ˜ μ’…λ₯˜


μ½”λ“œλŠ” μ „μ—­κ³Ό μ§€μ—­μœΌλ‘œ ꡬ뢄할 수 μžˆμŠ΅λ‹ˆλ‹€ 

 

13.2.1 μ „μ—­κ³Ό 지역 μŠ€μ½”ν”„

μ „μ—­μ΄λž€ μ½”λ“œμ˜ κ°€μž₯ λ°”κΉ₯ μ˜μ—­μ„ λ§ν•©λ‹ˆλ‹€. 전역은 μ „μ—­ μŠ€μ½”ν”„λ₯Ό λ§Œλ“­λ‹ˆλ‹€. μ „μ—­ λ³€μˆ˜λŠ” μ–΄λ””μ„œλ“  μ°Έμ‘°ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

 

13.2.2 지역과 지역 μŠ€μ½”ν”„

μ§€μ—­μ΄λž€ ν•¨μˆ˜ λͺΈμ²΄ λ‚΄λΆ€λ₯Ό λ§ν•©λ‹ˆλ‹€. 지역은 지역 μŠ€μ½”ν”„ (local scope)λ₯Ό λ§Œλ“­λ‹ˆλ‹€. 지역 λ³€μˆ˜λŠ” μžμ‹ μ˜ 지역 μŠ€μ½”ν”„μ™€ ν•˜μœ„ 지역 μŠ€μ½”ν”„μ—μ„œ μœ νš¨ν•©λ‹ˆλ‹€ .

 

13.3 μŠ€μ½”ν”„ 체인


 
ν•¨μˆ˜λŠ” 쀑첩될 수 μžˆμœΌλ―€λ‘œ ν•¨μˆ˜μ˜ 지역 μŠ€μ½”ν”„λ„ 쀑촙될 수 μžˆμŠ΅λ‹ˆλ‹€. μ΄λŠ” μŠ€μ½”ν”„κ°€ ν•¨μˆ˜μ˜ 쀑첩에 μ˜ν•΄ 계측적 ꡬ쑰λ₯Ό κ°–λŠ”λ‹€λŠ” 것을 μ˜λ―Έν•©λ‹ˆλ‹€. 

 

13.4 ν•¨μˆ˜ 레벨 μŠ€μ½”ν”„


μ½”λ“œ 블둝이 μ•„λ‹Œ ν•¨μˆ˜μ— μ˜ν•΄μ„œλ§Œ 지역 μŠ€μ½”ν”„κ°€ μƒμ„±λ©λ‹ˆλ‹€. Cλ‚˜ μžλ°” λ“±μ˜ ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄λŠ” ν•¨μˆ˜ λͺΈμ²΄λ§Œμ΄ μ•„λ‹ˆλΌ λͺ¨λ“  μ½”λ“œ 블둝 (if , for, while, try/catch λ“±)이 지역 μŠ€μ½”ν”„λ₯Ό λ§Œλ“­λ‹ˆλ‹€. 이 νŠΉμ„±μ„ 블둝 레벨 μŠ€μ½”ν”„ (block level scope)라고 ν•©λ‹ˆλ‹€. 
 
ν•˜μ§€λ§Œ var ν‚€μ›Œλ“œλ‘œ μ„ μ–Έλœ λ³€μˆ˜λŠ” ν•¨μˆ˜μ˜ μ½”λ“œ λΈ”λ‘λ§Œμ„ 지역 μŠ€μ½”ν”„λ‘œ μΈμ •ν•©λ‹ˆλ‹€. λ”°λΌμ„œ μ˜λ„μΉ˜ μ•Šκ²Œ μ „μ—­ λ³€μˆ˜μ˜ 값이 μž¬ν• λ‹Ήλ˜λŠ” λ“±μ˜ λ¬Έμ œκ°€ λ°œμƒν•©λ‹ˆλ‹€.
 
ES6μ—μ„œ λ„μž…λœ let, const ν‚€μ›Œλ“œλŠ” 블둝 레벨 μŠ€μ½”ν”„λ₯Ό μ§€μ›ν•˜λ―€λ‘œ ν•΄λ‹Ή λΆ€μž‘μš©μ„ 방지할 수 μžˆμŠ΅λ‹ˆλ‹€. 

 

13.5 λ ‰μ‹œμ»¬ μŠ€μ½”ν”„


 
1. ν•¨μˆ˜λ₯Ό μ–΄λ””μ„œ ν˜ΈμΆœν–ˆλŠλƒ 따라 ν•¨μˆ˜μ˜ μƒμœ„ μŠ€μ½”ν”„λ₯Ό κ²°μ •ν•œλ‹€. 
2. ν•¨μˆ˜λ₯Ό μ–΄λ””μ„œ μ •μ˜ν–ˆλŠ”μ§€μ— 따라 ν•¨μˆ˜μ˜ μƒμœ„ μŠ€μ½”ν”„λ₯Ό κ²°μ •ν•œλ‹€. 
 
μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” λ ‰μ‹œμ»¬ μŠ€μ½”ν”„λ₯Ό λ‹€λ₯΄λ―€λ‘œ ν•¨μˆ˜λ₯Ό μ–΄λ””μ„œ ν˜ΈμΆœν–ˆλŠ”μ§€κ°€ μ•„λ‹ˆλΌ ν•¨μˆ˜λ₯Ό μ–΄λ””μ„œ μ •μ˜ν–ˆλŠ”μ§€μ— 따라 μƒμœ„ μŠ€μ½”ν”„λ₯Ό κ²°μ •ν•©λ‹ˆλ‹€. ν•¨μˆ˜κ°€ 호좜된 μœ„μΉ˜λŠ” μƒμœ„ μŠ€μ½”ν”„ 결정에 μ–΄λ– ν•œ 영ν–₯을 주지 μ•ŠμŠ΅λ‹ˆλ‹€. 
 
ν•¨μˆ˜μ˜ μƒμœ„ μŠ€μ½”ν”„λŠ” μ–Έμ œλ‚˜ μžμ‹ μ΄ μ •μ˜λœ μŠ€μ½”ν”„μž…λ‹ˆλ‹€. ν•¨μˆ˜μ˜ μƒμœ„ μŠ€μ½”ν”„λŠ” ν•¨μˆ˜ μ •μ˜κ°€ 싀행될 λ•Œ μ •μ μœΌλ‘œ κ²°μ •λ©λ‹ˆλ‹€. ν•¨μˆ˜ μ •μ˜κ°€ μ‹€ν–‰λ˜μ–΄ μƒμ„±λœ ν•¨μˆ˜ κ°μ²΄λŠ” μ΄λ ‡κ²Œ κ²°μ •λœ μƒμœ„ μŠ€μ½”ν”„λ₯Ό κΈ°μ–΅ν•©λ‹ˆλ‹€.
 

var x = 1;

function foo() {
  var x = 10;
  bar();
}

function bar() {
  console.log(x);
}

foo();
bar();

λͺ¨λ‘ 1μ΄λΌλŠ” κ²°κ³Όκ°€ λ‚˜μ˜€κ²Œ λ©λ‹ˆλ‹€. 
 
 

Reference: λͺ¨λ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ Deep Dive
λ°˜μ‘ν˜•