[JavaScript_study] 클로저 (Closure)

* Closure

  > 함수와 렉시컬 환경의 조합

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

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

function makeAdder(x) {
  return function(y) {
    return x + y;
  }
}
// 익명함수는 y를 가지고 있고 상위함수인 makeAdder의 x에 접근 가능

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

const add10 = makeAdder(10);
console.log(add10(5)); // 15
console.log(add3(1)); // 4

// add10과 add3은 서로 다른 환경을 가지고 있다.

전역 Lexical 환경

makeAdder : function

add3 : function

 

makeAdder Lexical 환경

x : 3

 

익명함수 Lexical 환경

y : 2

 

function makeCounter() {
  let num = 0;
  
  return function() {
    return num++
  };
}

let counter = makeCounter();

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

// 내부함수에서 외부함수의 변수인 num에 접근한다.

 

* 어휘적 환경 (Lexical Environment)

let one;
one = 1;

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

addOne(5);

[ 전역 Lexical 환경] 

one : 1

addOne : function

 

[ 내부 Lexical 환경 ] 

num : 5

 

=> 내부 Lexical 환경은 전역 Lexical환경을 참조한다. 코드에서 변수를 찾을때 내부에서 찾고 없으면 전역에 까지 범위를 넓혀 찾는다.