폐업 초보자 안내서

반응형

클로저는 함수와 그 주변 어휘 환경을 묶는 자바스크립트 기능이다. 함수형 프로그래밍에서 클로저는 가장 중요한 요소 중 하나이며 클로저 덕분에 다른 많은 특징들이 존재한다. 그러나 폐쇄를 이해하기 전에 범위 및 어휘 환경(또는 정적 범위)을 이해해야 합니다.

스코프

스코프는 속성(변수 또는 함수)에 액세스할 수 있는 코드 블록을 나타냅니다. 범위는 단순히 접근성의 경계를 정의합니다. 자바스크립트에는 3가지 종류의 범위가 있다.

1) 전역 범위

2) 로컬/기능 범위

 

3) 블록 범위

function foo() {
  // The function scope
  let count = 0; 
   console.log(count); 
   // logs 0
} 
foo(); 
console.log(count); // ReferenceError: count is not defined

여기서 변수 카운트는 로컬/함수 범위(이 경우 함수 foo의 블록 내에서) 내에서 선언되며, foo 범위를 벗어난 카운트에 액세스하려고 하면 참조 오류가 발생합니다.

어휘 범위

이것은 외부 함수에 내포된 하위 함수의 동작을 결정하는 자바스크립트 메커니즘입니다. 종종 이러한 동작들은 내포된 함수 외부에 선언된 변수에 대한 접근 권한을 부여하는 것을 포함한다.

 

const parent = () => { 
   let myValue = 2;
   console.log(myValue);
   const childFunc = () => {
      console.log(myValue += 1);
   } 
    childFunc();
} 
parent ();

위의 예에서는 어휘 범위 메커니즘으로 인해 childFunc()가 참조 오류를 발생시키지 않고 myValue 변수에 액세스할 수 있습니다.

그렇다면, 폐쇄란 무엇일까요?

MDN Doc은 함수와 어휘 환경을 한데 묶는다고 말하지만, 폐쇄를 인식하는 가장 간단한 방법은 아마도 상태 저장 환경을 함수들에게 제공하는 것이다. 즉, 클로저는 중첩된 함수에 외부 기능이 정지된 후에도 외부 스코프에 액세스할 수 있는 기능을 제공합니다.

function counter(){ 
   let numOfExecutions = 0;
   numOfExecutions++; 
   console.log(numOfExecutions);
} 
counter() // 1 
counter() // 1

 

닫힘이 없으면 카운터() 함수의 출력은 항상 1이 됩니다. 화려하지 않다. 그러나:

function createCounter() {
   let numOfExecutions = 0;
   function counter() {
      numOfExecutions++;
      console.log(numOfExecutions);
   }
   return counter;
}
const counter = createCounter();
counter() // 1
counter() // 2

createCounter()의 컨텍스트로 counter() 함수를 래핑하면 counter() 함수로 접근할 수 있는 numOfExecutions 값을 저장할 수 있다. CreateCounter() 함수는 카운터 변수에 할당되었을 때 실행되었습니다. 그러나 중첩된 하위 함수 카운터()를 반환하며, 이 카운터는 닫힘이 제공된다. 이렇게 하면 createCounter()의 실행이 오래 전에 완료되었는지 여부에 관계없이 호출할 때마다 numOfExecutions 변수에 액세스할 수 있습니다. 이것은 이전 반복에서 얻은 리소스를 공유할 수 있기 때문에 유용합니다.