[Effective Javascript #2] 클로저 - Closure

javascript 클로저를 공부하고 있는 와중, Effective javascript에서도 클로저에 대한 내용이 나와 정리해보고자 한다.

클로저라는 개념은 자바스크립트외에 다른 언어에 익숙한 사람들에게 굉장히 생소한 개념이다.
그렇기 떄문에 어떤 이들은 클로저의 개념을 알면 자바스크립를 이해할 수 있다고도 한다.
클로저를 이해하기 위해서는 3가지 기본적인 사실만 이해하면 된다.

1. 자바스크립트는 현재함수 외부에서 선언된 변수를 참조할 수 있다.
2. 함수는 외부함수가 무언가를 리턴한 후에도 이 외부함수에서 선언된 변수를 참조할 수 있다.
3. 클로저는 외부 변수의 값을 변경할 수 있다.

• 자바스크립트는 현재함수 외부에서 선언된 변수를 참조할 수 있다.

아래 함수를 살펴보자.
내부 make 함수가 makeSandwich 함수에서 선언된 mgaicIngredient를 참조하고 있다.
함수 바깥에서 선언된 변수를 참조한다는 사실을 주목하자.

function makeSandwich() {
  const magicIngredient = "peanut butter";
  function make(filling) {
    return `${magicIngredient} and ${filling}`;
  }
  return make("jelly");
}

makeSandwich() // peanut butter and jelly

• 함수는 외부함수가 무언가를 리턴한 후에도 이 외부함수에서 선언된 변수를 참조할 수 있다.

아래 함수에서 hamAnd, chickenAnd로 makeSandWich가 이미 리턴되었음에도 hamAnd("cheese"), chickenAnd("tomato")를 통해 make함수를 수행한다.

어떻게 이런일이 가능할까?
자바스크립트의 함수값은 호출되었을 때 실행을 위한 코드 뿐만이 아닌 다양한 정보를 포함하고 있다. 해당 스코프 내에서 참조되는 모든 변수들을 내부적으로 담고 있기에 make 함수를 다시 호출할 수 있다.

function makeSandwich(magicIngredient) {
  function make(filling) {
    return `${magicIngredient} and ${filling}`;
  }
  return make;
}

const hamAnd = makeSandwich("ham");
hamAnd("cheese"); // ham and cheese
const chickenAnd = makeSandwich("chicken");
chickenAnd("tomato"); // chicken and tomato

그리고 위 표현식은 더 간단하게 익명의 함수로도 표현 가능하다.

function makeSandwich(magicIngredient) {
  function (filling) {
    return `${magicIngredient} and ${filling}`;
  }
}

• 클로저는 외부 변수의 값을 변경할 수 있다.

클로저는 실제로 외부의 값을 복사하지 않고 참조를 저장한다.
아래 코드를 살펴보자

아래 box 함수는 set,get,type 3개의 클로저 함수를 갖고있으며
각 클로저 함수는 98.6 변수를 공유하고 있다.

function box() {
  const val = undefined;
  return {
    set : function(newVal) {val = newVal;},
    get : function() {return val;},
    type : function() {return typeof val;},
  };
}

const b = box();
b.type(); // undefined
b.set(98.6);
b.get(); // 98.6
b.type(); // number

이정도만 이해하고 있어도 클로저가 등장했을 때 코드를 읽을 수 있을 것이다.

더 자세하게 클로저가 어떻게 동작하는지, 자바스크립트가 어떻게 외부 변수를 참조하는지 알고싶다면 https://ko.javascript.info/closure 이 웹사이트를 강력히 추천한다!!