📝 오늘 한 것

1. 클로저

📖 학습 자료

1. 책 『코어 자바스크립트』

📚 배운 것

5. 클로저

[TIL] 210915 참고

1) 클로저의 의미 및 원리 이해

클로저란 함수와 그 함수가 선언될 당시의 LexicalEnvironment의 상호관계에 따른 현상을 말한다.
다른 말로는, 어떤 함수에서 선언한 변수를 참조하는 내부 함수에서만 발생하는 현상이라고 할 수 있다.

이해하기 어렵기 때문에 설명을 덧붙이자면 다음과 같다.

var outer = function () {
  var a = 1;
  var inner = function () {
    console.log(++a);
  };
  return inner();
};

var outer2 = outer();
consol.elog(outer2);

위 예제는 일반적인 함수 및 내부 함수에서의 동작을 보여준다.
일반적으로 outer 실행 컨텍스트가 종료되면 LexicalEnvironment에 저장된 식별자들(a, inner)에 대한 참조를 지운다.
그러면 각 주소에 저장되어 있던 데이터 영역의 값들은 자신을 참조하는 변수가 하나도 없게 되므로 가비지 컬렉터의 수집 대상이 된다.
이 경우 outer 함수의 실행 컨텍스트가 종료되기 전에 inner 함수의 컨텍스트가 종료되고, 이후에 별도로 inner 함수를 호출할 수도 없다.

var outer = function () {
  var a = 1;
  var inner = function () {
    return ++a;
  };
  return inner;
};

var outer2 = outer();
console.log(outer2());
console.log(outer2());

반면에, 위 예제는 대표적인 클로저의 예시이다.
이 경우 outer 함수가 inner 함수를 반환하고 있기 때문에 outer 함수의 실행 컨텍스트가 종료된 후에도 inner 함수를 호출할 수 있다.

outer2()에 의해 inner 함수가 호출되는데 inner 함수는 변수 a의 값을 참조하고 있다.
LexicalEnvironment의 environmentRecord와 outerEnvironmentReference에 의해 변수의 유효범위인 스코프가 결정되고 스코프 체인이 가능해진다.
그런데 inner 함수의 실행 컨텍스트의 environmentRecord에서는 변수 a를 찾을 수 없으므로 outerEnvironmentReference에서 찾아야 한다.
inner 함수의 실행 컨텍스트의 outerEnvironmentReference에는 inner 함수가 선언될 당시의 LexicalEnvironment인 outer 함수의 실행 컨텍스트의 LexicalEnvironment가 담긴다.
스코프 체이닝에 따라 outer 함수에서 선언한 변수 a에 접근할 수 있게 되어 console 창에는 각각 2와 3이라는 값이 출력된다.

그런데 inner 함수의 실행 시점에는 outer 함수는 이미 실행이 종료된 상태임에도 어떻게 outer 함수의 LexicalEnvironment에 접근할 수 있는 걸까?
이는 어떤 값을 참조하는 변수가 하나라도 있다면 그 값은 수집 대상에 포함시키지 않는 가비지 컬렉터의 동작 방식 때문이다.
즉, 위 예제의 경우 inner 함수가 외부로 전달되어(outer2 변수로 전달) 언제든 outer2()에 의해 inner 함수가 호출될 여지가 있는 상황에서 inner 함수는 변수 a를 참조하고 있기 때문에 inner 함수를 return 하면서 outer 함수의 실행 컨텍스트가 종료되었음에도 변수 a가 가비지 컬렉팅되지 않는 것이다.

이를 바탕으로 클로저의 정의를 다시 쉽게 풀어쓰면 다음과 같다.
클로저란 외부 함수의 지역변수를 참조하는 내부 함수가 외부로 전달된 경우, 외부 함수의 실행 컨텍스트가 종료된 이후에도 외부 함수의 변수 a가 사라지지 않는(가비지 컬렉팅되지 않는) 현상을 말한다. (이때, 외부 함수 ≠ 외부)

위 예제를 빗대어 다음과 같이 설명할 수 있다.
클로저란 외부 함수(outer)의 지역변수(a)를 참조하는 내부 함수(inner)가 외부로 전달(return inner → outer2 변수에 할당)된 경우, 외부 함수의 실행 컨텍스트가 종료된 이후에도(inner 함수를 return 하며 종료) 외부 함수의 변수 a가 사라지지 않는 현상을 말한다.

한편, 내부 함수를 return 하는 것 외에도 내부 함수를 콜백 함수로 사용하여 외부에 전달할 수도 있다.
내부 함수를 콜백 함수로 사용하면서 외부로 전달하는 대표적인 예로는 setInterval/setTimeout과 addEventListener를 들 수 있다.
이 경우 return이 없어도 클로저가 발생한다.

// setInterval
(function () {
  var a = 0;
  var intervalId = null;
  var inner = function () {
    if (++a >= 10) {
      clearInterval(intervalId);
    }
    console.log(a);
  };
  intervalId = setInterval(inner, 1000);
})();

setInterval 함수가 실행됨에 따라 (즉시 실행 함수로 표현된) 익명 함수의 실행이 완료되어 익명 함수의 실행 컨텍스트가 종료된다.
그러나, 익명 함수에서 선언된 변수 a를 참조하는 inner 함수가 setInterval 함수의 콜백 함수로 전달되어 1초마다 호출되기 때문에
비록 (즉시 실행 함수로 표현된) 익명 함수의 실행 컨텍스트가 종료되었더라도 (계속해서 호출이 될 inner 함수를 위해) 변수 a는 사라지지 않는다.

// addEventListener
(function () {
  var count = 0;
  var button = document.createElement("button");
  button.innerText = "click";
  button.addEventListener("click", function () {
    console.log(++count, "times clicked");
  });
  document.body.appendChild(button);
})

button을 body의 마지막 자식 요소로 추가하면서 (즉시 실행 함수로 표현된) 익명 함수의 실행이 완료되어 익명 함수의 실행 컨텍스트가 종료된다.
그러나, 익명 함수에서 선언된 변수 count를 참조하는 (이벤트 리스너) 익명 함수가 addEventListener의 콜백 함수로 전달되어 버튼이 클릭될 때마다 호출될 것이기 때문에
비록 (즉시 실행 함수로 표현된) 익명 함수의 실행 컨텍스트가 종료되었더라도 (버튼이 클릭될 때마다 계속해서 호출이 될 이벤트 리스너 익명 함수를 위해) 변수 count는 사라지지 않는다.

2) 클로저와 메모리 관리 🙋‍♀️

클로저는 의도적으로 함수의 지역 변수를 메모리를 소모하도록 함으로써 발생한다.
따라서, 메모리를 효율적으로 관리하기 위해서는 그 필요성이 사라진 시점에는 더는 메모리를 소모하지 않도록 해야 한다.

참조 카운트를 0으로 만들면, 가비지 컬텍터(GC)의 수거 대상이 되고, GC가 수거해가면 소모됐던 메모리가 회수된다.
참조 카운트를 0으로 만들기 위해서는 식별자에 참조형이 아닌 기본형 데이터(null 또는 undefined)를 할당해야 한다.

3) 클로저 활용 사례

(1) 콜백 함수 내부에서 외부 데이터를 사용하고자 할 때

이벤트 리스너 함수를 예로 들었다.

방법 1: 콜백 함수를 내부 함수로 선언해서 외부 변수를 직접 참조하기

이벤트 리스너 안에서 콜백 함수를 '선언'하면서 그 안에서 외부 변수를 직접 참조하도록 한다.
클로저를 이용한 방법이다.

var fruits = ["apple", "banana", "peach"];
var $ul = document.createElement("ul");

fruits.forEach(function (fruit) {
  var $li = document.createElement("li");
  $li.innerText = fruit;
  $li.addEventListener("click", function () { // 콜백 함수를 내부 함수로 선언
    alert("your choice is " + fruit); // 외부 변수 fruit 직접 참조
  });
  $ul.appendChild($li);
});

document.body.appendChild($ul);

방법 2: bind 메서드로 값을 직접 넘겨주기

위 예제에서 반복을 줄이기 위해 콜백 함수(이벤트 리스너 함수)를 외부로 분리한 후 이벤트 리스너 함수로 등록할 때 bind 메서드를 사용한다.
(bind 메서드를 사용하지 않으면 alertFruit 함수에서 인자로 넘겨준 fruit는 이벤트 객체가 된다.)

이 방법을 사용하면 미리 bind 메서드로 값을 직접 넘겨주기 때문에 클로저는 발생하지 않는다.
그러나, bind 메서드를 사용하면 bind 메서드의 첫 번째 인자는 무조건 새로 바인딩할 this 값이고 이 값을 생략할 수 없기 때문에 원래의 this를 유지할 수 없을 뿐 아니라
원래는 이벤트 리스너 함수에서 첫 번째 인자로 오는 이벤트 객체가 bind 메서드에 의해 두 번째 인자가 되는 점을 감안해야 한다.

...
var alertFruit = function (fruit) {
  alert("your choice is " + fruit);
};

fruits.forEach(function (fruit) {
  var $li = document.createElement("li");
  $li.innerText = fruit; // 여기 fruit를
  $li.addEventListener("click", alertFruit.bind(null, fruit)); // alertFruit의 첫 번째 인자로 넘겨줌
  $ul.appendChild($li);
});
...

방법 3: 고차 함수 활용하기

고차 함수란 함수를 인자로 받거나 '함수를 return' 하는 함수를 말한다.
이 또한 $li가 클릭됐을 때 fruit 변수의 값을 이미 종료된 forEach 실행 컨텍스트에서 찾아야 하므로 클로저를 적극적으로 활용한 방법이다.
bind 메서드를 이용한 방법과는 달리, 콜백 함수(이벤트 리스너 함수) 내부의 this와 그 첫 번째 인자(이벤트 객체)도 변경하는 일 없이 외부 변수를 참조할 수 있도록 한다.

var alertFruitBuilder = function (fruit) {
  return function () { // 이벤트 리스너 함수의 첫 번째 인자로는 원래대로 이벤트 객체가 오게 된다
    alert("your choice is " + fruit);
  };
}

fruits.forEach(function (fruit) {
  var $li = document.createElement("li");
  $li.innerText = fruit;
  $li.addEventListener("click", alertFruitBuilder(fruit));
  $ul.appendChild($li);
});

(2) 접근 권한 제어 (정보 은닉)

정보 은닉이란 어떤 모듈의 내부 로직에 대해 외부로의 노출을 최소화하는 것을 말한다.
자바스크립트는 기본적으로 변수 자체에 접근 권한을 직접 부여하도록 설계되어 있지는 않다.
그러나, 클로저를 활용하면 함수 차원에서, public한 값과 private한 값을 구분할 수 있다.

이를 위해 객체가 아닌 '함수'에서 지역변수 및 내부 함수 등을 생성한 후 내부에서만 사용할 정보들은 return 하지 않고, 외부에 제공하고자 하는 정보들만 모아서 return 하도록 한다.
외부에 제공하고자 하는 대상이 여럿일 때는 '객체 또는 배열', 하나일 때는 '함수'를 return 한다.

이때 return 하지 않은 대상에는 당연히 접근할 수 없지만 return 한 대상도 다른 내용으로 덮어씌우기를 할 수 있기 때문에 객체를 return 하기 전에 미리 변경할 수 없도록 Object.freeze()를 이용해야 한다.

var createCar = function () {
  // 접근 권한 x
  var fuel = ...
  var power = ...
  var moved = ...
  
  // 접근 권한 o
  var publicMembers = {
    get moved () { // 읽기 전용 속성
      return moved;
    }
    run: function () {
      ...
    }
  };
  Object.freeze(publicMembers);
  return publicMembers;
};

var car = createCar();

(3) 부분 적용 함수

부분 적용 함수란 n개의 인자를 받는 함수에 미리 m개의 인자만 넘겨 기억시켰다가, 나중에 (n-m) 개의 인자를 넘겨 비로소 원래 함수의 실행 결과를 얻을 수 있도록 하는 함수이다.

방법 1: bind 메서드

var add = function () {
  var result = 0;
  for (var i = 0; i < arguments.length; i++) {
    result += arguments[i];
  }
  return result;
};

var addPartial = add.bind(null, 1, 2, 3, 4, 5);
console.log(6, 7, 8, 9, 10); // 55

그러나, bind 메서드를 사용하면 앞서 살펴본 것처럼 this를 무조건 변경해야 하기 때문에 메서드에서는 사용할 수 없다는 문제가 있다.

방법 2: 부분 적용 함수 구현

var partial = function () {
  var originalPartialArgs = arguments;
  var func = originalPartialArgs[0];
  if (typeof fun !== "function") {
    throw new Error("첫 번째 인자가 함수가 아닙니다.");
  }
  return function () {
    var partialArgs = Array.prototype.slice.call(originalPartialArgs, 1);
    var restArgs = Array.prototype.slice.call(arguments);
    return func.apply(this, partialArgs.concat(restArgs));
  }
}

var add = function () {
  var result = 0;
  for (var i = 0; i < arguments.length; i++) {
    result += arguments[i];
  }
  return result;
};

const addPartial = partial(add, 1, 2, 3, 4, 5);
console.log(addPartial(6, 7, 8, 9, 10)); // 55

var dog = {
  name: "강아지",
  greet: partial(function(prefix, suffix) {
    return prefix + this.name + suffix;
  }, "왈왈, "),
};
console.log(dog.greet("입니다!")); // 왈왈, 강아지입니다!

다만, 이는 부분 적용 함수에 넘길 인자를 반드시 앞에서부터 차례로 전달할 수밖에 없다.

방법 3: 부분 적용 함수 구현 (수정)

처음에 넘겨준 인자들 중 _로 비워놓은 공간마다 나중에 넘어온 인자들이 차례대로 끼워넣도록 구현할 수 있다.

→ 방법 2와 방법 3은 미리 일부 인자를 넘겨두어 기억하게끔 하고, 추후 필요한 시점에 기억했던 인자들까지 함께 실행하도록 한다는 점에서 클로저를 핵심 기법으로 사용했다고 할 수 있다.

디바운스

디바운스란 짧은 시간 동안 동일한 이벤트가 많이 발생한 경우 이를 전부 처리하지 않고 처음 또는 마지막에 발생한 이벤트에 대해서 한 번만 처리하는 것을 말한다.

var debounce = function (eventName, func, wait) {
  var timeoutId = null;
  return function (event) { // 2-1. 여기서 event는 이벤트 객체
    var self = this; // 1-1. 여기서 this는 콜백 함수에 대한 제어권을 가지는 addEventListener 메서드에 의해 body가 된다
    console.log(eventName, "event 발생");
    clearTimeout(timeoutId);
    timeoutId = setTimeout(func.bind(self, event), wait);
    // 1-2. 그 body를 func 함수 내부의 this로 바인딩한다.
    // 2-2. 그 이벤트 객체를 func의 첫 번째 인자로 전해준다.
  };
};

var moveHandler = function (e) { // 2-3. 여기서 e는 이벤트 객체가 된다.
  console.log("move event 처리");
};
var wheelHandler = function (e) {
  console.log("wheel evnet 처리");
};

document.body.addEventListener("mousemove", debounce("move", moveHandler, 500));
document.body.addEventListener("mousewheel", debounce("wheel", wheelHandler, 700));

위 코드의 결과, 마우스를 빠르게 계속 움직이면 'mouse event 발생' 이라는 문구는 계속 뜨지만, 'mouse event 처리' 라는 문구는 마우스 움직임을 멈췄을 때 마지막 한 번만 뜬다.
setTimeout의 콜백 함수(즉, mouseHandler)가 실행되기 전에(마우스 이벤트가 발생하고 0.5초가 지나기 전에) 다른 마우스 이벤트가 또 발생해서 이전에 실행된 setTimeout 함수가 clearTimeout에 의해 취소되었기 때문이다.
참고로 여기서 클로저로 처리되는 변수에는 eventName, func, wait, timeoutId가 있다.

(4) 커링 함수

커링 함수란 여러 개의 인자를 받는 함수를 하나의 인자만 받는 함수로 나눠서 순차적으로 호출될 수 있게 체인 형태로 구성한 것을 말한다.

부분 적용 함수 vs 커링 함수

부분 적용 함수는 여러 개의 인자를 전달할 수 있지만, 커링 함수는 한 번에 하나의 인자만 전달한다.
부분 적용 함수는 실행 결과를 재실행할 때마다 원본 함수가 무조건 실행되지만, 커링 함수는 마지막 인자가 전달되기 전까지는 원본 함수가 실행되지 않는다.

var curry3 = function (func) {
  return function (a) {
    return function (b) {
      return func(a, b);
    };
  };
};

var getMaxWith10 = curry3(Math.max)(10);
console.log(getMaxWith10(8)); // 10
console.log(getMaxWith10(25)); // 25

// ES6
var curry3 = func => a => b => func(a, b);
// curry3은 func를 인자로 가지는 함수이다
// func를 인자로 가지는 함수는 a를 인자로 가지는 함수를 return 한다
// a를 인자로 가지는 함수는 b를 인자로 가지는 함수를 return 한다
// b를 인자로 가지는 함수는 func(a, b)를 실행한 값을 return 한다

각 단계에서 받은 인자들을 모두 마지막 단계에서 참조할 것이므로 가비지 컬렉팅되지 않고 메모리에 차곡차곡 쌓였다가, 마지막 호출로 실행 컨텍스트가 종료된 후에야 비로소 한꺼번에 가비지 컬렉팅 된다.

따라서, 함수를 원하는 시점까지 지연시켰다가 실행시킬 필요가 있는 경우 커링 함수를 사용할 수 있다.
혹은 함수의 매개변수가 항상 비슷하고 일부만 바뀌는 경우에도 커링 함수를 유용하게 사용할 수 있다.
특히 fetch 함수가 url을 받아 해당 url에 HTTP 요청을 할 때 주로 사용된다.

var getInformation = baseUrl => path => id => fetch(baseUrl + path + "/" + id);

var imageUrl = "http://imageAddress.com";
var getImage = getInformation(imageUrl); // baseUrl 넣음
var getEmoticon = getImage("emoticon"); // path 넣음
var emoticon = getEmoticon(100); // 실제 요청

🙋‍♀️ 질문

1. 클로저와 메모리 관리
   예제 코드가 이해가 안됨 (책 참고)

✨ 내일 할 것

1. 프로토타입