[javascript] 클로져의 개념

Closure

함수는 선언되는 시점과 실행되는 시점이 서로 다르다.
선언하는 시점에 어떤 변수가 있는데, 프로그램이 실행되면서 그 변수는 바뀌게된다.

💡 클로저란

내부함수가 실행시점을 포함해 외부함수의 맥락에 접근할 수 있는 것.
쉽게 말해
함수가 정의된 시점에서 외부 변수들의 현재상태와
함수가 실행된 시점에서 외부 변수들의 상태를 격리한다.

선언시점에서의 변수값을 사용하고 싶다면 클로저는 외부 스코프에 정의된 변수들도 사용할 수 있게 한다.

💡 예시

var createTodayExchangeRate(rate) {

    return function(dollar) { //rate를 받아 익명함수를 리턴한다.
        
        var result = dollar * rate; //변수 계산
        console.log(result);
        return result

    }
}

var convert_exchange = createTodayExchangeRate(1117.06) 
//현재 환율을 넣으면 환율이 var convert_exchange안에 내재변수화된다.


convert_exchange(20);
//1117.06이란 환율을 가진 convert_exchage 함수에 매개변수로 20을 넣어 계산리턴

💡 다른 예시

MDN Web Docs

function makeAdder(x) {
      var y = 1;
      return function(z) {
        y = 100;
        return x + y + z;
      };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);
    //클로저에 x와 y의 환경이 저장됨

console.log(add5(2));  // 107 (x:5 + y:100 + z:2)
console.log(add10(2)); // 112 (x:10 + y:100 + z:2)
    //함수 실행 시 클로저에 저장된 x, y값에 접근하여 값을 계산

add5 변수 makeAdder(5)로 선언되는 순간, x는 5, y는 1인 상태이다.

그리고 makeAdder함수는 익명함수 function(z)를 리턴하므로,
console.log(add5(2))에서 makeAdder(5)의 익명함수 function(2)를 호출하며

y는 100이 선언되고, return으로 x+y+z = 5+100+2가 된다.