클로저 | 코어자바스크립트 5

dana·2022년 3월 24일

Javascript / algorithm

목록 보기

12/15

클로저의 의미 및 원리 이해

특징

여러 함수형 프로그래밍에서 등장하는 보편적인 특성

예시

outer의 실행 컨텍스트가 종료된 뒤엔 inner함수를 호출할 수 없음.
위의 코드는 inner함수의 결과값만 outer2에 저장

outer의 실행 컨텍스트가 종료됐음에도 그 안에 선언된 inner함수에 접근할 수 있음.
뿐만 아니라 outer의 변수를 사용할 수 있음.

inner함수의 실행 컨텍스트

environmentRecord : 수집할 정보 없음 (선언된 변수 없음)
outerEnvironmentReference : inner함수가 선언된 위치의 LexicalEnvironment가 참조복사됨 -> outer함수의 lexicalEnvironment가 저장됨.

inner함수의 실행 시점(let outer2=outer())에는 outer 함수는 이미 실행이 종료된 상태 -> 어떻게 접근 ?
== 가비지 컬렉터의 동작 방식 때문

가비지 컬렉터는 어떤 값을 참조하는 변수가 하나라도 있다면 그 값은 수집 대상에 포함시키지 않음.
함수의 실행 컨텍스트가 종료된 후에도 LexicalEnvironment가 가비지 컬렉터의 수집 대상에서 제외되는 경우는 지역변수를 참조하는 내부 함수가 외부로 전달된 경우가 유일

스펙상으로는 선언 당시의 LexicalEnvironment를 전부 GC하지 않도록 되어있으나, 2019 기준 크롬이나 Node.js 등에서 사용중인 v8엔진의 경우 내부 함수에서 실제로 사용하는 변수만 남겨두고 나머지는 GC하도록 최적화돼 있음.

따라서 클로저란,

어떤 함수에서 선언한 변수를 참조하는 내부함수에서만 발생하는 현상
외부 함수의 LexicalEnvironment가 가비지 컬렉팅되지 않는 현상

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

클로저와 메모리 관리

클로저는 실행 컨텍스트가 끝난 뒤에도 변수가 남아있는 현상
-> 저장 공간을 계속 차지하고 있음

필요성이 사라진 뒤에 메모리를 소모하지 않도록 식별자에 참조형이 아닌 기본형 데이터(null/ undefined)를 할당해 참조카운트를 0으로 만들어주면 좋음!

클로저의 메모리 해제 예제

return

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

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

setInterval

eventListener

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

클로저 활용 사례

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

1

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

fruits.forEach(function(fruit){
  let $li = document.createElement('li');
  $li.innerText = fruit;
  $li.addEventListener('click', function() {
    alert('this is '+fruit)
  })
  $ul.appendChild($li)
});
document.body.appendChild($ul)

2

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

let alertFruit = function(fruit){
  alert('this is ' + fruit)
}

fruits.forEach(function(fruit){
  let $li = document.createElement('li');
  $li.innerText = fruit;
  $li.addEventListener('click', alertFruit.bind(null, fruit));
  $ul.appendChild($li)
})
document.body.appendChild($ul)

addEventListener는 콜백 함수 호출 시 첫번째 인자에 '이벤트 객체'를 주입하기 때문에, bind메서드를 활용해 이 문제를 해결
다만 이 경우 다음의 문제가 있음

이벤트 객체가 인자로 넘어오는 순서가 바뀌는 점
함수 내부에서의 this가 원래와 달라지는 점

3

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

let alertFruit = function(fruit){
  return function () {
    alert('this is ' + fruit)
  }
}

fruits.forEach(function(fruit){
  let $li = document.createElement('li');
  $li.innerText = fruit;
  $li.addEventListener('click', alertFruit(fruit));
  $ul.appendChild($li)
})
document.body.appendChild($ul)