[코어 자바스크립트] 5장 클로저

5-1 클로저의 의미 및 원리 이해

클로저란 어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달(return, 콜백)할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상

outer의 실행 컨텍스트가 종료된 후에도 inner 함수를 호출할 수 있게 만들기

let outer = function() {
  let a = 1;
  let inner = function() {
    return ++a;
  };
  return inner; // inner 함수 자체를 반환
};

let outer2 = outer();

console.log(outer2()); // 2
console.log(outer2()); // 3

inner 함수 실행 시점에 outer 함수는 이미 실행이 종료된 상태인데 outer 함수의 LexicalEnvironment에 접근할 수 있는 이유는 가비지 컬렉터는 어떤 값을 참조하는 변수가 하나라도 있다면 그 값은 수집대상에 포함시키지 않기 때문이다.

5-2 클로저와 메모리 관리

클로저는 어떤 필요에 의해 의도적으로 함수의 지역변수의 참조 카운트가 0이 되지 않도록 하여 메모리를 소모하도록 한다. 식별자의 필요성이 사라진 시점에는 식별자에 참조형이 아닌 기본형 데이터(null,undefined)를 할당하여 참조 카운트를 0으로 만든다.

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

console.log(outer()); // 2
console.log(outer()); // 3
outer = null; // outer 식별자의 inner 함수 참조를 끊음

5-3 클로저 활용 사례

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

콜백 함수 중 하나인 이벤트 리스너

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

let alertFruitBuilder = function(fruit) {
  return function() {
    // alertFruitBuilder로 넘어오는
    // fruit라는 외부 변수 참조 (클로저)
    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);
});

document.body.appendChild($ul);

• 고차함수 : 함수를 인자로 받거나 함수를 리턴하는 함수

5-3-2 접근 권한 제어(은닉)

클로저를 이용하면 함수 차원에서 public한 값과 private한 값을 구분한다. 클로저를 활용하면 외부 스코프에서 함수 내부의 변수들 중 선택적으로 일부의 변수에 대한 접근 권한을 부여할 수 있다.
외부에 제공하고자 하는 정보들을 모아서 return하고,, 내부에서만 사용할 정보들은 return하지 않는 것으로 접근 권한을 제어한다.

5-3-3 부분 적용 함수

부분 적용 함수 : n개의 인자를 받는 함수에 미리 m개의 인자만 넘겨 기억시켰다가, 나중에 (n-m)개의 인자를 넘기면 함수의 실행 결과를 얻을 수 있게 하는 함수
미리 일부 인자를 넘겨두어 기억하게끔 하고 추후 필요한 시점에 기억했던 인자들까지 함께 실행하게 한다는 개념
-> 디바운스(debounce) : 짧은 시간 동안 동일한 이벤트가 많이 발생할 경우 이를 전부 처리하지 않고 처음 또는 마지막에 발생한 이벤트에 대해 한 번만 처리, 성능 최적화 ex. scroll, mousemove, resize

5-3-4 커링 함수

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

let curry5 = func => a => b => c => func(a,b,c); 

-> 마지막 인자가 넘어갈 때까지 함수 실행을 미루기 때문에 지연실행시 유용하다.