Closure 란?

다른 함수 내부에 정의된 함수(innerFunction)가 있는 경우 외부 함수(outerFunction)가 실행을 완료하고 해당 변수가 해당 함수 외부에서 더 이상 액세스할 수 없는 경우에도 해당 내부 함수는 외부 함수의 변수 및 범위에 액세스할 수 있습니다.

function outerFunction(outerVariable) {
  return function innerFunction(innerVariable) {
    console.log(`Outer Variable: ${outerVariable}`);
    console.log(`Inner Variable: ${innerVariable}`);
  };
}

const newFunction = outerFunction("outside");
// 함수가 함수를 리턴함.
// 그래서 newFunction 변수는 함수임.
newFunction("inside");

1. outerFunction('outside')은 변수 "newFunction"에 할당되는 즉시 호출됩니다.

2. 호출되면 outerFunction은 변수 "newFunction"을 outerFunction(outerVariable) 대신 innerFunction(innerVariable)을 반환 합니다.

3. 그런 다음 변수를 newFunction('inside')으로 호출하여 innerFunction('inside')을 호출합니다.

클로저는 innerFunction이 원래 outerFunction('outside')으로 설정한 outerVariable 매개변수를 기억하고 액세스할 수 있다는 것입니다.

따라서 'inside'로만 호출되었더라도 'outside'와 'inside'를 모두 console.log할 수 있습니다.

간단한 예시

let a = "a";
function functionA() {
  let b = "b";
  console.log(a, b);
}
functionA(); // a b

let a = "a";
function functionB() {
  let c = "c";
  console.log(a, b, c);
}

function functionA() {
  let b = "b";
  console.log(a, b);

  functionB(); // <- add
}
functionA(); // ReferenceError: b is not defined

Closure를 이용해서 해결

let a = "a";
function functionA() {
  function functionB() {
    let c = "c";
    console.log(a, b, c);
  }

  let b = "b";
  console.log(a, b);
  functionB();
}
functionA();

// a b
// a b c

다른 함수 내부에 정의된 함수(innerFunction)가 있는 경우 외부 함수(outerFunction)가 실행을 완료하고 해당 변수가 해당 함수 외부에서 더 이상 액세스할 수 없는 경우에도  해당 내부 함수는 외부 함수의 변수 및 범위에 액세스할 수 있습니다.