[Javascript] 클로저(Closure)

저번에 함수표현식과 함수선언식의 차이에 대해 공부하면서
함수표현식이 클로저로써 유용하게 쓰일 수 있으며, 이에 대해서 오늘 공부하려고 했으나
클로저에 대해 잘 몰랐고, 읽기만 하고 넘어가기엔 어려운 개념이라는 생각이 들기 때문에, 먼저 클로저에 대해 공부하고자 한다.🤗

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. => 무슨 말이지?
함수 밖에서 선언된 변수를 함수 내부에서 사용할 때 생겨나는 것이다.

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

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));	//107
console.log(add10(2));	//112

위의 예시에서 makeAdder는 함수를 리턴한다. add5와 add10은 둘 다 클로저이다. 같은 함수의 본문 정의를 공유하지만 서로 다른 맥락적 환경을 저장한다. add5와 add10에 저장 된 함수의 세부 내용을 살펴보면 다음과 같다.

var add5 = function(z) {
  y = 100;
  return 5+y+z;
}

var add10 = function(z) {
  y = 100;
  return 10+y+z;
}

add5의 맥락적 환경에서 클로저 내부의 x는 5이고, add10의 맥락적 환경에서 클로저 내부의 x는 10이다. 리턴되는 함수에서는 makeAdder에서 선언, 할당 되었던 y에 접근해서 y의 값을 100으로 변경할 수 있다. 이는 클로저가 리턴된 후에도 외부함수의 변수들에 접근 가능하다는 것을 보여준다!

####References
https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures
https://yuddomack.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%81%B4%EB%A1%9C%EC%A0%80Closure