TIL 19일차 정리

오늘은 클로저의 렉시컬 환경을 알아보겠습니다.

 

클로저와 렉시컬 환경(LexicalEnvironment)

 

i. 외부 함수보다 중첩 함수가 더 오래 유지되는 경우, 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 (여전히) 참조할 수 있다.

   이 개념에서 중첩 함수가 바로 클로저

 

 

const x = 1

// 1
function outer() {
  const x = 10
  const inner = function () { console.log(x) }
  return inner
}

const innetFunc = outer()
innerFunc()

// outer 함수를 호출하면 중첩 함수 inner를 반환한다.
// 그리고 outer 함수의 실행 컨텍스트는 실행 컨텍스트 스탭에서 팝되어 제거된다(역할을 다 했으니깐)
// inner 함수는 런타임에 평가된다.
// inner 함수가 innerFunc에 전달되었는데, 이는 outer 함수의 렉시컬환경을 참조하고 있다.
// 즉, outer 함수의 실행 컨텍스트는 실행 컨텍스트 스택에서 제거되지만 outer 함수의 렉시컬 환경까지 소멸하는 것은 아니다.

 

똑똑한 가비지 컬렉터

 

• 안쓰는 것만 가져간다~ outer 함수의 렉시컬 환경은 참조하는 곳이 있으니 놔둠~
• 클로저와 아닌 것을 구분해 봅시다.

function foo() {
  const x = 1
  const y = 2
  
  // 일반적으로 클로저라고 하지 않는다.
  function bar() {
    const z = 3
    
    // 상위 스코프의 식별자를 참조하지 않는다.
    console.log(z)
  }
  return bar
}

const bar = foo()
bar()

 

function foo() {
  const x = 1
  
  // bar 함수는 클로저였지만 곧바로 소멸한다.
  // 외부로 나가서 따로 호출되는게 아니라, 선언 후 바로 실행 + 소멸
  // 이러한 함수는 일반적으로 클로저라고 하지 않는다.
  function bar() {
    debugger;
    // 상위 스코프의 식별자를 참조한다.
    console.log(x)
  }
  bar()
}
foo()

 

function foo() {
  const x = 1
  const y = 2
  
  // 클로저
  // 중첩 함수 bar는 외부 함수보다 더 오래 유지되며 상위 스코프의 식별자를 참조한다.
  function bar() {
    debugger;
    console.log(x)
  }
  return bar
}

const bar = foo()
bar()