Javascript에서 클로저의 실제 사용?

클로저는 함수와 그 함수가 선언된 어휘 환경의 조합입니다.

function outerFunc() {
   var name = "TutorialsPoint"; // name is a local variable created by outerFunc
   return function innerFunc() {
      // innerFunc() is the inner function, a closure
      console.log(name); // use variable declared in the parent function
   };
}
let f = outerFunc();
f()

outerFunc()는 name이라는 지역 변수와 innerFunc()라는 함수를 생성합니다. innerFunc() 함수는 outerFunc() 내부에 정의된 내부 함수이며 outerFunc() 함수의 본문 내에서만 사용할 수 있습니다.

innerFunc() 함수에는 자체 로컬 변수가 없습니다. 그러나 내부 함수는 외부 함수의 변수에 접근할 수 있으므로 innerFunc()는 부모 함수인 outerFunc()에 선언된 변수 이름에 접근할 수 있습니다.

outerFunc가 실행을 완료했을 때 이름이 범위를 벗어났음을 알 수 있습니다. 그러나 자세히 살펴보면 f에 반환되어 할당된 innerFunc는 여전히 name 변수에 액세스할 수 있습니다. 따라서 inner func는 outerFunc의 어휘 범위에 대한 클로저를 형성했습니다.

실용적 사용

비공개 방법 에뮬레이션 −Java와 같은 언어는 메소드를 비공개로 선언하는 기능을 제공합니다. 즉, 동일한 클래스의 다른 메소드에서만 호출할 수 있습니다. JavaScript는 이를 수행하는 기본 방법을 제공하지 않지만 클로저를 사용하여 개인 메서드를 에뮬레이트하는 것은 가능합니다.

예시

var counter = (() => {
   var privateCounter = 0;
   let changeBy = (val) => privateCounter += val;
   return {
      increment: () => changeBy(1),
      decrement: () => changeBy(-1),
      value: () => privateCounter
   };
})();
console.log(counter.value());
counter.increment();
counter.increment();
console.log(counter.value());
counter.decrement();
console.log(counter.value());

출력

0
2
1

이벤트 핸들러와 함께 사용

for(let i = 0; i < 4; i++) {
   button = buttons[i]
   button.addEventListener("click", alert(i))
}

컬렉션 버튼에 4개의 버튼이 있고 이와 같은 이벤트 리스너를 추가하려고 하면 해당 버튼을 클릭하면 결과적으로 undefined가 표시됩니다. 왜냐하면 그들이 호출될 때 나는 더 이상 정의되지 않을 것이기 때문입니다. 이 문제를 해결하는 방법은 i에 클로저를 도입하는 것입니다.

for(let i = 0; i < 4; i++) {
   button = buttons[i]
   button.addEventListener("click", () => alert(i))
}