JS Closure

클로저란 함수가 함수와 함수가 선언된 환경의 조합(MDN 출처) 이다. 함수안에 있는 변수의 유효범위 라고 요약하면 될 것 같다.

쉬운말로 설명하면

export default function example_1() {
  const aaa = 11111
  
return example_2(){
  		console.log(aaa)
	}
}
// expected : 11111

극단적으로 간단한 예를 든 것이지만, 내부 함수에서도 부모 함수에서 선언된 변수 또는 데이터 를 호출 할 수 있다는 의미이다.

개인적으로 이해하기 힘든 개념은 아니었다.

다른 예시를 들어보자. (출처 : MDN)

    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값에 접근하여 값을 계산

단일인자x를 매개변수로 받는 함수인데, makeAdder함수 안에 또다른 함수가 존재한다.

add5라는 함수는 x에 5라는 값을 할당한 '함수'이고 마찬가지로 add10은 x에 10이라는 값을 할당한 함수이기 때문에 내부함수 function에서 5와 10 이라는 x값을 불러올 수 있다.

그냥 쉽게 말해서 부모함수에서 선언된 변수는 자식 함수에서 맘대로 쓸수있다. 끝