자바스크립트에서 클로저란?

나는 최근에 Kyle Simpson이 쓴 책You Don't Know JS Yet을 구입하여 읽었습니다. 몇 년 동안 JS 개발자로 일했지만 이 책을 읽으면서 새로 알게 된 것이 너무 많았습니다(이 책과 관련된 사람의 보증을 받은 것이 아닙니다. 그저 진심으로 좋아했기 때문에 추천하는 것입니다).

그 중 하나는 "폐쇄"였습니다. 이 용어는 몇 번 들었지만 실제로 무엇을 의미하는지 이해하지 못했습니다. Kyle Simpson의 정의를 능가하는 것이 어렵다고 생각합니다.

Closure is when a function remembers and continues to access variables from outside its scope, even when the function is executed in a different scope.

그래서, 그것은 어떻게 생겼습니까?

폐쇄의 몇 가지 예

이전에 클로저를 이미 사용했지만 인식하지 못했을 것입니다. 다음 예를 들어 보십시오.

function doAsyncTask(successMsg) {
  someAsyncTask().then(() => {
    console.log(`I remembered your variable! ${successMsg}`);
  });
}

getSuperImporantInfo('Hooray!');

// Some time later...
// I remembered your variable! Hooray!

someAsyncTask 실행이 완료되면 successMsg 에 전달된 doAsyncTask 변수를 출력합니다. someAsyncTask를 실행하는 데 몇 초 또는 몇 분이 걸릴 수 있지만 then에 전달된 콜백 함수는 successMsg 변수를 "기억"합니다. 우리는 콜백 함수가 successMsg 이상으로 "닫혔다"고 말합니다.

나는 항상 이런 일을 해왔지만 내가 클로저를 사용하고 있다는 것을 몰랐습니다!

이제 카운터 함수를 만들고 싶다고 가정해 보겠습니다. 함수를 호출할 때마다 마지막으로 반환한 숫자 다음에 다음 숫자를 반환합니다. 클로저를 사용하여 반환된 마지막 숫자를 "기억"할 수 있습니다.

function createCounter() {
  let count = 0;
  return () => count++;
}

const inc = createCounter();

inc();
// 0
inc();
// 1
inc();
// 2

createCounter는 count 변수에 액세스할 수 있는 익명 함수를 반환합니다. createCounter에 의해 반환된 함수는 count에 대해 "폐쇄"됩니다. 우리는 심지어 count 의 고유한 복사본을 갖는 여러 증분 함수를 만들 수도 있습니다.

const inc1 = createCounter();
const inc2 = createCounter();

inc1();
// 0
inc2();
// 0
inc1();
// 1
inc1();
// 2
inc2();
// 1

이것들은 간단한 예일 수 있지만 이전에도 이와 같은 카운터 함수를 작성해야 했습니다. 클로저에 대해 알기 전에 전체 모듈에서 볼 수 있는 변수를 만들고 카운터 함수에서 변수를 증가시켰습니다. 이제 모듈 범위를 오염시키지 않아도 되는 더 나은 방법이 있다는 것을 알고 있습니다.

그게 다야! 폐쇄를 유리하게 사용할 수 있는 다른 예는 무엇입니까?