JavaScript 클로저는 어떻게 작동합니까?

Closure means that an inner function always has access to the vars and parameters of its outer function, even after the outer function has returned.
JavaScript에서 중첩 함수를 만들 수 있다는 것을 배웠습니다. 내부 함수는 외부 함수의 변수 및 매개변수에 액세스할 수 있습니다(단, 외부 함수의 인수 객체에는 액세스할 수 없음).

function OuterFunction() {

    var outerVariable = 1;

    function InnerFunction() {
        alert(outerVariable);
    }

    InnerFunction();
}

예를 들어 InnerFunction()은 outerVariable에 액세스할 수 있습니다.

이제 위의 정의에 따라 InnerFunction()은 별도로 실행되는 경우에도 outerVariable에 액세스할 수 있습니다.

function OuterFunction() {

    var outerVariable = 100;

    function InnerFunction() {
        alert(outerVariable);
    }

    return InnerFunction;
}
var innerFunc = OuterFunction();

innerFunc(); // 100

위의 예에서는 InnerFunction을 반환합니다. OuterFunction()을 호출하면 OuterFunction에서 InnerFunction을 반환합니다. 변수 innerFunc는 OuterFunction()이 아닌 InnerFunction()만 참조합니다. 따라서 이제 innerFunc()를 호출하면 OuterFunction()에 선언된 outerVariable에 계속 액세스할 수 있습니다. 이를 클로저라고 합니다.
A function can return another function in JavaScript. A function which is assigned to a variable is called function expression.

function Counter() {
    var counter = 0;

    function IncreaseCounter() {
        return counter += 1;
    };

    return IncreaseCounter;
}

var counter = Counter();
alert(counter()); // 1
alert(counter()); // 2
alert(counter()); // 3
alert(counter()); // 4

외부 함수 Counter는 내부 함수 IncreaseCounter()의 참조를 반환합니다. 증가 카운터는 외부 변수 카운터를 1로 증가시킵니다. 따라서 내부 함수를 여러 번 호출하면 카운터가 매번 1로 증가합니다.

function Counter() {

    var counter = 0;

    setTimeout( function () {
        var innerCounter = 0;
        counter += 1;
        alert("counter = " + counter);

        setTimeout( function () {
            counter += 1;
            innerCounter += 1;
            alert("counter = " + counter + ", innerCounter = " + innerCounter)
        }, 500);

    }, 1000);
};

Counter();

내부 함수가 외부 함수의 변수에 액세스하는 경우에만 클로저라고 합니다.

클로저를 언제 사용합니까?
클로저는 JavaScript에서 구현 세부 사항을 숨기는 데 유용합니다. 즉, 개인 변수나 함수를 만드는 것이 유용할 수 있습니다.

var counter = (function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  };   
})();

alert(counter.value()); // 0
counter.increment();
counter.increment();
alert(counter.value()); // 2
counter.decrement();
alert(counter.value()); // 1

increment(), decrement(), value()는 반환 객체에 포함되기 때문에 public 함수가 되는 반면, changeBy() 함수는 반환되지 않고 increment()와 decrement()에 의해 내부적으로만 사용되기 때문에 private 함수가 됩니다.