πŸ”¬ μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ μŠ€μ½”ν”„

thumb_hyeokΒ·2022λ…„ 2μ›” 27일
2

🟑 JavaScript

λͺ©λ‘ 보기
2/15
post-thumbnail

πŸ€” μŠ€μ½”ν”„λž€ λ¬΄μ—‡μΌκΉŒ?

μŠ€μ½”ν”„λž€ μ‹λ³„μžμ— λŒ€ν•œ μœ νš¨λ²”μœ„μ΄λ‹€. λ³€μˆ˜,ν•¨μˆ˜ λ“± λͺ¨λ“  μ‹λ³„μžλŠ” μžμ‹ μ΄ μ„ μ–Έλœ μœ„μΉ˜μ— μ˜ν•΄ μžμ‹ μ΄ μœ νš¨ν•œ λ²”μœ„, 즉 λ‹€λ₯Έ μ½”λ“œκ°€ μžμ‹ μ„ μ°Έμ‘°ν•  수 μžˆλŠ” λ²”μœ„κ°€ κ²°μ •λœλ‹€. μŠ€μ½”ν”„ μ•ˆμ—μ„œ μ„ μ–Έλœ μ‹λ³„μžλŠ” μŠ€μ½”ν”„ μ•ˆμ—μ„œλŠ” μ°Έμ‘°ν•  수 μžˆμ§€λ§Œ μŠ€μ½”ν”„ λ°–μ—μ„œλŠ” μ°Έμ‘°ν•  수 μ—†λ‹€.
즉, μŠ€μ½”ν”„λž€ μ‹λ³„μžκ°€ μœ νš¨ν•œ λ²”μœ„λ₯Ό λ§ν•œλ‹€.

μ•„λž˜μ˜ μ½”λ“œμ˜ λ™μž‘μ„ 톡해 μŠ€μ½”ν”„μ— λŒ€ν•΄ 더 μžμ„Ένžˆ μ•Œμ•„λ³΄μž.

let name= 'Harry';

function foo() {
  let name = 'Hyeok';
  console.log(name); // Hyeok
}
foo();

console.log(name); // Harry

μ—¬κΈ°μ„œ μŠ€μ½”ν”„λ₯Ό ν•™μŠ΅ν•˜κΈ° μœ„ν•΄ μ£Όλͺ©ν•  점은 μ•„λž˜μ™€ κ°™λ‹€.

  • 같은 nameμ΄λΌλŠ” λ³€μˆ˜λ₯Ό 두 번 μ„ μ–Έν–ˆλ‹€.
  • console.log둜 name을 ν˜ΈμΆœν•˜λŠ” μœ„μΉ˜μ— 따라 name의 값이 λ‹¬λΌμ‘Œλ‹€.

μœ„ μ½”λ“œμ—μ„œλŠ” 두 개의 μŠ€μ½”ν”„κ°€ μ‘΄μž¬ν•œλ‹€. "μ „μ—­ μŠ€μ½”ν”„"와 "foo ν•¨μˆ˜ μŠ€μ½”ν”„"이닀. μ „μ—­ μŠ€μ½”ν”„μ—μ„œ μ„ μ–Έλœ λ³€μˆ˜ name(Harry)λŠ” μ½”λ“œ μ „μ²΄μ—μ„œ μ°Έμ‘°ν•  수 μžˆλ‹€. κ·ΈλŸ¬λ‚˜ foo ν•¨μˆ˜ μŠ€μ½”ν”„μ—μ„œ μ„ μ–Έλœ λ³€μˆ˜ name(Hyeok)은 foo ν•¨μˆ˜μ˜ λ‚΄λΆ€μ—μ„œλ§Œ μ°Έμ‘°ν•  수 μžˆλ‹€.
즉, 같은 μ‹λ³„μžλΌλ„ μŠ€μ½”ν”„(유효 λ²”μœ„)κ°€ λ‹€λ₯΄λ‹€. μŠ€μ½”ν”„ λ‚΄μ—μ„œλŠ” μ‹λ³„μžλŠ” μœ μΌν•΄μ•Ό ν•˜μ§€λ§Œ λ‹€λ₯Έ μŠ€μ½”ν”„μ—λŠ” 같은 μ‹λ³„μžκ°€ μžˆμ–΄λ„ 상관없닀. μŠ€μ½”ν”„λŠ” λ„€μž„μŠ€νŽ˜μ΄μŠ€μ΄λ‹€.

κ·Έλž˜μ„œ 첫번째 μ˜λ¬Έμ μ— λ‹΅ν•˜μžλ©΄, μ „μ—­μ—μ„œ μƒμ„±ν•œ λ³€μˆ˜μ™€ fooν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ μ„ μ–Έν•œ λ³€μˆ˜λŠ” nameμ΄λΌλŠ” 같은 μ‹λ³„μžλ₯Ό κ°–μ§€λ§Œ μŠ€μ½”ν”„κ°€ λ‹€λ₯Έ μ „ν˜€ λ‹€λ₯Έ λ³€μˆ˜μΈ 것이닀.

그런데 fooλ‚΄λΆ€μ—μ„œ 찍어본 console.logμ—μ„œλŠ” μ™œ Harryκ°€ μ•„λ‹ˆλΌ Hyeok이 λ‚˜μ™”μ„κΉŒ? μ΄λŠ” μ•„λž˜μ˜ μŠ€μ½”ν”„μ²΄μΈ λΆ€λΆ„μ—μ„œ λ‹€μ‹œ μ•Œμ•„λ³΄μž.


πŸ—‚οΈ μŠ€μ½”ν”„μ˜ μ’…λ₯˜

μ „μ—­ μŠ€μ½”ν”„μ™€ 지역 μŠ€μ½”ν”„

μ½”λ“œλŠ” μ „μ—­κ³Ό μ§€μ—­μœΌλ‘œ ꡬ뢄할 수 μžˆλ‹€. 이 λ•Œ 전역은 μ½”λ“œμ˜ κ°€μž₯ λ°”κΉ₯ μ˜μ—­μ„ λ§ν•œλ‹€. 전역은 μ „μ—­ μŠ€μ½”ν”„λ₯Ό λ§Œλ“€κ³ , 전역에 λ³€μˆ˜λ₯Ό μ„ μ–Έν•˜λ©΄ μ „μ—­ μŠ€μ½”ν”„λ₯Ό κ°–λŠ” μ „μ—­ λ³€μˆ˜κ°€ λœλ‹€. μ „μ—­ λ³€μˆ˜λŠ” μ–΄λ””μ„œλ“ μ§€ μ°Έμ‘°ν•  수 μžˆλ‹€. 그에 λΉ„ν•΄ 지역 λ³€μˆ˜λŠ” λ³€μˆ˜κ°€ μ„ μ–Έλœ μŠ€μ½”ν”„ λ‚΄λΆ€(지역)μ—μ„œλ§Œ μ°Έμ‘°ν•  수 μžˆλ‹€.


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

ES5κΉŒμ§€μ˜ μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” νŠΉμ΄ν•˜κ²Œλ„ 였직 ν•¨μˆ˜μ— μ˜ν•΄μ„œλ§Œ 지역 μŠ€μ½”ν”„κ°€ 생성됐닀. μœ„μ—μ„œ μ‚΄νŽ΄λ³Έ foo ν•¨μˆ˜ μŠ€μ½”ν”„κ°€ 지역 μŠ€μ½”ν”„μ˜ μ˜ˆμ‹œμ΄λ‹€. ES6λΆ€ν„°λŠ” λͺ¨λ“  μ½”λ“œ 블둝 (if, for, while λ“±λ“±)이 지역 μŠ€μ½”ν”„λ₯Ό λ§Œλ“ λ‹€.

이 λ•Œ, var둜 μ„ μ–Έν•œ λ³€μˆ˜λŠ” ν•¨μˆ˜λ‘œ λ§Œλ“€μ–΄μ§„ μŠ€μ½”ν”„λ§Œμ„ 지역 μŠ€μ½”ν”„λ‘œ μΈμ •ν•˜λŠ”λ°, μ΄λŸ¬ν•œ νŠΉμ„±μ„ "ν•¨μˆ˜ 레벨 μŠ€μ½”ν”„"라고 ν•œλ‹€. μ΄λŠ” 문제λ₯Ό λ°œμƒμ‹œν‚¬ 수 μžˆλŠ”λ°, μ•„λž˜μ˜ μ˜ˆμ‹œ μ½”λ“œλ₯Ό 톡해 문제λ₯Ό μ‚΄νŽ΄λ³΄μž.

var i = 10;

for (var i=0; i<5; i++) {
  console.log(i) // 0 1 2 3 4순으둜 좜λ ₯
}

console.log(i) // 5

λ§ˆμ§€λ§‰ console.logλ₯Ό 보면 μ•Œ 수 μžˆκ² μ§€λ§Œ i의 값이 μ˜λ„μΉ˜ μ•Šκ²Œ λ³€κ²½λ˜μ—ˆλ‹€. varν‚€μ›Œλ“œλ‘œ μ„ μ–Έν•œ λ³€μˆ˜λŠ” 쀑볡 선언이 κ°€λŠ₯ν•˜λ‹€. λ™μ‹œμ— ν•¨μˆ˜ 레벨 μŠ€μ½”ν”„λ₯Ό 가지기 λ•Œλ¬Έμ— forλ¬Έ μ•ˆμ—μ„œ 선언을 ν–ˆλ”λΌλ„ iλŠ” μ „μ—­λ³€μˆ˜λ‘œ μ„ μ–Έλœλ‹€.

var ν‚€μ›Œλ“œλ‘œ μ„ μ–Έν•œ λ³€μˆ˜λ₯Ό 쀑볡 μ„ μ–Έν•˜λ©΄ μ΄ˆκΈ°ν™”λ¬Έ μœ λ¬΄μ— 따라 λ‹€λ₯΄κ²Œ λ™μž‘ν•œλ‹€. μ΄ˆκΈ°ν™” 문이 μžˆλŠ” λ³€μˆ˜ 선언문은 μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진에 μ˜ν•΄ var ν‚€μ›Œλ“œκ°€ μ—†λŠ” κ²ƒμ²˜λŸΌ λ™μž‘ν•˜κ³ , μ΄ˆκΈ°ν™”λ¬Έμ΄ μ—†λŠ” λ³€μˆ˜ 선언문은 λ¬΄μ‹œλœλ‹€.

κ·Έλ ‡κΈ° λ•Œλ¬Έμ— μœ„μ™€ 같은 λ¬Έμ œκ°€ λ°œμƒλœ 것이닀.


블둝 레벨 μŠ€μ½”ν”„

μœ„μ—μ„œ μ‚΄νŽ΄λ³Έ κ²ƒμ²˜λŸΌ var ν‚€μ›Œλ“œλŠ” ν•¨μˆ˜ 레벨 μŠ€μ½”ν”„λΌλŠ” νŠΉμ„±μ„ 가진닀. λ°˜λ©΄μ—, let,const ν‚€μ›Œλ“œλŠ” "블둝 레벨 μŠ€μ½”ν”„"λΌλŠ” νŠΉμ„±μ„ 가진닀. ν•¨μˆ˜λ‘œ λ§Œλ“€μ–΄μ§„ 지역 μŠ€μ½”ν”„ 뿐만 μ•„λ‹ˆλΌ, λͺ¨λ“  μ½”λ“œ 블둝(if, for, while λ“±λ“±)으둜 λ§Œλ“€μ–΄μ§„ 지역 μŠ€μ½”ν”„λ₯Ό 지역 μŠ€μ½”ν”„λ‘œ μΈμ •ν•œλ‹€λŠ” λœ»μ΄λ‹€.

let i = 10;

for (let i=0; i<5; i++) {
  console.log(i) // 0 1 2 3 4순으둜 좜λ ₯  
}

console.log(i) // 10

μ•„κΉŒμ™€ 같은 μ˜ˆμ‹œ μ½”λ“œλ₯Ό λ“€κ³  μ™€μ„œ var ν‚€μ›Œλ“œλ§Œ let 으둜 λ°”κΏ”λ΄€λ‹€. let ν‚€μ›Œλ“œλ‘œ μ„ μ–Έλœ λ³€μˆ˜λŠ” 블둝 레벨 μŠ€μ½”ν”„λ₯Ό λ”°λ₯΄κΈ° λ•Œλ¬Έμ— forλ¬Έ μ•ˆμ—μ„œ μƒμ„±λœ i와 μ „μ—­μ—μ„œ μƒμ„±λœ iλŠ” μ‹λ³„μžκ°€ κ°™μ§€λ§Œ μŠ€μ½”ν”„κ°€ λ‹€λ₯Έ μ „ν˜€ λ‹€λ₯Έ λ³€μˆ˜μ΄λ‹€.
λ§λΆ™μ΄μžλ©΄ letκ³Ό const ν‚€μ›Œλ“œλŠ” λ³€μˆ˜ 쀑볡 선언을 ν—ˆμš©ν•˜μ§€ μ•ŠλŠ”λ‹€.


πŸ–‡οΈ μŠ€μ½”ν”„ 체인

μš°λ¦¬λŠ” μ½”λ“œλ₯Ό μž‘μ„±ν•  λ•Œ μ½”λ“œ λΈ”λŸ­μ„ μ€‘μ²©λ˜κ²Œ μž‘μ„±ν•  수 μžˆλ‹€. forλ¬Έ μ•ˆμ— if문을 μž‘μ„±ν•˜κ±°λ‚˜, ν•¨μˆ˜ μ•ˆμ— try, catch문을 μž‘μ„±ν•  μˆ˜λ„ 있고 ν•¨μˆ˜λ₯Ό ν•¨μˆ˜ λͺΈμ²΄ λ‚΄λΆ€μ—μ„œ μ •μ˜ν•  μˆ˜λ„ μžˆλ‹€. ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ μ •μ˜ν•œ ν•¨μˆ˜λ₯Ό 쀑첩 ν•¨μˆ˜(nested function), 쀑첩 ν•¨μˆ˜λ₯Ό ν¬ν•¨ν•˜λŠ” ν•¨μˆ˜λ₯Ό μ™ΈλΆ€ ν•¨μˆ˜(outer function)라고 ν•œλ‹€.

이런 μ‹μœΌλ‘œ ν•¨μˆ˜κ°€ μ€‘μ²©λ˜κ²Œ μž‘μ„±ν•˜λ©΄ μŠ€μ½”ν”„λ„ 쀑첩될 수 μžˆλ‹€. μ΄λŠ” μŠ€μ½”ν”„κ°€ ν•¨μˆ˜μ˜ 쀑첩에 μ˜ν•΄ 계측적 ꡬ쑰λ₯Ό κ°–λŠ”λ‹€λŠ” 것을 μ˜λ―Έν•œλ‹€. 이 λ•Œ μ™ΈλΆ€ ν•¨μˆ˜μ˜ μŠ€μ½”ν”„λ₯Ό μƒμœ„ μŠ€μ½”ν”„λΌ ν•œλ‹€.

let name = 'Harry';
let age = 23;
let mbti = 'ISTJ'

function outer() {
  let name = 'Hyeok';
  let age = 20;
  
  console.log(name);
  console.log(age);
  console.log(mbti);
  
  function inner() {
    let name = 'Thumb';
    
    console.log(name);
  	console.log(age);
  	console.log(mbti);
    }
  	inner();
  }

console.log(name);
console.log(age);
console.log(mbti);
outer();

// 각각 console.logμ—μ„œ 무슨 값이 좜λ ₯될 지 μ˜ˆμƒν•΄λ³΄λΌ.

μœ„μ˜ μ˜ˆμ œμ—μ„œ outer, inner ν•¨μˆ˜κ°€ 지역 μŠ€μ½”ν”„λ₯Ό λ§Œλ“€κ³ , inner ν•¨μˆ˜λŠ” outer ν•¨μˆ˜μ˜ μ€‘μ²©ν•¨μˆ˜μ΄λ‹€. outer ν•¨μˆ˜κ°€ λ§Œλ“  지역 μŠ€μ½”ν”„λŠ” inner ν•¨μˆ˜κ°€ λ§Œλ“  지역 μŠ€μ½”ν”„μ˜ μƒμœ„ μŠ€μ½”ν”„μ΄λ‹€. μ „μ—­ μŠ€μ½”ν”„λŠ” outer ν•¨μˆ˜μ˜ 지역 μŠ€μ½”ν”„μ˜ μƒμœ„ μŠ€μ½”ν”„μ΄λ‹€.

이처럼 λͺ¨λ“  μŠ€μ½”ν”„λŠ” ν•˜λ‚˜μ˜ 계측적 ꡬ쑰둜 μ—°κ²°λ˜λ©°, λͺ¨λ“  지역 μŠ€μ½”ν”„μ˜ μ΅œμƒμœ„ μŠ€μ½”ν”„λŠ” μ „μ—­ μŠ€μ½”ν”„μ΄λ‹€. μ΄λ ‡κ²Œ μŠ€μ½”ν”„κ°€ κ³„μΈ΅μ μœΌλ‘œ μ—°κ²°λœ 것을 μŠ€μ½”ν”„ 체인(scope chain)이라고 ν•œλ‹€.

λ³€μˆ˜λ₯Ό μ°Έμ‘°ν•  λ•Œ μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 μŠ€μ½”ν”„ 체인을 톡해 λ³€μˆ˜λ₯Ό μ°Έμ‘°ν•˜λŠ” μ½”λ“œμ˜ μŠ€μ½”ν”„μ—μ„œ μ‹œμž‘ν•˜μ—¬ μƒμœ„ μŠ€μ½”ν”„ λ°©ν–₯으둜 μ΄λ™ν•˜λ©° μ„ μ–Έλœ λ³€μˆ˜λ₯Ό 검색(identifier resolution)ν•œλ‹€. μ΄λŠ” ν•˜μœ„ μŠ€μ½”ν”„μ—μ„œ μƒμœ„ μŠ€μ½”ν”„λ‘œ 단방ν–₯으둜만 μ΄λ™ν•˜κΈ° λ•Œλ¬Έμ— μƒμœ„ μŠ€μ½”ν”„μ˜ μ‹λ³„μžλŠ” ν•˜μœ„ μŠ€μ½”ν”„μ—μ„œ μ°Έμ‘°ν•  수 μžˆμ§€λ§Œ, ν•˜μœ„ μŠ€μ½”ν”„μ˜ μ‹λ³„μžλŠ” μƒμœ„ μŠ€μ½”ν”„μ—μ„œ μ°Έμ‘°ν•  수 μ—†λ‹€.

이제 μœ„μ˜ μ½”λ“œμ˜ console.logμ—μ„œ μ–΄λ–€ 값이 좜λ ₯λ˜λŠ”μ§€, λ˜ν•œ κ·ΈλŸ¬ν•œ 값이 μ–΄λ–»κ²Œ κ΅¬ν•΄μ§€κ²Œ λ˜μ—ˆλŠ”μ§€μ˜ κ³Όμ •κΉŒμ§€ μ‚΄νŽ΄λ³΄μž.

let name = 'Harry';
let age = 23;
let mbti = 'ISTJ'

function outer() {
  let name = 'Hyeok';
  let age = 20;
  
  console.log(name); // Hyeok (outerν•¨μˆ˜ μŠ€μ½”ν”„)
  console.log(age); // 20 (outerν•¨μˆ˜ μŠ€μ½”ν”„)
  console.log(mbti); // ISTJ (outerν•¨μˆ˜ μŠ€μ½”ν”„ -> μ „μ—­ μŠ€μ½”ν”„)
  
  function inner() {
    let name = 'Thumb'; 
    
    console.log(name); // Thumb (innerν•¨μˆ˜ μŠ€μ½”ν”„)
  	console.log(age); // 20 (innerν•¨μˆ˜ μŠ€μ½”ν”„ -> outerν•¨μˆ˜ μŠ€μ½”ν”„)
  	console.log(mbti); 
    // ISTJ (innerν•¨μˆ˜ μŠ€μ½”ν”„ -> outerν•¨μˆ˜ μŠ€μ½”ν”„ -> μ „μ—­ μŠ€μ½”ν”„)
    }
  	inner();
  }

console.log(name); // Harry (μ „μ—­ μŠ€μ½”ν”„)
console.log(age); // 23 (μ „μ—­ μŠ€μ½”ν”„)
console.log(mbti); // ISTJ (μ „μ—­ μŠ€μ½”ν”„)
outer();

μœ„ μ½”λ“œμ—μ„œ μ•Œ 수 μžˆλ“―μ΄ μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 μŠ€μ½”ν”„ 체인을 톡해 λ³€μˆ˜λ₯Ό μ°Έμ‘°ν•˜λŠ” μ½”λ“œμ˜ μŠ€μ½”ν”„μ—μ„œ μ‹œμž‘ν•˜μ—¬ μƒμœ„ μŠ€μ½”ν”„ λ°©ν–₯으둜 μ΄λ™ν•˜λ©° μ„ μ–Έλœ λ³€μˆ˜λ₯Ό 검색(identifier resolution)ν•œλ‹€. μœ„ μ½”λ“œλ₯Ό μ˜ˆμ‹œλ‘œ λ“€μ–΄ μ„€λͺ…ν•˜κ² λ‹€.

inner ν•¨μˆ˜ μ•ˆμ— μžˆλŠ” console.log(mbti) λ¬Έμ—μ„œ μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 inner ν•¨μˆ˜κ°€ λ§Œλ“  지역 μŠ€μ½”ν”„μ—μ„œ mbti λΌλŠ” μ‹λ³„μžλ₯Ό μ°Ύκ³ , 선언이 μ‘΄μž¬ν•˜μ§€ μ•ŠμœΌλ―€λ‘œ outer ν•¨μˆ˜κ°€ λ§Œλ“  지역 μŠ€μ½”ν”„λ‘œ μ΄λ™ν•˜μ—¬ mbti λΌλŠ” μ‹λ³„μžλ₯Ό μ°Ύκ³ , 선언이 μ‘΄μž¬ν•˜μ§€ μ•ŠμœΌλ―€λ‘œ μ΅œμƒμœ„ μŠ€μ½”ν”„μΈ μ „μ—­ μŠ€μ½”ν”„λ‘œ 이동해 mbti λΌλŠ” μ‹λ³„μžλ₯Ό μ°Ύμ•„ ISTJλΌλŠ” 값을 좜λ ₯ν–ˆλ‹€.

이제 μœ„μ— μ‚΄νŽ΄ λ³Έ λ‘λ²ˆμ§Έ 의문점인

  • console.log둜 name을 ν˜ΈμΆœν•˜λŠ” μœ„μΉ˜μ— 따라 name의 값이 λ‹¬λΌμ‘Œλ‹€.

에 λŒ€ν•œ 닡을 말할 수 μžˆμ„ 것이닀. 닡을 찾지 λͺ»ν–ˆλ‹€λ©΄ 글을 λ‹€μ‹œ 읽어보기λ₯Ό μΆ”μ²œν•œλ‹€. 이에 λŒ€ν•΄ 더 μžμ„Έν•œ 이야기λ₯Ό μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό λ‹€λ£¨λŠ” λ‹€μŒ κΈ€μ—μ„œ λ‹€λ£° μ˜ˆμ •μ΄κΈ° λ•Œλ¬Έμ— μΆ©λΆ„νžˆ μ΄ν•΄ν•˜κ³  λ„˜μ–΄κ°€κΈ°λ₯Ό λ°”λž€λ‹€.


동적 μŠ€μ½”ν”„μ™€ λ ‰μ‹œμ»¬ μŠ€μ½”ν”„(정적 μŠ€μ½”ν”„)

일반적으둜 ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄λŠ” μ–΄λ–€ ν•¨μˆ˜μ˜ μƒμœ„ μŠ€μ½”ν”„λ₯Ό κ²°μ •ν•  λ•Œ 동적 μŠ€μ½”ν”„(dynamic scope)λ‚˜ λ ‰μ‹œμ»¬ μŠ€μ½”ν”„(lexical scope) λ˜λŠ” 정적 μŠ€μ½”ν”„(static scope)라고 λΆˆλ¦¬λŠ” 두가지 방식 쀑에 ν•œ 가지 λ°©μ‹μœΌλ‘œ ν•¨μˆ˜μ˜ μƒμœ„ μŠ€μ½”ν”„λ₯Ό κ²°μ •ν•œλ‹€.

μ•„λž˜ μ˜ˆμ‹œμ½”λ“œλ₯Ό 톡해 동적 μŠ€μ½”ν”„μ™€ λ ‰μ‹œμ»¬ μŠ€μ½”ν”„μ˜ 차이λ₯Ό 비ꡐ해보도둝 ν•˜κ² λ‹€.

let num = 10;

function foo() {
  let num = 20;
  boo(); 
}

function boo() {
  console.log(num); 
}

foo(); // ??
boo(); // ??

동적 μŠ€μ½”ν”„

동적 μŠ€μ½”ν”„λŠ” ν•¨μˆ˜λ₯Ό μ–΄λ””μ„œ ν˜ΈμΆœν–ˆλŠ”μ§€μ— 따라 ν•¨μˆ˜μ˜ μƒμœ„ μŠ€μ½”ν”„λ₯Ό κ²°μ •ν•œλ‹€.
boo ν•¨μˆ˜λŠ” ν”„λ‘œκ·Έλž¨ μ „μ²΄μ—μ„œ 두 번 ν˜ΈμΆœλ˜λŠ”λ°, μ²«λ²ˆμ§ΈλŠ” foo ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ, λ‘λ²ˆμ§ΈλŠ” μ „μ—­μ—μ„œ ν˜ΈμΆœλœλ‹€.

동적 μŠ€μ½”ν”„λŠ” ν•¨μˆ˜κ°€ ν˜ΈμΆœλ˜λŠ” μ‹œμ μ— λ™μ μœΌλ‘œ μƒμœ„ μŠ€μ½”ν”„κ°€ 정해지기 λ•Œλ¬Έμ—, foo ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ 호좜될 λ•ŒλŠ” boo ν•¨μˆ˜λŠ” foo ν•¨μˆ˜μ˜ 지역 μŠ€μ½”ν”„μ™€, μ „μ—­ μŠ€μ½”ν”„λ₯Ό μƒμœ„ μŠ€μ½”ν”„λ‘œ 가진닀. μ „μ—­μ—μ„œ 호좜될 λ•ŒλŠ” μ „μ—­ μŠ€μ½”ν”„λ§Œμ„ μƒμœ„ μŠ€μ½”ν”„λ‘œ 가진닀.

let num = 10;

function foo() {
  let num = 20;
  boo();
}

function boo() {
  console.log(num); 
}

foo(); // 20
boo(); // 10 

μœ„ μ½”λ“œ κ²°κ³ΌλŠ” λ§Œμ•½ μžλ°”μŠ€ν¬λ¦½νŠΈκ°€ 동적 μŠ€μ½”ν”„ λ°©μ‹μœΌλ‘œ μƒμœ„ μŠ€μ½”ν”„λ₯Ό κ²°μ •ν•  λ•Œμ˜ κ²°κ³Όλ₯Ό 보여쀀 것이닀. κ·ΈλŸ¬λ‚˜, μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” λ ‰μ‹œμ»¬ μŠ€μ½”ν”„λ₯Ό λ”°λ₯Έλ‹€.


λ ‰μ‹œμ»¬ μŠ€μ½”ν”„(정적 μŠ€μ½”ν”„)

λ ‰μ‹œμ»¬ μŠ€μ½”ν”„λŠ” ν•¨μˆ˜λ₯Ό μ–΄λ””μ„œ μ •μ˜ν–ˆλŠ”μ§€μ— 따라 ν•¨μˆ˜μ˜ μƒμœ„ μŠ€μ½”ν”„λ₯Ό κ²°μ •ν•œλ‹€. μœ„μ—μ„œ μ–ΈκΈ‰ν–ˆλ“―μ΄ μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” λ ‰μ‹œμ»¬ μŠ€μ½”ν”„λ₯Ό λ”°λ₯Έλ‹€. κ·ΈλŸ¬λ―€λ‘œ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•œ μœ„μΉ˜λŠ” μƒμœ„ μŠ€μ½”ν”„ 결정에 μ–΄λ– ν•œ 영ν–₯도 주지 μ•ŠλŠ”λ‹€.
즉, ν•¨μˆ˜μ˜ μƒμœ„ μŠ€μ½”ν”„λŠ” μ–Έμ œλ‚˜ μžμ‹ μ΄ μ •μ˜λœ μŠ€μ½”ν”„μ΄λ‹€.

ν•¨μˆ˜ μ •μ˜κ°€ μ‹€ν–‰λ˜μ–΄ μƒμ„±λœ ν•¨μˆ˜ κ°μ²΄λŠ” μ΄λ ‡κ²Œ κ²°μ •λœ μƒμœ„ μŠ€μ½”ν”„λ₯Ό κΈ°μ–΅ν•œλ‹€. 동적 μŠ€μ½”ν”„ 방식과 달리 ν•¨μˆ˜κ°€ 호좜될 λ•Œλ§ˆλ‹€ ν•¨μˆ˜μ˜ μƒμœ„ μŠ€μ½”ν”„λ₯Ό μ°Έμ‘°ν•  ν•„μš”κ°€ 있기 λ•Œλ¬Έμ΄λ‹€.

let num = 10;

function foo() {
  let num = 20;
  boo();
}

function boo() {
  console.log(num); 
}

foo(); // 10
boo(); // 10 

🧐 정리

  • μŠ€μ½”ν”„λž€ μ‹λ³„μžκ°€ μœ νš¨ν•œ λ²”μœ„λ₯Ό λ§ν•œλ‹€.
  • μŠ€μ½”ν”„μ˜ μ’…λ₯˜λŠ” μ „μ—­ μŠ€μ½”ν”„μ™€ 지역 μŠ€μ½”ν”„κ°€ μžˆλ‹€.
  • var ν‚€μ›Œλ“œλŠ” 쀑볡선언이 κ°€λŠ₯ν•˜κ³  ν•¨μˆ˜ 레벨 μŠ€μ½”ν”„λ₯Ό νŠΉμ„±μœΌλ‘œ κ°–λŠ”λ‹€
  • let, const ν‚€μ›Œλ“œλŠ” 쀑볡선언이 λΆˆκ°€λŠ₯ν•˜κ³  블둝 레벨 μŠ€μ½”ν”„λ₯Ό νŠΉμ„±μœΌλ‘œ κ°–λŠ”λ‹€
  • μŠ€μ½”ν”„ μ²΄μΈμ΄λž€ μŠ€μ½”ν”„κ°€ μ€‘μ²©λ˜μ–΄ 계측적 ꡬ쑰λ₯Ό κ°–λŠ” 것을 μ˜λ―Έν•œλ‹€.
  • ν•¨μˆ˜μ˜ μƒμœ„ μŠ€μ½”ν”„λ₯Ό κ²°μ •ν•˜λŠ” λ°©μ‹μœΌλ‘œ 동적 μŠ€μ½”ν”„μ™€ λ ‰μ‹œμ»¬ μŠ€μ½”ν”„(정적 μŠ€μ½”ν”„)κ°€ μžˆλ‹€. (μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” λ ‰μ‹œμ»¬ μŠ€μ½”ν”„λ₯Ό λ”°λ₯Έλ‹€)

πŸ“– 참고자료

  • μ½”μ–΄ μžλ°”μŠ€ν¬λ¦½νŠΈ

      1. μ‹€ν–‰μ»¨ν…μŠ€νŠΈ (36p~63p)
  • λͺ¨λ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ Deep Dive

      1. μŠ€μ½”ν”„ (189p~199p)
      1. μ „μ—­ λ³€μˆ˜μ˜ 문제점 (200p~207p)
      1. let, const ν‚€μ›Œλ“œμ™€ 블둝 레벨 μŠ€μ½”ν”„ (208p~218p)
  • μš°ν…Œμ½” ν”„λ‘ νŠΈμ—”λ“œJS 레벨1 - 2022

    • μžλ™μ°¨ κ²½μ£Ό πŸ”¬ Execution Context & Scope
profile
μš°μ•„ν•œν…Œν¬μ½”μŠ€ 4κΈ° μ›Ή ν”„λ‘ νŠΈμ—”λ“œ

1개의 λŒ“κΈ€

comment-user-thumbnail
2022λ…„ 3μ›” 4일

good

λ‹΅κΈ€ 달기