[JS] 클로저

클로저란?

 

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

 

 

 

 

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

const newFunction = outerFunction('outside');
newFunction('inside');

위의 코드에서 outerFunction을 호출하면서 ‘outside’를 인수로 넣어주면,  innerFunction(innerVariable) 함수가 반환되고 newFunction 변수에 저장된다.

 

그리고 newFunction을 실행과 동시에 ‘inside’를 인수로 넣어주면 console.log가 실행된다.

 

 

 

 

이상한 점은 바로 console.log('Outer Variable: ' + outerVariable); 가 오류 없이 출력된다는 것이다. 

 

outerVariable은 outerFunction의 매개변수이다.

 

하지만 innerFunction(innerVariable) 함수를 반환함과 동시에 outerFunction 함수는 끝났다. 그럼에도 불구하고 outerFunction의 매개변수인 outerVariable이 오류 없이 출력된다. 이것이 바로 클로저 덕분이다.

 

 

 

 

내부에서 접근할 수 있는 Local 변수로 innnerVariable, 클로저로 접근할 수 있는 변수로 outerVariable이 있는 것을 확인할 수 있다.

 

 

 

 

예시

let a = 'a';

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

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

functionA();

위의 코드를 출력해 보면  console.log(a, b, c);  부분에서 변수 b의 값을 참조할 수 없기 때문에 오류가 나온다.

 

 

 

 

- 클로저를 이용해 해결

let a = 'a';

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

functionA();

이때 다음과 같이 functionB를 functionA의 내부로 넣고 실행시켜 준다. 그리고 확인해 보면

 

 

 

 

클로저로 변수 b가 나오며, 오류 없이 출력되는 것을 확인할 수 있다.

 

 

 

 

정리

 

클로저란 생명주기가 끝난 외부 함수의 변수에 접근할 수 있는 내부 함수를 의미