Core Javascript - 5 Closure

5 Closure

5.1 클로저의 원리 및 이해

• MDN 에서는 클로저는 "함수와 그 함수가 선언될 당시의 lexical environment의 상호관계(combination)에 따른 현상 이라고 표현하고있다. 
• '선언될 당시의 lexical environment는 실행 컨텍스트중 하나인 outerEnvironmentReference에 해당한다.
  • lexicalEnvironment의 environmentRecord와 outerEnvironmentReference에 의해 변수의 유효범위인 스코프가 결정되고 스코프 체인이 가능해진다고 이미 설명한 바 있다.
• 위에서 의미하는 combination이란, 내부함수에서 외부변수를 참조하는 경우에 한해서만 combination, 즉 '선언될 당시의 LexicalEnvironment와의 상호관계' 이다.

 

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

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

• 위의 예제를 살펴보면, outer 내부의 inner function이 outer의 a식별자를 참조하고있다. 그러나 특별한 현상은 안보인다.
• 그러나 outer 함수의 실행컨텍스트가 종료된 시점에서는 a변수를 참조하는 대상이 없어진다.
• a, (inner 변수의 값)들은 언젠가 가비지컬렉터에 의해 소멸될 것이다.
• 만약 outer의 실행 컨텍스트가 종료된 후에도 inner 함수를 호출할 수 있게 만들면 어떻게 될까??

 

 

var outer = function () {
  var a = 1;
  var inner = function() {
    return ++a;
  }
  return inner;   // ** 함수의 실행결과가 아닌 함수의 주소 자체를 리턴
}

var outer2 = outer();
console.log(outer2());  // 2
console.log(outer2());  // 3

• inner 함수의 실행 결과가 아니라 inner 함수 자체를 반환했다.
• 결과 또한, a가 2,3 이전 값을 기억 했다.
• inner 함수의 실행 시점에는 outer 함수는 이미 실행종료된 상태인데, outer 함수의 LexicalEnvironment에 어떻게 접근할 수 있을까?
• 잘 알다시피, 가비지 컬렉터는 어떤 값을 참조하는 변수가 하나라도 있다면 그값은 수집대사엥 포함시키지 않는다.
• inner 함수의 실행 컨텍스트가 활성화되면 outerEnvironmnetReference가 outer 함수의 LexicalEnvironment를 필요로 할 것이므로 수집대상에서 제외된다.

[120page 그림]

(설명: 원래는 LexicalEnvironment 전부를 gc하지 않았으나, 2019년 기준으로 v8엔진에서는 내부함수에서 사용하는 변수만 남겨두고 나머지는 gc)

• 즉 "어떤함수에서 선언한 변수를 참조하는 내부함수에서만 발생하는 현상" 이란 "외부함수의 LexicalEnvironment가  가비지컬렉팅 되지 않는 현상" 을말하는 것이다.
• 이를 정리하자면 클로저란 어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우 A의 실행컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상이다.

 

다른책에서는 Clousre를 이렇게 표현하는데 그 중 가장 이해하기 쉬운걸 소개함

- 함수를 선언할 때 만들어지는 유효범위가 사라진 후에도 호출할 수 있는 함수 - 존레식, <자바스크립트 닌자 비급>
- 이미 생명 주기가 끝난 외부 함수의 변수를 참조하는 함수 - 송형주 고현준, <인사이드 자바스크립트>
- 자신이 생성될 때의 스코프에서 알 수 있었던 변수들 중 언젠가 자신이 실행 될 때 사용할 변수들만을 기억하여유지시키는 함수 - 유인동 <함수형 자바스크립트 프로그래밍>

• 주의할점은 '외부로 전달' 이 곧 retunr 만을 의미하는 것은 아니다.

 

- return 없이도 클로저가 발생하는 경우

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

(function () {
  var count = 0;
  var button = document.createElement('button');
  button.innerText = 'click';
  button.addEventListenr('click', function() {
    console.log(++count, 'time clicked');
  });
  
  document.body.appendChild(bttuon);
}) ();

• 함수내부에서 지역변수를 참조하고 있다. 두상황 모두 지역변수를 참조하는 내부함수를 외부에 전달했기 때문에 클로저 이다.

 

5.2 클로저와 메모리 관리

• 클로저는 매우 중요한 개녀이나, 일부는 메모리 누수의 위험을 이유로 클로저 사용을 지양해야 한다고 한다.
• '메모리 누수' 라는 표현은 개발자의 의도와 달리 어떤값의 참조 카운트가 0이 되지않아 GC의 수거대상이 되지 않는 경우 이다.
• 적절한 사용과 적절한 클로저의 메모리 해제만 있으면 괜찮다.
• 참조카운트를 0으로 만들면 GC의 수거대상이된다. 식별자에 참조형이 아닌 기본형 데이터 (보통 null이나 undefined)를 할당 하면 된다.

var outer = function () {
  var a = 1;
  var inner = function() {
    return ++a;
  }
  return inner;   // ** 함수의 실행결과가 아닌 함수의 주소 자체를 리턴
}

var outer2 = outer();
console.log(outer2());  // 2
console.log(outer2());  // 3

outer2 = null;             //outer 식별자의 inner 함수 참조를 끊음

(function () {
  var a = 0;
  var intervalId =  null;
  var inner = function() {
    if(++a >= 10) {
      clearInterval(intervalId);
      inner = null;                       //inner 식별자에대하여 참조를 끊음 
    }
    console.log(a);
  };
  intervalId = setInterval(inner, 1000);
}) ();

(function () {
  var count = 0;
  var button = document.createElement('button');
  button.innerText = 'click';
  button.addEventListenr('click', function() {
    console.log(++count, 'time clicked');
    if(count >= 10) {
      button.removeEnventListner('click', clickHandler);
      clickHandler = null; // clickHandler 식별자의 함수 참조를 끊음.
    } 
  });
  
  
  document.body.appendChild(bttuon);
}) ();

 

 

5.3 클로저 활용 사례

5.3.1 콜백함수 내부에서 외부 데이터를 얻고자 할때.

5.3.2 정보은닉

 

5.3.3 부분적용함수

 - debounce

• 기본적인 예제는 인터넷에서도 많으니 실무에서 활용할 수 있는예제 디바운스만 정리해보았다.
• 디바운스는 짧은 시간동안 동일한 이벤트가 많이 발생할경우, 이를 전부처리 하지않고, 처음 또는 마지막 발생한 이벤트에 대해 한번만 처리하는 것이다. (Front-End performance 개선에 많은 도움이 된다)
• scroll, wheel, mousemove,resize 그리고 최근에 검색어 자동완성 등에서 사용한 경험이있다.

 

var debounce = function (eventName, func, wait) {
  var timerId = null;
  return function (event) {
    var self = this;
    console.log(eventName, ' event 발생';
    clearTimeout(timerId);
    timerId = setTimeout(func.bind(self, event), wait);
  };
};

var moveHandler = function(e) {
  console.log('move event 처리');
}

documnet.body.addEventListener('mousemove', debounce('move',moveHandler, 500));

 

 

5.3.4 커링 함수

• 커링 함수 (currying function)란 여러개의 인자를 받는 함수를 하나의 인자만 받는 함수로 나눠서 순차적으로 호출될 수 있게 체인형태로 구성한 것을 말한다 (흡사 build pattern과 비슷하지만, function 으로 사용되니 좀다르긴 한듯)
• 커링은 하나의 한개의 인자만 전달하는 것을 원칙으로 한다.

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

var getMaxWith10 = curry3(Math.max)(10);

consoel.log(getMaxWith10(3));  // 3
console.log(getMaxWith10(20)); // 20

• 위처럼 일부 매개변수는 고정되고, 가변적인 parameter를 넘겨줄때 사용된다.
• 프로젝트 내부에서 자주 쓰이는 함수의 매개변수가 항상 비슷하고, 일부만 바뀌는 경우에 대해 이를 적용하면 유용하다.

 

var getHttpRequest = function (baseUrl) { 
  return function (path) {
    return function (id) {
      return fetch(baseUrl + path + '/' + id); 
    }
  }
}


//es6로 만들면 가독성이 훨씬 높아진다.
var getHttpRequest = baseUrl => path => id => fetch(baseUrl + path + '/' + id);

• getHttpRequest라는 공통함수를 만들었다. 이를 기반으로 아래와 같이 코드 중복을 제거할 수있다.

var userInfoUrl = 'http://localhost:1234/';
var fileUrl = 'http://localhost:8574/';

// 유저 직군별 request 준비
var getUserInfo = getHttpRequest(userInfoUrl);   // http://localhost:1234/
var getDeveloperInfo = getUserInfo('developer'); // http://localhost:1234/developer
var getTaInfo = getUserInfo('ta');               // http://localhost:1234/ta

// file 종류별 request 준비
var getFileInfo = getHttpRequest(fileUrl);   // http://localhost:1234/
var getZipInfo = getUserInfo('zip');         // http://localhost:1234/zip
var getImageInfo = getUserInfo('image');     // http://localhost:1234/image


// 실제 get request
var zipfile = getZipInfo(123);    // http://localhost:1234/zip/123
var zipfile2 = getZipInfo(456);   // http://localhost:1234/zip/456

var image = getImageInfo('navi'); // http://localhost:1234/zip/navi
var image2 = getImageInfo('dog'); // http://localhost:1234/zip/dog


// ..... ommitted

 

• 특히 이런이유로 커링이 광범위 하게 사용되는데, Redux middleware에서도 사용된다.

// Redux middleware 'Logger'
const logger = store => next => action => {
  console.log('dispatching', action);
  console.log('next state', store.getState());
  return next(action);
}


// Redux Middleware 'thunk'
const thunk = store => next => action => {
  return typeof action === 'function'
    ? action(dispatch, store.getState)
    : next(action);
}

• 두 미들웨어는 공통적으로 store, next, action 순서로 인자를 받는다.
• store는 한번만 생성되고 바뀌지 않고, dispatch의 의미를 가지는 next도 마찬가지지만, action은 매 요청마다 달라진다.
• 그러므로 store, next 값이 결정되면 redux 내부에서 logger 또는 thunk에 store,next를 미리 넘겨서 반환된 함수를 저장시켜놓고, 이후에는 action만 받아서 처리할 수 있게끔 한 것이다.

5.4 정리

• 클로저란 어떤 함수에서 선언한 변수를 참조하는 내부함수를 외부로 전달할 경우, 함수의 실행 컨텍스트가 종료된 후에도 해당 변수가 사라지지 않는 현상이다.
• 내부함수를 외부로 전달하는 방법에는 함수를 return하는 경우뿐 아니라 콜백으로 전달하는 경우도 포함된다.
• 클로저는 그 본질이 메모리를 계속 차지하는 개념ㄴ이므로 더는 사용하지 않게 된 클로저에 대해서는 메모리를 차지하지 도록 관리해줄 필요가 있다.