관리 메뉴

Daily Front_Minhhk

[23μž₯] μžλ°”μŠ€ν¬λ¦½νŠΈ λ”₯λ‹€μ΄λΈŒ_μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ λ³Έλ¬Έ

Study/JS_λ”₯λ‹€μ΄λΈŒ

[23μž₯] μžλ°”μŠ€ν¬λ¦½νŠΈ λ”₯λ‹€μ΄λΈŒ_μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ

Minhhk 2023. 11. 24. 12:18
πŸ“Œ μ†ŒμŠ€μ½”λ“œλ₯Ό μ‹€ν–‰ν•˜λŠ”λ° ν•„μš”ν•œ ν™˜κ²½μ„ μ œκ³΅ν•˜κ³  μ½”λ“œμ˜ μ‹€ν–‰ κ²°κ³Όλ₯Ό μ‹€μ œλ‘œ κ΄€λ¦¬ν•˜λŠ” μ˜μ—­

 

μ‹λ³„μž(λ³€μˆ˜, ν•¨μˆ˜, 클래슀)λ₯Ό λ“±λ‘ν•˜κ³  κ΄€λ¦¬ν•˜λŠ” μŠ€μ½”ν”„μ™€, μ½”λ“œ μ‹€ν–‰ μˆœμ„œ 관리λ₯Ό κ΅¬ν˜„ν•œ λ‚΄λΆ€ λ©”μ»€λ‹ˆμ¦˜

λͺ¨λ“  μ½”λ“œλŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό 톡해 μ‹€ν–‰λ˜κ³  κ΄€λ¦¬λœλ‹€.

  • μ‹λ³„μžμ™€ μŠ€μ½”ν”„λŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½ 으둜 관리
  • μ½”λ“œμ‹€ν–‰ μˆœμ„œλŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμœΌλ‘œ 관리

 

μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ ꡬ쑰_

 

variable Environment (Environment Record, Outer Lexical Environment Reference)μžμ‹ μ˜ μ™ΈλΆ€ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘°λ₯Ό κ°–κ³  있고, ν˜Έμ΄μŠ€νŒ… 된 λ³€μˆ˜ λ“€μ˜ 정보가 ν¬ν•¨μ„ μ–Έλœ λ³€μˆ˜λ“€μ„ ν¬ν•¨ν•œ ν™˜κ²½μ„ λ‚˜νƒ€λ‚΄λŠ” 객체.

 

lexical Environment (Environment Record, Outer Lexical Environment Reference)λ³€μˆ˜, ν•¨μˆ˜ λ“±μ˜ 정보λ₯Ό 담은 ν™˜κ²½μ„ λ‚˜νƒ€λ‚΄λŠ” 객체. μžμ‹ μ˜ μ™ΈλΆ€ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘°λ₯Ό κ°–κ³  있고, μŠ€μ½”ν”„ 체인 정보가 포함

 

this binding → this ν‚€μ›Œλ“œκ°€ 바인딩 λ˜λŠ” 객체. 호좜 방식에 따라 κ²°μ •

  • μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ μ½”λ“œμ˜ 평가 κ³Όμ • 쀑에 생성
  • μ½”λ“œ μ‹€ν–‰ μ „, js엔진은 μ½”λ“œλ₯Ό ν•΄μ„ν•˜κ³  μ‹€ν–‰ κ°€λŠ₯ν•œ ν˜•νƒœλ‘œ λ³€ν™˜ν•˜λŠ” 평가 과정을 κ±°μΉ˜λŠ”λ°,
  • 이 κ³Όμ •μ—μ„œ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ 생성

 

 

 

Environment Record ; ν™˜κ²½ λ ˆμ½”λ“œ

  • μŠ€μ½”ν”„μ— ν¬ν•¨λœ μ‹λ³„μžλ₯Ό λ“±λ‘ν•˜κ³  λ“±λ‘λœ μ‹λ³„μžμ— 바인딩 된 값을 κ΄€λ¦¬ν•˜λŠ” μ €μž₯μ†Œ
  • ν™˜κ²½ λ ˆμ½”λ“œλŠ” μ†ŒμŠ€μ½”λ“œμ˜ νƒ€μž…μ— 따라 κ΄€λ¦¬ν•˜λŠ” λ‚΄μš©μ— 차이가 μžˆλ‹€.

 

 

Outer Lexical Environment Reference ; μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘°

  • μƒμœ„ μŠ€μ½”ν”„λ₯Ό 가리킨닀.이 것을 톡해 λ‹¨λ°˜ν–₯ λ§ν¬λ“œ 리슀트인 μŠ€μ½”ν”„ 체인을 κ΅¬ν˜„ν•œλ‹€.
  • ν•΄λ‹Ή μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό μƒμ„±ν•œ μ†ŒμŠ€μ½”λ“œλ₯Ό ν¬ν•¨ν•˜λŠ” μƒμœ„ μ½”λ“œμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ„ λ§ν•œλ‹€.

 

μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒ

const x = 1;

function foo () {
  const y = 2;

  function bar () {
    const z = 3;
    console.log(x + y + z);
  }
  bar();
}

foo(); // 6

 

μ½”λ“œμ˜ μ‹€ν–‰ μˆœμ„œλ₯Ό κ΄€λ¦¬ν•œλ‹€.

μ†ŒμŠ€μ½”λ“œκ°€ ν‰κ°€λ˜λ©΄ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μƒμ„±λ˜κ³ , μŠ€νƒμ˜ μ΅œμƒμœ„μ— μŒ“μΈλ‹€.

 

μ΅œμƒμœ„μ— μ‘΄μž¬ν•˜λŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ(μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ_running execution context)λŠ”

μ–Έμ œλ‚˜ ν˜„μž¬ μ‹€ν–‰ 쀑인 μ½”λ“œμ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ‹€.

 

 

μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ κ³Όμ •

var x = 1;
const y = 2;

function foo(a){
  var x = 3;
  const y = 4;

  function bar(b){
    const z = 5;
    console.log(a + b + x + y +z);
  }
  bar(10);
}
foo(20);

 

πŸ“Œ 1.μ „μ—­ 객체 생성 → 2.μ „μ—­μ½”λ“œ 평가 → 3. μ „μ—­ μ½”λ“œ μ‹€ν–‰  →4.foo ν•¨μˆ˜ μ½”λ“œ 평가 → 5. foo ν•¨μˆ˜ μ½”λ“œ μ‹€ν–‰ → 6. bar ν•¨μˆ˜ μ½”λ“œ 평가 → 7. bar ν•¨μˆ˜ μ½”λ“œ μ‹€ν–‰ → 8. barν•¨μˆ˜μ½”λ“œ μ‹€ν–‰ μ’…λ£Œ → 9. fooν•¨μˆ˜ μ½”λ“œ μ‹€ν–‰ μ’…λ£Œ → 10. μ „μ—­ μ½”λ“œ μ‹€ν–‰ μ’…λ£Œ

 

πŸ“Œ λ ‰μ‹œμ»¬ μŠ€μ½”ν”„(정적 μŠ€μ½”ν”„)_ ν•¨μˆ˜λ₯Ό μ–΄λ””μ„œ ν˜ΈμΆœν–ˆλŠ”μ§€κ°€ μ•„λ‹ˆλΌ, 어디에 μ •μ˜ν–ˆλŠ”μ§€μ— 따라 μƒμœ„ μŠ€μ½”ν”„λ₯Ό κ²°μ • → ν•¨μˆ˜ κ°μ²΄λŠ” μžμ‹ μ΄ μ •μ˜λœ μŠ€μ½”ν”„, 즉 μƒμœ„ μŠ€μ½”ν”„λ₯Ό κΈ°μ–΅ν•œλ‹€.