1. 클로저의 정의 및 의미

• 클로저의 정의

<aside> 💡

외부 함수보다 중첩 함수가 더 오래 유지되는 경우, 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있다. 이러한 중첩 함수를 클로저라고 부른다.

</aside>

• 클로저의 활용 의미

<aside> 💡

상태를 안전하게 변경하고 유지하기 위해 사용한다. 즉 상태가 의도치 않게 변경되지 않도록 상태를 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용한다.

</aside>

• 뭐라하는지 잘 모르겠다. 예시를 통해 살펴보자

1.1 클로저의 예시

const x = 1
// 1번
function outer() { // --- 외부 함수
  const x = 10
  const inner = function () { console.log(x) } // --- 중첩 함수 2번
  return inner
}

// outer함수를 호출하면 중첩 함수 inner를 반환한다.
// outer함수의 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거
const innerFunc = outer() // 3번
innerFunc() // 4번, 10

• outer함수는 inner함수를 반환하고 이를 실행했을 때 console.log(x)를 반환한다.
• 3번일 때의 모습

• outer 실행 컨텍스트가 제거되었지만, inner함수에서 참조하고 있다.
• 함수가 만들어질 때 [[Environment]] 내부 프로퍼티를 통해 외부 렉시컬 환경에 대한 참조를 저장하기 때문에 가능한 것이다.