Javascript의 클로저에 대한 빠른 가이드

이 블로그에서는 JS의 중요한 기능 중 하나인 Closures와 이러한 기능이 필요한 이유에 대해 설명하겠습니다. 그럼 다이빙합시다.

폐쇄?

클로저를 이해하면 고차 함수 및 커링과 같은 JS의 다른 개념을 이해하는 데 도움이 됩니다.

일반적으로 고차 함수는 이 두 가지 중 하나를 수행합니다.

함수가 함수를 인수로 사용하도록 허용합니다

.

함수가 다른 함수를 반환하도록 허용합니다.

우리가 보게 될 기능은 다른 함수에서 함수를 반환하는 것과 관련이 있습니다. 함수를 반환하는 것 외에도 반환되는 함수와 함께 정보를 얻는다면 어떻게 될까요?

예를 들어 보겠습니다.

  Outer Scope and Inner Scope

bar가 outerScope에 액세스할 수 있었던 방법과 같이 생각했을 것입니다. outerScope의 실행이 완료되면 로컬 메모리에 생성된 foo의 인스턴스가 지워지므로 불가능해야 합니다. 전역 범위에 있는 변수에 대한 참조도 없습니다.

그러나 자바스크립트는 그것을 가능하게 합니다. 함수foo가 호출되면 변수OuterScope와 함수bar가 모두 동일한 어휘 환경을 공유하는 로컬 메모리 내에 생성됩니다. 이로 인해 bar가 foo에서 반환될 때 선언 시간 동안 주변 변수에 액세스할 수 있습니다.



Aclosure는 함수와 함수가 생성된 어휘 환경의 조합입니다.

MDN에 따른 기술적 정의

Technically, A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).
In other words, closure gives you access to the scope of outer function from the inner function

내부 함수로 반환된 데이터를 어떻게 볼 수 있습니까?

일반적으로 함수가 생성되면 함수와 함께 반환되는 데이터에 대한 모든 정보를 포함하는 숨겨진 값[[scope]]이 있습니다. [[scope]]에 액세스할 수 없습니다.

chrome dev 도구에서 다음을 실행하면

console.dir(func)

콘솔에 다음 결과가 표시됩니다.



이제 클로저에 대한 실제 예입니다.

  function trapA(a) {
    return function (b){
      return function (c) {
         return a * b + c
      }
    }
  }

  console.log(trapA(2)(3)(4)) // 10

약간 수정된 동일한 코드

  function trapA(a) {
    return function (b){
      return function (c) {
         return a * b + c
      }
    }
  }

  const wrapper = trapA(2);
  console.dir(wrapper)

  const trapB = wrapper(3);
  console.dir(trapB)

  const trapC = trapB(4);

  console.log(trapC) // 10 

그것을 분해합시다.

trapA의 실행이 완료되면 익명 함수의 함수 정의와 a의 값을 반환합니다. wrapper에 저장됩니다.

console.dir의

wrapper에서 폐쇄 세부 정보를 제공합니다.

wrapper 에 저장된 첫 번째 익명 함수를 실행하면 a , b 및 anonymous function 값이 반환되어 trapB 에 저장됩니다.

console.dir의

trapB에서 폐쇄 세부 정보를 제공합니다.

마지막으로 두 번째 익명 함수가 실행되고 a , b 및 c 에 액세스할 수 있으므로 표현식이 성공적으로 평가됩니다.

마지막console.log 문이 실행되면 값10이 화면에 반환됩니다.

아래는 모든 함수 호출에 대해 [[scope]]에 저장된 값을 나타내는 위 코드 스니펫의 스크린샷입니다.

폐쇄 이유

클로저를 사용하면 기본적으로 사용할 수 없기 때문에 Javascript의 개인 메소드 개념을 에뮬레이트할 수 있습니다. 클로저를 통해 이를 달성할 수 있는 방법의 예를 살펴보겠습니다.



위의 코드 스니펫을 기반으로 세 개의 함수fullName, addNum, and getNum는 동일한 어휘 환경을 공유하며 Javascript의 클로저 개념 덕분에 변수num에 액세스하고 함수 외부에서 액세스할 수 없습니다.

클로저에 대한 설명입니다. 시간 내주셔서 감사합니다. 모두가 개념을 이해했으면 합니다. 모든 제안과 비판을 환영합니다.

유용한 리소스

MDN docs on Closures

JS visualising tool