Closure

 

Closure 란?

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

 

 

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

 const newFunction = outerFunction('outside');
 console.log('New function: ' + newFunction)
 newFunction('inside');

 

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

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

즉, newFunction이 outerFunction의 리턴값인 innerFunction이다.

 

 

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();

이상 없이 잘 호출 된다.

 

let a = 'a';

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

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

functionA();

functionB에서 c는 functionB내부에 있기 때문에 잘 호출이 되지만 b의 경우 외부 함수인 A에서 사용되는 변수이므로 호출을 할 수 없다.

이러한 상황을 클로저를 이용해 아래와 같이 해결해 보자.

 

 

let a = 'a';

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

그러면 이제 외부 함수에 있는 변수 b에 접근을 할 수 있다.