10 minute read

23 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ Execution context

Ref: Modern JS Deep Dive: 23μž₯ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ

  • μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό λ°”λ₯΄κ²Œ μ΄ν•΄ν•˜λ©΄ μŠ€μ½”ν”„ 기반으둜 μ‹λ³„μžμ™€ μ‹λ³„μžμ— λ°”μΈλ”©λœ 값을 κ΄€λ¦¬ν•˜λŠ” 방식과 ν˜Έμ΄μŠ€νŒ…μ΄ λ°œμƒν•˜λŠ” 이유, ν΄λ‘œμ €μ˜ λ™μž‘ 방식, 그리고 νƒœμŠ€ν¬ 큐와 ν•¨κ»˜ λ™μž‘ν•˜λŠ” 이벀트 ν•Έλ“€λŸ¬μ™€ 비동기 처리의 λ™μž‘ 방식을 이해할 수 μžˆλ‹€.

23.1 μ†ŒμŠ€μ½”λ“œμ˜ νƒ€μž…

  • ECMAScript 사양은 μ†ŒμŠ€μ½”λ“œλ₯Ό 4가지 νƒ€μž…μœΌλ‘œ κ΅¬λΆ„ν•œλ‹€. 4가지 νƒ€μž…μ˜ μ†ŒμŠ€μ½”λ“œλŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό μƒμ„±ν•œλ‹€.
    1. μ „μ—­ μ½”λ“œ - μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ
    2. ν•¨μˆ˜ μ½”λ“œ - ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ
    3. eval μ½”λ“œ - eval μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ
    4. λͺ¨λ“ˆ μ½”λ“œ - λͺ¨λ“ˆ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ

23.2 μ†ŒμŠ€μ½”λ“œμ˜ 평가와 μ‹€ν–‰

  • μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 μ†ŒμŠ€μ½”λ“œλ₯Ό 2개의 κ³Όμ •, 즉 평가와 μ‹€ν–‰μœΌλ‘œ λ‚˜λˆ„μ–΄ μ²˜λ¦¬ν•œλ‹€.
  • 평가 κ³Όμ •μ—μ„œ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό μƒμ„±ν•˜κ³  λ³€μˆ˜, ν•¨μˆ˜ λ“±μ˜ μ„ μ–Έλ¬Έλ§Œ λ¨Όμ € μ‹€ν–‰ν•˜μ—¬ μƒμ„±λœ λ³€μˆ˜λ‚˜ ν•¨μˆ˜ μ‹λ³„μžλ₯Ό ν‚€λ‘œ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ κ΄€λ¦¬ν•˜λŠ” μŠ€μ½”ν”„(λ ‰μ‹œμ»¬ ν™˜κ²½μ˜ ν™˜κ²½ λ ˆμ½”λ“œ)에 λ“±λ‘ν•œλ‹€.
  • μ‹€ν–‰(λŸ°νƒ€μž„)되기 μ‹œμž‘ν•˜λ©΄ 싀행에 ν•„μš”ν•œ 정보, 즉 λ³€μˆ˜λ‚˜ ν•¨μˆ˜μ˜ μ°Έμ‘°λ₯Ό μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ κ΄€λ¦¬ν•˜λŠ” μŠ€μ½”ν”„μ—μ„œ κ²€μƒ‰ν•΄μ„œ μ·¨λ“ν•œλ‹€. 그리고 λ³€μˆ˜ κ°’μ˜ λ³€κ²½ λ“± μ†ŒμŠ€μ½”λ“œμ˜ μ‹€ν–‰ κ²°κ³ΌλŠ” λ‹€μ‹œ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ κ΄€λ¦¬ν•˜λŠ” μŠ€μ½”ν”„μ— λ“±λ‘λœλ‹€.

23.3 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ μ—­ν• 

  • μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” μ†ŒμŠ€μ½”λ“œλ₯Ό μ‹€ν–‰ν•˜λŠ” 데 ν•„μš”ν•œ ν™˜κ²½μ„ μ œκ³΅ν•˜κ³  μ½”λ“œμ˜ μ‹€ν–‰ κ²°κ³Όλ₯Ό μ‹€μ œλ‘œ κ΄€λ¦¬ν•˜λŠ” μ˜μ—­μ΄λ‹€.
  • μ‹λ³„μž(λ³€μˆ˜, ν•¨μˆ˜, 클래슀 λ“±μ˜ 이름)λ₯Ό λ“±λ‘ν•˜κ³  κ΄€λ¦¬ν•˜λŠ” μŠ€μ½”ν”„μ™€ μ½”λ“œ μ‹€ν–‰ μˆœμ„œ 관리λ₯Ό κ΅¬ν˜„ν•œ λ‚΄λΆ€ λ©”μ»€λ‹ˆμ¦˜μœΌλ‘œ, λͺ¨λ“  μ½”λ“œλŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό 톡해 μ‹€ν–‰λ˜κ³  κ΄€λ¦¬λœλ‹€.
  • μ‹λ³„μžμ™€ μŠ€μ½”ν”„λŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μœΌλ‘œ κ΄€λ¦¬ν•˜κ³  μ½”λ“œ μ‹€ν–‰ μˆœμ„œλŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμœΌλ‘œ κ΄€λ¦¬ν•œλ‹€.

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

  • λ‹€μŒ 예제λ₯Ό μ‚΄νŽ΄λ³΄μž.
const x = 1;

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

foo(); // 6
  • μœ„ μ˜ˆμ œλŠ” μ†ŒμŠ€μ½”λ“œμ˜ νƒ€μž…μœΌλ‘œ λΆ„λ₯˜ν•  λ•Œ μ „μ—­ μ½”λ“œμ™€ ν•¨μˆ˜ μ½”λ“œλ‘œ 이루어져 μžˆλ‹€.
  • μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 λ¨Όμ € μ „μ—­ μ½”λ“œλ₯Ό ν‰κ°€ν•˜μ—¬ μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό μƒμ„±ν•œλ‹€. 그리고 ν•¨μˆ˜κ°€ 호좜되면 ν•¨μˆ˜ μ½”λ“œλ₯Ό ν‰κ°€ν•˜μ—¬ ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό μƒμ„±ν•œλ‹€.
    1. μ „μ—­ μ½”λ“œμ˜ 평가 - { μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ— ν‘Έμ‹œ( x, foo() 등둝) }, μ „μ—­ μ½”λ“œ μ‹€ν–‰ - { x κ°’ ν• λ‹Ή, μ „μ—­ν•¨μˆ˜ foo() 호좜 }
    2. foo ν•¨μˆ˜ μ½”λ“œμ˜ 평가 - { μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ— ν‘Έμ‹œ( y, bar() 등둝 ) }, foo ν•¨μˆ˜ μ½”λ“œμ˜ μ‹€ν–‰ - { y κ°’ ν• λ‹Ή, μ€‘μ²©ν•¨μˆ˜ bar() 호좜 }
    3. bar ν•¨μˆ˜ μ½”λ“œμ˜ 평가 - { μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ— ν‘Έμ‹œ( z 등둝 ) }, bar ν•¨μˆ˜ μ½”λ“œμ˜ μ‹€ν–‰ - { z κ°’ ν• λ‹Ή, console.log λ©”μ„œλ“œ 호좜 }
    4. foo ν•¨μˆ˜ μ½”λ“œλ‘œ 볡귀 - bar ν•¨μˆ˜λ₯Ό μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ—μ„œ popν•˜μ—¬ 제거, μ’…λ£Œ
    5. μ „μ—­ μ½”λ“œλ‘œ 볡귀 - foo ν•¨μˆ˜λ₯Ό μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ—μ„œ popν•˜μ—¬ 제거, μ’…λ£Œ
  • 이처럼 μ»¨ν…μŠ€νŠΈ μŠ€νƒμ€ μ½”λ“œμ˜ μ‹€ν–‰ μˆœμ„œλ₯Ό κ΄€λ¦¬ν•œλ‹€. μ†ŒμŠ€μ½”λ“œκ°€ ν‰κ°€λ˜λ©΄ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μƒμ„±λ˜κ³  μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ˜ μ΅œμƒμœ„μ— μŒ“μΈλ‹€. μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ˜ μ΅œμƒμœ„μ— μ‘΄μž¬ν•˜λŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” μ–Έμ œλ‚˜ ν˜„μž¬ μ‹€ν–‰ 쀑인 μ½”λ“œμ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ΄λ©° β€˜μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈrunning execution contextβ€˜λΌ λΆ€λ₯Έλ‹€.

23.5 λ ‰μ‹œμ»¬ ν™˜κ²½lexical environment

  • λ ‰μ‹œμ»¬ ν™˜κ²½μ€ μ‹λ³„μžμ™€ μ‹λ³„μžμ— λ°”μΈλ”©λœ κ°’, 그리고 μƒμœ„ μŠ€μ½”ν”„μ— λŒ€ν•œ μ°Έμ‘°λ₯Ό κΈ°λ‘ν•˜λŠ” 자료ꡬ쑰둜 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό κ΅¬μ„±ν•˜λŠ” μ»΄ν¬λ„ŒνŠΈλ‹€.
  • λ ‰μ‹œμ»¬ ν™˜κ²½μ€ 킀와 값을 κ°–λŠ” 객체 ν˜•νƒœμ˜ μŠ€μ½”ν”„(μ „μ—­, ν•¨μˆ˜, 블둝 μŠ€μ½”ν”„)λ₯Ό μƒμ„±ν•˜μ—¬ μ‹λ³„μžλ₯Ό ν‚€λ‘œ λ“±λ‘ν•˜κ³  μ‹λ³„μžμ— λ°”μΈλ”©λœ 값을 κ΄€λ¦¬ν•œλ‹€. 즉, λ ‰μ‹œμ»¬ ν™˜κ²½μ€ μŠ€μ½”ν”„λ₯Ό κ΅¬λΆ„ν•˜μ—¬ μ‹λ³„μžλ₯Ό λ“±λ‘ν•˜κ³  κ΄€λ¦¬ν•˜λŠ” μ €μž₯μ†Œ 역할을 ν•˜λŠ” λ ‰μ‹œμ»¬ μŠ€μ½”ν”„μ˜ 싀체닀.
  • λ ‰μ‹œμ»¬ ν™˜κ²½μ€ λ‘κ°œμ˜ μ»΄ν¬λ„ŒνŠΈλ‘œ κ΅¬μ„±λœλ‹€.
    1. ν™˜κ²½ λ ˆμ½”λ“œEnvironment Record
  • μŠ€μ½”ν”„μ— ν¬ν•¨λœ μ‹λ³„μžλ₯Ό λ“±λ‘ν•˜κ³  λ“±λ‘λœ μ‹λ³„μžμ— λ°”μΈλ”©λœ 값을 κ΄€λ¦¬ν•˜λŠ” μ €μž₯μ†Œλ‹€. ν™˜κ²½ λ ˆμ½”λ“œλŠ” μ†ŒμŠ€μ½”λ“œμ˜ νƒ€μž…μ— 따라 κ΄€λ¦¬ν•˜λŠ” λ‚΄μš©μ— 차이가 μžˆλ‹€.
    1. μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘°Outer Lexical Environment Reference
  • μƒμœ„ μŠ€μ½”ν”„λ₯Ό 가리킨닀. ν•΄λ‹Ή μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό μƒμ„±ν•œ μ†ŒμŠ€μ½”λ“œλ₯Ό ν¬ν•¨ν•˜λŠ” μƒμœ„ μ½”λ“œμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ„ λ§ν•œλ‹€. μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘°λ₯Ό 톡해 단방ν–₯ λ§ν¬λ“œ 리슀트인 μŠ€μ½”ν”„ 체인을 κ΅¬ν˜„ν•œλ‹€.

23.6 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ 생성과 μ‹λ³„μž 검색 κ³Όμ •

  • λ‹€μŒ 예제λ₯Ό 톡해 μ–΄λ–»κ²Œ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μƒμ„±λ˜κ³  μ½”λ“œ μ‹€ν–‰ κ²°κ³Όκ°€ κ΄€λ¦¬λ˜λŠ”μ§€, 그리고 μ–΄λ–»κ²Œ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό 톡해 μ‹λ³„μžλ₯Ό κ²€μƒ‰ν•˜λŠ”μ§€ μ‚΄νŽ΄λ³΄μž.
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); // 42

23.6.1 μ „μ—­ 객체 생성

  • μ „μ—­ κ°μ²΄λŠ” μ „μ—­ μ½”λ“œκ°€ ν‰κ°€λ˜κΈ° 이전에 μƒμ„±λœλ‹€. μ΄λ•Œ μ „μ—­ κ°μ²΄μ—λŠ” 빌트인 μ „μ—­ ν”„λ‘œνΌν‹°μ™€ 빌트인 μ „μ—­ ν•¨μˆ˜. 그리고 ν‘œμ€€ 빌트인 객체가 μΆ”κ°€λ˜λ©° λ™μž‘ ν™˜κ²½ λ˜λŠ” νŠΉμ • ν™˜κ²½μ„ μœ„ν•œ 호슀트 객체λ₯Ό ν¬ν•¨ν•œλ‹€.
  • μ „μ—­ 객체도 Object.prototype을 μƒμ†λ°›λŠ”λ‹€. 즉, μ „μ—­ 객체도 ν”„λ‘œν† νƒ€μž… 체인의 일원이닀.

23.6.2 μ „μ—­ μ½”λ“œ 평가

  • μ†ŒμŠ€μ½”λ“œκ°€ λ‘œλ“œλ˜λ©΄ μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 μ „μ—­ μ½”λ“œλ₯Ό ν‰κ°€ν•œλ‹€. μ „μ—­ μ½”λ“œ ν‰κ°€λŠ” λ‹€μŒκ³Ό 같은 μˆœμ„œλ‘œ μ§„ν–‰λœλ‹€.
    1. μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ 생성
    2. μ „μ—­ λ ‰μ‹œμ»¬ ν™˜κ²½ 생성
      2.1. μ „μ—­ ν™˜κ²½ λ ˆμ½”λ“œ 생성
      2.1.1. 객체 ν™˜κ²½ λ ˆμ½”λ“œ 생성
      2.1.2. 선언적 ν™˜κ²½ λ ˆμ½”λ“œ 생성
      2.2. this 바인딩
      2.3. μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘° κ²°μ •

1. μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ 생성

  • μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό μƒμ„œμ•Ÿμ—¬ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ— ν‘Έμ‹œν•œλ‹€. μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” running execution contextκ°€ λœλ‹€.

2. μ „μ—­ λ ‰μ‹œμ»¬ ν™˜κ²½ 생성

  • μ „μ—­ λ ‰μ‹œμ»¬ ν™˜κ²½Global Lexical Environment을 μƒμ„±ν•˜κ³  μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ— λ°”μΈλ”©ν•œλ‹€.
  • λ ‰μ‹œμ»¬ ν™˜κ²½μ€ 2개의 μ»΄ν¬λ„ŒνŠΈ, 즉 ν™˜κ²½ λ ˆμ½”λ“œEnvironment Record와 μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘°OuterLexicalEnvironmentReference둜 κ΅¬μ„±λœλ‹€.
2.1. μ „μ—­ ν™˜κ²½ λ ˆμ½”λ“œ 생성
  • μ „μ—­ ν™˜κ²½ λ ˆμ½”λ“œGlobal Environment RecordλŠ” μ „μ—­ λ³€μˆ˜λ₯Ό κ΄€λ¦¬ν•˜λŠ” μ „μ—­ μŠ€μ½”ν”„, μ „μ—­ 객체의 빌트인 μ „μ—­ ν”„λ‘œνΌν‹°μ™€ 빌트인 μ „μ—­ ν•¨μˆ˜, ν‘œμ€€ 빌트인 객체λ₯Ό μ œκ³΅ν•œλ‹€.
  • κΈ°μ‘΄ var ν‚€μ›Œλ“œλ‘œ μ„ μ–Έν•œ μ „μ—­ λ³€μˆ˜μ™€ ES6의 let, const ν‚€μ›Œλ“œλ‘œ μ„ μ–Έν•œ μ „μ—­ λ³€μˆ˜λ₯Ό κ΅¬λΆ„ν•˜μ—¬ κ΄€λ¦¬ν•˜κΈ° μœ„ν•΄ μ „μ—­ μŠ€μ½”ν”„ 역할을 ν•˜λŠ” μ „μ—­ ν™˜κ²½ λ ˆμ½”λ“œλŠ” 객체 ν™˜κ²½ λ ˆμ½”λ“œObject Environment Record와 선언적 ν™˜κ²½ λ ˆμ½”λ“œDeclarative Environment Record둜 κ΅¬μ„±λ˜μ–΄ μžˆλ‹€.
  • 객체 ν™˜κ²½ λ ˆμ½”λ“œλŠ” 기쑴의 μ „μ—­ 객체가 κ΄€λ¦¬ν•˜λ˜ var ν‚€μ›Œλ“œλ‘œ μ„ μ–Έν•œ μ „μ—­ λ³€μˆ˜μ™€ ν•¨μˆ˜ μ„ μ–Έλ¬ΈμœΌλ‘œ μ •μ˜ν•œ μ „μ—­ ν•¨μˆ˜, 빌트인 μ „μ—­ ν”„λ‘œνΌν‹°μ™€ 빌트인 μ „μ—­ ν•¨μˆ˜, ν‘œμ€€ 빌트인 객체λ₯Ό κ΄€λ¦¬ν•˜κ³ , 선언적 ν™˜κ²½ λ ˆμ½”λ“œλŠ” let, const ν‚€μ›Œλ“œλ‘œ μ„ μ–Έν•œ μ „μ—­ λ³€μˆ˜λ₯Ό κ΄€λ¦¬ν•œλ‹€.
  • 즉, 객체 ν™˜κ²½ λ ˆμ½”λ“œμ™€ 선언적 ν™˜κ²½ λ ˆμ½”λ“œλŠ” μ„œλ‘œ ν˜‘λ ₯ν•˜μ—¬ μ „μ—­ μŠ€μ½”ν”„μ™€ μ „μ—­ 객체(μ „μ—­ λ³€μˆ˜μ˜ μ „μ—­ 객체 ν”„λ‘œνΌν‹°ν™”)λ₯Ό κ΄€λ¦¬ν•œλ‹€.
2.1.1. 객체 ν™˜κ²½ λ ˆμ½”λ“œ 생성
  • 객체 ν™˜κ²½ λ ˆμ½”λ“œλŠ” BindingObject라고 λΆ€λ₯΄λŠ” 객체와 μ—°κ²°λœλ‹€. BindingObjectλŠ” μ „μ—­ 객체 μƒμ„±μ‹œ μƒμ„±λœ μ „μ—­ 객체닀.
  • μ „μ—­ μ½”λ“œ 평가 κ³Όμ •μ—μ„œ var ν‚€μ›Œλ“œλ‘œ μ„ μ–Έν•œ μ „μ—­ λ³€μˆ˜μ™€ ν•¨μˆ˜ μ„ μ–Έλ¬ΈμœΌλ‘œ μ •μ˜λœ μ „μ—­ ν•¨μˆ˜λŠ” μ „μ—­ ν™˜κ²½ λ ˆμ½”λ“œμ˜ 객체 ν™˜κ²½ λ ˆμ½”λ“œμ— μ—°κ²°λœ BindingObjectλ₯Ό 톡해 μ „μ—­ 객체의 ν”„λ‘œνΌν‹°μ™€ λ©”μ„œλ“œκ°€ λœλ‹€. 그리고 μ΄λ•Œ λ“±λ‘λœ μ‹λ³„μžλ₯Ό μ „μ—­ ν™˜κ²½ λ ˆμ½”λ“œμ˜ 객체 ν™˜κ²½ λ ˆμ½”λ“œμ—μ„œ κ²€μƒ‰ν•˜λ©΄ μ „μ—­ 객체의 ν”„λ‘œνΌν‹°λ₯Ό κ²€μƒ‰ν•˜μ—¬ λ°˜ν™˜ν•œλ‹€.
  • 이것이 var ν‚€μ›Œλ“œλ‘œ μ„ μ–Έλœ μ „μ—­ λ³€μˆ˜μ™€ ν•¨μˆ˜ μ„ μ–Έλ¬ΈμœΌλ‘œ μ •μ˜λœ μ „μ—­ ν•¨μˆ˜κ°€ μ „μ—­ 객체의 ν”„λ‘œνΌν‹°μ™€ λ©”μ„œλ“œκ°€ 되고 μ „μ—­ 객체λ₯Ό κ°€λ¦¬ν‚€λŠ” μ‹λ³„μž(window) 없이 μ „μ—­ 객체의 ν”„λ‘œνΌν‹°λ₯Ό μ°Έμ‘°ν•  수 μžˆλŠ” λ©”μ»€λ‹ˆμ¦˜μ΄λ‹€.
2.1.2. 선언적 ν™˜κ²½ λ ˆμ½”λ“œ 생성
  • let, const ν‚€μ›Œλ“œλ‘œ μ„ μ–Έν•œ μ „μ—­ λ³€μˆ˜(ν•¨μˆ˜ ν‘œν˜„μ‹ 포함)λŠ” 선언적 ν™˜κ²½ λ ˆμ½”λ“œμ— λ“±λ‘λ˜κ³  κ΄€λ¦¬λœλ‹€.
  • const ν‚€μ›Œλ“œλ‘œ μ„ μ–Έν•œ λ³€μˆ˜λŠ” β€œμ„ μ–Έ 단계”와 β€œμ΄ˆκΈ°ν™” 단계”가 λΆ„λ¦¬λ˜μ–΄ μ§„ν–‰ν•œλ‹€. λ”°λΌμ„œ λŸ°νƒ€μž„μ— μ‹€ν–‰ 흐름이 λ³€μˆ˜ 선언문에 λ„λ‹¬ν•˜κΈ° μ „κΉŒμ§€ μΌμ‹œμ  μ‚¬κ°μ§€λŒ€Temporal Dead Zone: TDZ에 λΉ μ§€κ²Œ λœλ‹€.
  • let, const ν‚€μ›Œλ“œλ‘œ μ„ μ–Έν•œ λ³€μˆ˜λ„ λ³€μˆ˜ ν˜Έμ΄μŠ€νŒ…μ΄ λ°œμƒν•˜λŠ” 것은 변함이 μ—†λ‹€. 단, let, const ν‚€μ›Œλ“œλ‘œ μ„ μ–Έν•œ λ³€μˆ˜λŠ” λŸ°νƒ€μž„μ— 컨트둀이 λ³€μˆ˜ 선언문에 λ„λ‹¬ν•˜κΈ° μ „κΉŒμ§€ μΌμ‹œμ  μ‚¬κ°μ§€λŒ€μ— 빠지기 λ•Œλ¬Έμ— μ°Έμ‘°ν•  수 μ—†λ‹€.
2.2. this 바인딩
  • μ „μ—­ ν™˜κ²½ λ ˆμ½”λ“œμ˜ [[GlobalThisValue]] λ‚΄λΆ€ μŠ¬λ‘―μ— thisκ°€ λ°”μΈλ”©λœλ‹€. 일반적으둜 μ „μ—­ μ½”λ“œμ—μ„œ thisλŠ” μ „μ—­ 객체λ₯Ό κ°€λ¦¬ν‚€λ―€λ‘œ μ „μ—­ ν™˜κ²½ λ ˆμ½”λ“œμ˜ [[GlobalThisValue]] λ‚΄λΆ€ μŠ¬λ‘―μ—λŠ” μ „μ—­ 객체가 λ°”μΈλ”©λœλ‹€.
2.3. μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘° κ²°μ •
  • ν˜„μž¬ 평가 쀑인 μ†ŒμŠ€μ½”λ“œλ₯Ό ν¬ν•¨ν•˜λŠ” μ™ΈλΆ€ μ†ŒμŠ€μ½”λ“œμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½, 즉 μƒμœ„ μŠ€μ½”ν”„λ₯Ό 가리킨닀. 이λ₯Ό 톡해 단방ν–₯ λ§ν¬λ“œ 리슀트인 μŠ€μ½”ν”„ 체인을 κ΅¬ν˜„ν•œλ‹€. ν˜„μž¬ 평가 쀑인 μ†ŒμŠ€μ½”λ“œλŠ” μ „μ—­ μ½”λ“œμ΄λ―€λ‘œ null이 ν• λ‹Ήλœλ‹€. μ΄λŠ” μ „μ—­ λ ‰μ‹œμ»¬ ν™˜κ²½μ΄ μŠ€μ½”ν”„ 체인의 쒅점에 μ‘΄μž¬ν•¨μ„ μ˜λ―Έν•œλ‹€.

23.6.3 μ „μ—­ μ½”λ“œ μ‹€ν–‰

  • λ³€μˆ˜ 할당문이 μ‹€ν–‰λ˜μ–΄ μ „μ—­ λ³€μˆ˜ x, y에 값이 ν• λ‹Ήλœλ‹€. 그리고 foo ν•¨μˆ˜κ°€ ν˜ΈμΆœλœλ‹€.
  • μ„ μ–Έλ˜μ§€ μ•Šμ€ μ‹λ³„μžλŠ” μ°Έμ‘°ν•  수 μ—†μœΌλ―€λ‘œ λ³€μˆ˜ λ˜λŠ” ν•¨μˆ˜ 이름이 μ„ μ–Έλœ μ‹λ³„μžμΈμ§€ 확인해야 ν•œλ‹€.
  • μ‹λ³„μžλŠ” μŠ€μ½”ν”„κ°€ λ‹€λ₯΄λ©΄ 같은 이름을 κ°€μ§ˆ 수 μžˆλ‹€. λ”°λΌμ„œ μ–΄λŠ μŠ€μ½”ν”„μ˜ μ‹λ³„μžλ₯Ό μ°Έμ‘°ν•˜λ©΄ λ˜λŠ”μ§€ κ²°μ •ν•  ν•„μš”κ°€ μžˆλ‹€. 이λ₯Ό μ‹λ³„μž κ²°μ •identifier resolution이라 ν•œλ‹€.
  • μ‹λ³„μžλ₯Ό 검색할 λ•Œμ—λŠ” μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ—μ„œ μ‹λ³„μžλ₯Ό κ²€μƒ‰ν•˜κΈ° μ‹œμž‘ν•œλ‹€. μ„ μ–Έλœ μ‹λ³„μžλŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ˜ ν™˜κ²½ λ ˆμ½”λ“œμ— λ“±λ‘λ˜μ–΄ μžˆλ‹€.
  • λ§Œμ•½ μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ—μ„œ μ‹λ³„μžλ₯Ό 검색할 수 μ—†μœΌλ©΄ μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘°κ°€ κ°€λ¦¬ν‚€λŠ” ν™˜κ²½, 즉 μƒμœ„ μŠ€μ½”ν”„λ‘œ μ΄λ™ν•˜μ—¬ μ‹λ³„μžλ₯Ό κ²€μƒ‰ν•œλ‹€.
  • 이것이 λ°”λ‘œ μŠ€μ½”ν”„ 체인의 λ™μž‘ 원리닀. μ „μ—­ λ ‰μ‹œμ»¬ ν™˜κ²½μ€ μŠ€μ½”ν”„ 체인의 μ’…μ μ΄λ―€λ‘œ μ°Έμ‘° μ—λŸ¬ReferenceErrorλ₯Ό λ°œμƒμ‹œν‚¨λ‹€.
  • 이처럼 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” μ†ŒμŠ€μ½”λ“œλ₯Ό μ‹€ν–‰ν•˜κΈ° μœ„ν•΄ ν•„μš”ν•œ ν™˜κ²½μ„ μ œκ³΅ν•˜κ³  μ½”λ“œμ˜ μ‹€ν–‰ κ²°κ³Όλ₯Ό μ‹€μ œλ‘œ κ΄€λ¦¬ν•˜λŠ” μ˜μ—­μ΄λ‹€.

23.6.4 foo ν•¨μˆ˜ μ½”λ“œ 평가

  • foo ν•¨μˆ˜κ°€ 호좜되면 μ „μ—­ μ½”λ“œμ˜ 싀행을 μΌμ‹œ μ€‘λ‹¨ν•˜κ³  foo ν•¨μˆ˜ λ‚΄λΆ€λ‘œ μ½”λ“œμ˜ μ œμ–΄κΆŒμ΄ μ΄λ™ν•œλ‹€. 그리고 ν•¨μˆ˜ μ½”λ“œλ₯Ό ν‰κ°€ν•˜κΈ° μ‹œμž‘ν•œλ‹€. ν•¨μˆ˜ μ½”λ“œ ν‰κ°€λŠ” μ•„λž˜ μˆœμ„œλ‘œ μ§„ν–‰λœλ‹€.
    1. ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ 생성
    2. ν•¨μˆ˜ λ ‰μ‹œμ»¬ ν™˜κ²½ 생성
      2.1. ν•¨μˆ˜ ν™˜κ²½ λ ˆμ½”λ“œ 생성
      2.2. this 바인딩
      2.3. μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘° κ²°μ •
  • 세뢀적인 생성 과정을 μˆœμ„œλŒ€λ‘œ μ‚΄νŽ΄λ³΄μž

    1. ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ 생성

  • λ¨Όμ € foo ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό μƒμ„±ν•˜κ³  ν•¨μˆ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ΄ μ™„μ„±λœ λ‹€μŒ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ— ν‘Έμ‹œλœλ‹€. foo ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” running execution contextκ°€ λœλ‹€.

    2. ν•¨μˆ˜ λ ‰μ‹œμ»¬ ν™˜κ²½ 생성

  • foo ν•¨μˆ˜ λ ‰μ‹œμ»¬ ν™˜κ²½Function Lexical Environment을 μƒμ„±ν•˜κ³  foo ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ— λ°”μΈλ”©ν•œλ‹€.
    2.1. ν•¨μˆ˜ ν™˜κ²½ λ ˆμ½”λ“œ 생성
  • ν•¨μˆ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ„ κ΅¬μ„±ν•˜λŠ” μ»΄ν¬λ„ŒνŠΈ 쀑 ν•˜λ‚˜μΈ ν•¨μˆ˜ ν™˜κ²½ λ ˆμ½”λ“œFunction Environment RecordλŠ” λ§€κ°œλ³€μˆ˜, arguments 객체, ν–„μˆ˜ λ‚΄λΆ€μ—μ„œ μ„ μ–Έν•œ 지역 λ³€μˆ˜μ™€ 쀑첩 ν•¨μˆ˜λ₯Ό λ“±λ‘ν•˜κ³  κ΄€λ¦¬ν•œλ‹€.
    2.2. this 바인딩
  • ν•¨μˆ˜ ν™˜κ²½ λ ˆμ½”λ“œμ˜ [[ThisValue]] λ‚΄λΆ€ μŠ¬λ‘―μ— thisκ°€ λ°”μΈλ”©λœλ‹€. 바인딩될 κ°μ²΄λŠ” ν•¨μˆ˜ 호좜 방식에 따라 κ²°μ •λœλ‹€.
  • foo ν•¨μˆ˜λŠ” 일반 ν•¨μˆ˜λ‘œ ν˜ΈμΆœλ˜μ—ˆμœΌλ―€λ‘œ thisλŠ” μ „μ—­ 객체λ₯Ό 가리킨닀. λ”°λΌμ„œ [[ThisValue]] λ‚΄λΆ€ μŠ¬λ‘―μ—λŠ” μ „μ—­ 객체가 λ°”μΈλ”©λœλ‹€.
    2.3. μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘° κ²°μ •
  • μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ 참쑰에 foo ν•¨μˆ˜ μ •μ˜κ°€ ν‰κ°€λœ μ‹œμ μ— μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ˜ μ°Έμ‘°κ°€ ν• λ‹Ήλœλ‹€.
  • foo ν•¨μˆ˜λŠ” μ „μ—­ μ½”λ“œμ— μ •μ˜λœ μ „μ—­ ν•¨μˆ˜μ΄λ―€λ‘œ foo ν•¨μˆ˜ μ •μ˜λŠ” μ „μ—­ μ½”λ“œ 평가 μ‹œμ μ— ν‰κ°€λœλ‹€. 이 μ‹œμ μ˜ μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ‹€. λ”°λΌμ„œ μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘°μ—λŠ” μ „μ—­ λ ‰μ‹œμ»¬ ν™˜κ²½μ˜ μ°Έμ‘°κ°€ ν• λ‹Ήλœλ‹€.
  • μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 ν•¨μˆ˜ μ •μ˜λ₯Ό ν‰κ°€ν•˜μ—¬ ν•¨μˆ˜ 객체λ₯Ό 생성할 λ•Œ ν˜„μž¬ μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½, 즉 ν•¨μˆ˜μ˜ μƒμœ„ μŠ€μ½”ν”„λ₯Ό ν•¨μˆ˜ 객체의 λ‚΄λΆ€ 슬둯 [[Environment]]에 μ €μž₯ν•œλ‹€. ν•¨μˆ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ˜ μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ 참쑰에 ν• λ‹Ήλ˜λŠ” 것은 λ°”λ‘œ ν•¨μˆ˜μ˜ μƒμœ„ μŠ€μ½”ν”„λ₯Ό κ°€λ¦¬ν‚€λŠ” ν•¨μˆ˜ 객체의 λ‚΄λΆ€ 슬둯 [[Environment]]에 μ €μž₯된 λ ‰μ‹œμ»¬ ν™˜κ²½μ˜ μ°Έμ‘°λ‹€. 즉, ν•¨μˆ˜ 객체의 λ‚΄λΆ€ 슬둯 [[Environment]]κ°€ λ°”λ‘œ λ ‰μ‹œμ»¬ μŠ€μ½”ν”„λ₯Ό κ΅¬ν˜„ν•˜λŠ” λ©”μ»€λ‹ˆμ¦˜μ΄λ‹€.
  • ν•¨μˆ˜ 객체의 λ‚΄λΆ€ 슬둯 [[Environment]]와 λ ‰μ‹œμ»¬ μŠ€μ½”ν”„λŠ” ν΄λ‘œμ €λ₯Ό 이해할 수 μžˆλŠ” μ€‘μš”ν•œ λ‹¨μ„œλ‹€.

23.6.5 foo ν•¨μˆ˜ μ½”λ“œ μ‹€ν–‰

  • λŸ°νƒ€μž„μ΄ μ‹œμž‘λ˜μ–΄ foo ν•¨μˆ˜μ˜ μ†ŒμŠ€μ½”λ“œκ°€ 순차적으둜 μ‹€ν–‰λ˜κΈ° μ‹œμž‘ν•œλ‹€. λ§€κ°œλ³€μˆ˜μ— μΈμˆ˜κ°€ ν• λ‹Ήλ˜κ³ , λ³€μˆ˜ 할당문이 μ‹€ν–‰λ˜μ–΄ 지역 λ³€μˆ˜ x, y에 값이 ν• λ‹Ήλœλ‹€. 그리고 ν•¨μˆ˜ barκ°€ ν˜ΈμΆœλœλ‹€.
  • μ΄λ•Œ μ‹λ³„μž 결정을 μœ„ν•΄ μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ—μ„œ μ‹λ³„μžλ₯Ό κ²€μƒ‰ν•˜κΈ° μ‹œμž‘ν•œλ‹€. λͺ¨λ“  μ‹λ³„μžλŠ” ν˜„μž¬ μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ—μ„œ λͺ¨λ‘ 검색할 수 μžˆλ‹€. κ²€μƒ‰λœ μ‹λ³„μžμ— 값을 λ°”μΈλ”©ν•œλ‹€.

23.6.6 bar ν•¨μˆ˜ μ½”λ“œ 평가

  • bar ν•¨μˆ˜ λ‚΄λΆ€λ‘œ μ½”λ“œμ˜ μ œμ–΄κΆŒμ΄ μ΄λ™ν•œλ‹€. 그리고 bar ν•¨μˆ˜ μ½”λ“œλ₯Ό ν‰κ°€ν•˜κΈ° μ‹œμž‘ν•œλ‹€. μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ™€ λ ‰μ‹œμ»¬ ν™˜κ²½μ˜ 생성 과정은 foo ν•¨μˆ˜ μ½”λ“œ 평가와 λ™μΌν•˜λ‹€.

23.6.7 bar ν•¨μˆ˜ μ½”λ“œ μ‹€ν–‰

  • λŸ°νƒ€μž„μ΄ μ‹œμž‘λ˜μ–΄ bar ν•¨μˆ˜μ˜ μ†ŒμŠ€μ½”λ“œκ°€ 순차적으둜 μ‹€ν–‰λ˜κΈ° μ‹œμž‘ν•œλ‹€. λ§€κ°œλ³€μˆ˜μ— μΈμˆ˜κ°€ ν• λ‹Ήλ˜κ³ , λ³€μˆ˜ 할당문이 μ‹€ν–‰λ˜μ–΄ 지역 λ³€μˆ˜ z에 값이 ν• λ‹Ήλœλ‹€. 그리고 console.log( a + b + x + y + z);κ°€ μ‹€ν–‰λœλ‹€. 이 μ½”λ“œλŠ” λ‹€μŒ μˆœμ„œλ‘œ μ‹€ν–‰λœλ‹€.
    1. console μ‹λ³„μž 검색
    • console μ‹λ³„μžλ₯Ό μŠ€μ½”ν”„ μ²΄μΈμ—μ„œ κ²€μƒ‰ν•œλ‹€. bar ν•¨μˆ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ—μ„œ 검색 -> foo ν•¨μˆ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ—μ„œ 검색 -> μ „μ—­ λ ‰μ‹œμ»¬ ν™˜κ²½μ—μ„œ 검색 -> μ „μ—­ λ ‰μ‹œμ»¬ ν™˜κ²½μ˜ 객체 ν™˜κ²½ λ ˆμ½”λ“œμ˜ BindingObjectλ₯Ό 톡해 μ „μ—­ κ°μ²΄μ—μ„œ 찾을 수 있음. 2. log λ©”μ„œλ“œ 검색
    • console κ°μ²΄μ—μ„œ log λ©”μ„œλ“œλ₯Ό κ²€μƒ‰ν•œλ‹€. μ΄λ•Œ console 객체의 ν”„λ‘œν† νƒ€μž… 체인을 톡해 λ©”μ„œλ“œλ₯Ό κ²€μƒ‰ν•œλ‹€. log λ©”μ„œλ“œλŠ” μƒμ†λœ ν”„λ‘œνΌν‹°κ°€ μ•„λ‹ˆλΌ console 객체가 직접 μ†Œμœ ν•˜λŠ” ν”„λ‘œνΌν‹°λ‹€.
 console.hasownProperty('log'); // true
  1. ν‘œν˜„μ‹ a + b + x + y + z의 평가
    • a, b, x, y, z μ‹λ³„μžλ₯Ό κ²€μƒ‰ν•œλ‹€. a - foo ν•¨μˆ˜ λ ‰μ‹œμ»¬ ν™˜κ²½, b - bar ν•¨μˆ˜ λ ‰μ‹œμ»¬ ν™˜κ²½, x,y - foo ν•¨μˆ˜ ν—₯μ‹œμ»¬ ν™˜κ²½, z - bar ν•¨μˆ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ—μ„œ κ²€μƒ‰λœλ‹€.
  2. console.log λ©”μ„œλ“œ 호좜
    • ν‘œν˜„μ‹ a + b + x + y + z 이 ν‰κ°€λ˜μ–΄ μƒμ„±ν•œ 값을 console.log λ©”μ„œλ“œμ— μ „λ‹¬ν•˜μ—¬ ν˜ΈμΆœν•œλ‹€.

23.6.8 bar ν•¨μˆ˜ μ½”λ“œ μ‹€ν–‰ μ’…λ£Œ

  • console.log λ©”μ„œλ“œκ°€ 호좜되고 μ’…λ£Œν•˜λ©΄ λ”λŠ” μ‹€ν–‰ν•  μ½”λ“œκ°€ μ—†μœΌλ―€λ‘œ bar ν•¨μˆ˜ μ½”λ“œμ˜ 싀행이 μ’…λ£Œλœλ‹€. μ΄λ•Œ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ—μ„œ bar ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ νŒλ˜μ–΄ 제거되고 foo μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ λœλ‹€.
  • μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ—μ„œ bar ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μ œκ±°λ˜μ—ˆλ‹€κ³  ν•΄μ„œ bar ν•¨μˆ˜ λ ‰μ‹œμ»¬ ν™˜κ²½κΉŒμ§€ μ¦‰μ‹œ μ†Œλ©Έν•˜λŠ” 것은 μ•„λ‹ˆλ‹€. λ ‰μ‹œμ»¬ ν™˜κ²½μ€ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ— μ˜ν•΄ μ°Έμ‘°λ˜κΈ°λŠ” ν•˜μ§€λ§Œ 독립적인 객체닀. 객체λ₯Ό ν¬ν•¨ν•œ λͺ¨λ“  값은 λˆ„κ΅°κ°€μ— μ˜ν•΄ μ°Έμ‘°λ˜μ§€ μ•Šμ„ λ•Œ λΉ„λ‘œμ†Œ 가비지 컬렉터에 μ˜ν•΄ λ©”λͺ¨λ¦¬ κ³΅κ°„μ˜ 확보가 ν•΄μ œλ˜μ–΄ μ†Œλ©Έν•œλ‹€.

23.6.9 foo ν•¨μˆ˜ μ½”λ“œ μ‹€ν–‰ μ’…λ£Œ

  • bar ν•¨μˆ˜κ°€ μ’…λ£Œν•˜λ©΄ 더 이상 μ‹€ν–‰ν•  μ½”λ“œκ°€ μ—†μœΌλ―€λ‘œ foo ν•¨μˆ˜ μ½”λ“œμ˜ 싀행이 μ’…λ£Œλœλ‹€. μ΄λ•Œ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ—μ„œ foo ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ νŒλ˜μ–΄ 제거되고 μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μ‹€ν–‰ 쀑인 μ»¨ν…μŠ€νŠΈκ°€ λœλ‹€.

23.6.10 μ „μ—­ μ½”λ“œ μ‹€ν–‰ μ’…λ£Œ

  • foo ν•¨μˆ˜κ°€ μ’…λ£Œλ˜λ©΄ λ”λŠ” μ‹€ν–‰ν•  μ½”λ“œκ°€ μ—†μœΌλ―€λ‘œ μ „μ—­ μ½”λ“œμ˜ 싀행이 μ’…λ£Œλ˜κ³  μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ„ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ—μ„œ νŒλ˜μ–΄ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ—λŠ” 아무것도 λ‚¨μ•„μžˆμ§€ μ•Šκ²Œ λœλ‹€.

23.7 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ™€ 블둝 레벨 μŠ€μ½”ν”„

  • λ‹€μŒ 예제λ₯Ό μ‚΄νŽ΄λ³΄μž.
let x = 1;

if(true){
  let x = 10;
  console.log(x); // 10
}

console.log(}x); // 1
  • let ν‚€μ›Œλ“œλ‘œ λ³€μˆ˜κ°€ μ„ μ–Έλœ if 문의 μ½”λ“œ 블둝이 μ‹€ν–‰λ˜λ©΄ 블둝 레벨 μŠ€μ½”ν”„λ₯Ό 생성해야 ν•œλ‹€. 이λ₯Ό μœ„ν•΄ 선언적 ν™˜κ²½ λ ˆμ½”λ“œλ₯Ό κ°–λŠ” λ ‰μ‹œμ»¬ ν™˜κ²½μ„ μƒˆλ‘­κ²Œ μƒμ„±ν•˜μ—¬ 기쑴의 μ „μ—­ λ ‰μ‹œμ»¬ ν™˜κ²½μ„ κ΅μ²΄ν•œλ‹€. μ΄λ•Œ if문의 μ½”λ“œ 블둝을 μœ„ν•œ λ ‰μ‹œμ»¬ ν™˜κ²½μ˜ μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘°λŠ” if 문이 μ‹€ν–‰λ˜κΈ° μ΄μ „μ˜ μ „μ—­ λ ‰μ‹œμ»¬ ν™˜κ²½μ„ 가리킨닀.
  • ifλ¬Έ μ½”λ“œ λΈ”λ‘μ˜ 싀해이 μ’…λ£Œλ˜λ©΄ μ‹€ν–‰λ˜κΈ° μ΄μ „μ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μœΌλ‘œ λ˜λŒλ¦°λ‹€.
  • μ΄λŠ” if문뿐 μ•„λ‹ˆλΌ 블둝 레벨 μŠ€μ½”ν”„λ₯Ό μƒμ„±ν•˜λŠ” λͺ¨λ“  블둝문에 μ μš©λœλ‹€.
  • for문의 λ³€μˆ˜ 선언문에 let ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•˜λ©΄ μ½”λ“œ 블둝이 λ°˜λ³΅ν•΄μ„œ 싀행될 λ•Œλ§ˆλ‹€ μ½”λ“œ 블둝을 μœ„ν•œ μƒˆλ‘œμš΄ λ ‰μ‹œμ»¬ ν™˜κ²½μ„ μƒμ„±ν•œλ‹€. λ§Œμ•½ for문의 μ½”λ“œ 블둝 λ‚΄μ—μ„œ μ •μ˜λœ ν•¨μˆ˜κ°€ μžˆλ‹€λ©΄ 이 ν•¨μˆ˜μ˜ μƒμœ„ μŠ€μ½”ν”„λŠ” for 문의 μ½”λ“œ 블둝이 μƒμ„±ν•œ λ ‰μ‹œμ»¬ ν™˜κ²½μ΄λ‹€.
  • μ΄λ•Œ ν•¨μˆ˜μ˜ μƒμœ„ μŠ€μ½”ν”„λŠ” for 문의 μ½”λ“œ 블둝이 λ°˜λ³΅ν•΄μ„œ 싀행될 λ•Œλ§ˆλ‹€ μ‹λ³„μž(for문의 λ³€μˆ˜ μ„ μ–Έλ¬Έ 및 for문의 μ½”λ“œ 블둝 λ‚΄μ—μ„œ μ„ μ–Έλœ 지역 λ³€μˆ˜ λ“±)의 값을 μœ μ§€ν•΄μ•Ό ν•œλ‹€. 이λ₯Ό μœ„ν•΄ for문의 μ½”λ“œ 블둝이 λ°˜λ³΅ν•΄μ„œ 싀행될 λ–„λ§ˆλ‹€ 독립적인 λ ‰μ‹œμ»¬ ν™˜κ²½μ„ μƒμ„±ν•˜μ—¬ μ‹λ³‹μžμ˜ 값을 μœ μ§€ν•œλ‹€.