자바스크립트 중급 11 - 클로저(Closure)

*js는 '어휘적 환경(Lexical Environment)' 을 갖는다.

let one;    //→  undefined
one = 1;    //→  1

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

addOne(5);

    → Lexical 환경: one- 초기화X (사용 불가) / addOne- function 초기화O (사용 가능)

     [내부 Lexical 환경]          →          [전역 Lexical 환경]        

      num : 5                        참조             one : 1

                                                              addOne : function

    내부   → 외부   → 전역 Lexical 환경 순으로 찾는다.

function makeAdder(x){      //1.<전역 Lexical환경>  
  return function(y){       //makeAdder : function 
    return x + y;           //add3 : (초기화x) -> function 
  } 
}
const add3 = makeAdder(3);   //2.<makeAdder Lexical환경> x:3
console.log(add3(2));   //5   //<익명함수 Lexical환경> y:2

const add10 = makeAdder(10);
console.log(add10(5));    //15
console.log(add3(1));    //4    → add10이 생성되도 add3은 똑같이 존재. 다른 환경이기 때문

→  function(y) : y를 가지고 있고 상위함수인 makeAdder의 x에 접근 가능 

     add3 함수가 생성된 이후에도 상위함수인 makeAdder의 x에 접근 가능

→ Colsure:

     함수와 Lexical 환경의 조합

     함수가 생성될 당시의 외부 변수를 기억

     생성 이후에도 계속 접근 가능 

     내부함수가 외부함수에 접근 가능 

 

function makeCounter() {
  let num = 0;        //외부함수
  
  return function () {
    return num++;             //내부함수
  };
}
let counter = makeCounter();

console.log(counter());  //0
console.log(counter());  //1
console.log(counter());  //2