클로저

어휘적 환경(lexical environment)

// 어휘적 환경
let one;
one = 1;

function addOne(num) {
  console.log(one + num);
}

addOne(5); // 6

1. 코드가 실행되면 스크립트 내에서 선언한 변수들이 렉시컬 환경으로 올라간다. one: 초기화x,사용불가
   addOne: function(함수선언문이므로), 사용가능
2. let one; 을 만나면 one: 초기값 undefined를 갖는다. 사용가능
3. one = 1; 을 만나면 one: 1
4. addOne(5)를 만나면 새로운 렉시컬 환경이 만들어지고 num:5이다.
   함수 호출 시 함수에서 만들어진 내부 렉시컬 환경과 함수 외부에서 만들어진 전역 렉시컬 환경을 갖는다.
5. 내부 렉시컬 환경은 외부 렉시컬 환경에 대한 참조를 갖는다. 코드에서 변수를 찾을때 내부 - 외부 - 전역 순서로 범위를 넓혀서 찾는다.

클로저 closure

함수와 렉시컬 환경의 조합. 함수가 생성될 당시의 외부변수를 기억한다. 생성된 이후에도 그 변수에 계속 접근 가능
클로저는 내부함수가 외부함수의 맥락에 접근할 수 있는 것

//예제1
function outter() {
  const title = "HELLO";
  function inner() {
    console.log(title);
  }
  inner();
}

outter();


//예제2
function makeAdder(x) {
  return function (y) {
    return x + y;
  };
}

const add1 = makeAdder(3);
console.log(add1(2)); //5 , add1함수가 생성된 이후에도 상위함수인 makeAdder의 x에 접근 가능

const add2 = makeAdder(10);
console.log(add2(5)); //15
console.log(add1(6)); //9, add2와 add1은 서로 다른 환경을 가지고 있기 때문에 서로 영향을 미치지 않는다.

내부함수 inner는 외부함수 outter의 지역변수에 접근할 수 있다.
근데 외부함수의 실행이 끝나서 외부함수가 소멸된 후에도 내부함수가 외부함수의 변수에 접근할 수 있다. 이러한 메커니즘을 클로저라고 한다.

function outter() {
  const title = "HELLO";
  return function () {
    console.log(title);
  };
}

const inner = outter();
inner();

함수 ourtter()의 실행결과는 리턴된 익명함수 function () {console.log(title);};이며 이 리턴값은 inner라는 변수에 담긴다. 여기서 outter와 inner는 서로 다른 개별적인 함수가 된다. outter의 실행결과를 변수에 담았을뿐이다.
최종적으로 inner()로 함수가 실행되는데, inner함수는 console.log(title)의 기능밖에 없어야 하지만 외부함수 outter에 있던 변수 title이 출력된다.