javascript 23강(클로저)

2019-10-24

Closer, Web, coding, develop, javascript

JavaScript 23강 예습

23강 : 클로저
- 렉시컬 스코프
함수 객체의 내부 슬롯 [[Environment]]
- 함수 코드 평가 순서
클로저와 렉시컬 환경
- 클로저의 활용
- 함수형 프로그래밍에서의 클로저
- 자주 발생하는 실수

23강

클로저

함수를 일급 객체로 취급하는 함수형 프로그래밍 언어(Functional Programming language: 하스켈(Haskell), 리스프(Lisp), 얼랭(Erlnag), 스칼라(Scala) …)에서 사용되는 중요한 특성이다.

ECMAScript 사양에서의 클로저 정의 ▿

클로저는 함수와 그 함수가 선언된 렉시컬 환경(Lexical environment)과의 조합이다.

###렉시컬 스코프

자바스크립트는 함수를 어디서 호출했는지가 아니라 어디에 정의했는지에 따라 상위 스코프를 결정한다.

스코프의 실체는 실행 컨텍스트의 렉시컬 환경(Lexical environment)이다.

이 렉시컬 환경은 자신의 “외부 렉시컬 환경에 대한 참조(Outer Lexical Environment Reference)”를 통해 상위 렉시컬 환경과 연결된다. ( = 스코프체인)

위부 렉시컬 환경 참조 예

“함수의 상위 스코프를 결정한다” = “렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 저장할 참조값을 결정한다”

함수 객체의 내부 슬롯 [[Environment]]

함수가 정의된 환경과 호출되는 환경은 다를 수 있다.

즉, 렉시컬 스코프가 가능하려면 함수는 자신이 호출되는 환경과는 상관없이 자신이 정의된 환경, 렉시컬 스코프를 기억해야한다.

함수는 자신의 내부 슬롯 [[Environment]]에 자신이 정의된 환경, 즉 렉시컬 스코프의 참조를 저장한다.

함수 정의가 평가되어 객체를 생성.
생성된 객체는 자신이 정의된 환경(위치)에 의해 결정된 상위 스코프의 참조를 자신의 내부 슬롯[[Environment]]에 저장.
저장된 상위 스코프의 참조는 현재 실행 중인 실행 컨텍스트의 렉시컬 환경을 가리킴.

*함수 객체의 내부 슬롯 [[Environment]]에 저장한 현재 실행 중인 실행 컨텍스트의 렉시컬 환경의 참조가 바로 상위 스코프이다. *

*또한 자신이 호출되었을 때 생성될 렉시컬 환경의 “외부 렉시컬 환경에 대한 참조”에 저장될 참조값이다. *

함수 객체는 내부 슬롯 [[Environment]]에 저장한 렉시컬 환경의 참조, 즉 상위 스코프를 자신이 존재하는 한 기억한다.

const x = 1;

function foo() {
  const x = 10;

  // 상위 스코프는 함수 정의 환경(위치)에 따라 결정된다.
  // 함수 호출 위치와 상위 스코프는 아무런 관계가 없다.
  bar();
}

// 함수 bar는 자신의 상위 스코프, 즉 전역 렉시컬 환경을 기억한다.
function bar() {
  console.log(x);
}

foo(); // 1
bar(); // 1

poiema-실행 컨텍스트

함수 코드 평가 순서

1. 함수 실행 컨텍스트 생성
2. 함수 렉시컬 환경 생성
  2.1. 함수 환경 레코드 생성
  2.2. 외부 렉시컬 환경에 대한 참조 할당
  2.3. this 바인딩

클로저와 렉시컬 환경

자신을 포함하고 있는 외부 함수(outer)보다 중첩 함수(inner)가 더 오래 유지되는 경우, 외부 함수(outer) 밖에서 중첩 함수(inner)를 호출하더라도 외부 함수(outer)의 지역 변수(outer의 x)에 접근할 수 있는데 이러한 함수를 클로저(closure)라고 부른다. (예제 기준 ▿)

const x = 1;

// ①
function outer() {
  const x = 10;
  const inner = function () { console.log(x); }; // ②
  return inner;
}

// 함수 outer를 호출하면 중첩 함수 inner를 반환한다.
// 그리고 함수 outer의 실행 컨텍스트는 실행 컨텍스트 스택에서 pop된다.
const innerFunc = outer(); // ③
innerFunc(); // ④ 10

예제로 돌아가 보자. 위 예제에서 outer 함수가 평가되어 함수 객체를 생성할 때(①) 현재 실행 중인 실행 컨텍스트의 렉시컬 환경, 즉 전역 렉시컬 환경을 outer 함수 객체의 [[Environment]] 내부 슬롯에 상위 스코프로서 저장한다.

전역 함수 객체의 상위 스코프 결정

outer 함수를 호출하면 outer 함수의 렉시컬 환경이 생성되고 앞서 outer 함수 객체의 [[Environment]] 내부 슬롯에 저장된 전역 렉시컬 환경을 outer 함수 렉시컬 환경의 “외부 렉시컬 환경에 대한 참조”에 할당한다.

그리고 중첩 함수 inner가 평가된다.(② inner 함수는 함수 표현식으로 정의하였기 때문에 런타임에 평가된다.) 이때 중첩 함수 inner은 자신의 [[Environment]] 내부 슬롯에 현재 실행 중인 실행 컨텍스트의 렉시컬 환경, 즉 outer 함수의 렉시컬 환경을 상위 스코프로서 저장한다.

중첩 함수 객체의 상위 스코프 결정

outer 함수의 실행이 종료하면 inner 함수를 반환하면서 outer 함수의 생명 주기는 종료한다.(③) 즉, outer 함수의 실행 컨텍스트가 실행 컨텍스트 스택에서 제거된다. 이때 outer 함수의 실행 컨텍스트는 실행 컨텍스트 스택에서 제거되지만 outer 함수의 렉시컬 환경까지 소멸하는 것은 아니다. outer 함수의 렉시컬 환경은 inner 함수의 [[Environment]] 내부 슬롯에 의해 참조되고 있으므로 가비지 켈렉션의 대상이 되지 않기 때문이다.

실행 컨텍스트가 제거되어도 렉시컬 환경은 유지된다.

outer 함수가 반환한 inner 함수를 호출(④)하면 inner 함수의 실행 컨텍스트가 생성되고 실행 컨텍스트 스택에 push된다. 그리고 렉시컬 환경의 외부 렉시컬 환경에 대한 참조에는 inner 함수 객체의 [[Environment]] 내부 슬롯에 저장되어 있는 참조값이 할당된다.

외부 함수가 소멸하여도 반환된 중첩 함수는 외부 함수의 변수를 참조할 수 있다.

중첩 함수 inner는 외부 함수 outer보다 더 오래 생존하였다. 이때 함수는 외부 함수의 생존 여부(실행 컨텍스트의 생존 여부)와 상관없이 자신이 정의된 위치에 의해 결정된 상위 스코프를 기억한다.

이처럼 중첩 함수 inner의 내부에서는 상위 스코프를 참조할 수 있으므로 상위 스코프의 식별자를 참조할 수 있고 식별자의 값을 변경할 수도 있다.

이론적으로 자바스크립트의 모든 함수는 상위 스코프를 기억하므로 모든 함수는 클로저이다. 하지만 일반적으로 모든 함수를 클로저라고 하지는 않는다.

클로저에 의해 참조되는 상위 스코프의 변수(위 예제의 경우, foo 함수의 변수 x)를 자유 변수(Free variable)라고 부른다. 클로저(closure)란 “함수가 자유 변수에 대해 닫혀있다(closed)”라는 의미이다. 이를 좀 더 알기 쉽게 의역하자면 “자유 변수와 묶여있는 함수”라고 할 수 있다.

클로저의 활용

클로저는 상태를 안전하게 유지하기 위해 사용한다. [은닉(Information hiding)]

이전 상태를 기억하다가 상태가 변경되면 최신 상태(state)를 유지

다음의 코드들의 문제를 살펴보면서 왜 클로저를 사용해야하는지 깨달아보자.

<!DOCTYPE html>
<html>
<body>
  <button class="increase">+</button>
  <span class="counter">0</span>

  <script>
    // 카운트 상태를 유지하기 위한 전역 변수
    let num = 0;

    const $counter = document.querySelector('.counter');

    const increase = function () {
      $counter.textContent = ++num; // 상태 변화
    };

    document.querySelector('.increase').onclick = increase;
  </script>
</body>
</html>

▵ 위 코드의 문제점 : 전역 변수 num의 값, 즉 카운트 상태는 반드시 이벤트 핸들러 increase만이 변경할 수 있어야 한다. 허나, num은 누구나 접근이 가능하고 변경이 가능하다. 따라서 의도치 않게 변경이 가능하다. 따라서 num을 increase안으로 넘는다면 num은 누구도 건들 수 없게된다.

▽ num을 넣은 후

<!DOCTYPE html>
<html>
<body>
  <button class="increase">+</button>
  <span class="counter">0</span>

  <script>
    const $counter = document.querySelector('.counter');

    const increase = function () {
      // 카운트 상태를 유지하기 위한 지역 변수
      let num = 0;
      $counter.textContent = ++num; // 상태 변경
    };

    document.querySelector('.increase').onclick = increase;
  </script>
</body>
</html>

▵ 위 코드의 문제점 : 위 코드에서 num은 오직 increase만 사용할 수 있게 되었다. 허나 increase가 호출 되면 num은 매번 0으로 초기화된다. 즉 num은 1을 넘을 수 없다. 따라서 increase함수를 즉시 실행함수로 변경시키고 상태 변경 문만 반환하면 어떻게 될까?

<!DOCTYPE html>
<html>
<body>
  <button class="increase">+</button>
  <span class="counter">0</span>

  <script>
    const $counter = document.querySelector('.counter');

    const increase = (function () {
      // 카운트 상태를 유지하기 위한 자유 변수
      let num = 0;

      return function () {
        $counter.textContent = ++num; // 상태 변경
      };
    }());

    document.querySelector('.increase').onclick = increase;
  </script>
</body>
</html>

▵ 위 코드는 정답 : 따라서 이 코드는 정답이 된다. 즉시 실행 함수로 설정을 해두었기에 누구도 num을 건드릴수 없다. 렉시컬환경상 오직 increase함수 내부에서 외부함수만으로 num값을 조작할 수 있게 되었다.

decrease함수도 만들어서 count를 구성한다.

<!DOCTYPE html>
<html>
<body>
  <button class="increase">+</button>
  <span class="counter">0</span>
  <button class="decrease">-</button>

  <script>
    const $counter = document.querySelector('.counter');

    const counter = (function () {
      // 카운트 상태를 유지하기 위한 자유 변수
      let num = 0;

      // 클로저를 메소드로 갖는 객체를 반환한다.
      // 객체 리터럴은 스코프를 만들지 않는다.
      // 따라서 아래 메소드들의 상위 스코프는 즉시 실행 함수의 스코프이다.
      return {
        // num: 0, // 프로퍼티는 public이므로 정보 은닉이 되지 않는다.
        increase() {
          $counter.textContent = ++num; // 상태 변경
        },
        decrease() {
          if (num <= 0) return;  //num이 0보다 작으면 그냥 리턴
          $counter.textContent = --num; // 상태 변경
        }
      };
    }());

    document.querySelector('.increase').onclick = counter.increase;
    document.querySelector('.decrease').onclick = counter.decrease;
  </script>
</body>
</html>

위 예제에서 즉시 실행 함수가 반환하는 객체 리터럴은 함수 실행 단계에서 평가되어 객체가 된다. 이때 객체의 메소드인 함수도 함수 객체로 생성된다. 객체 리터럴의 중괄호는 코드 블록이 아니므로 별도의 스코프를 생성하지 않는다.

▵ 위 코드의 문제점 : 위 코드에서 클로저를 통하여 num을 보호하기에 충분하다. 하지만 반환되는 메소드가 정해져있기 때문에 만약 생성자를 수백개 만든다고 모든 생성자 내부에는 increase decrease메소드가 담기게 될 것이다. 따라서 이와같은 현상을 방지 하기 위해서 prototype을 이용하도록 한다.

<!DOCTYPE html>
<html>
<body>
  <button class="increase">+</button>
  <span class="counter">0</span>
  <button class="decrease">-</button>

  <script>
    const $counter = document.querySelector('.counter');

    const Counter = (function () {
      // ① 카운트 상태를 유지하기 위한 자유 변수
      let num = 0;

      function Counter() {
        // this.num = 0; // ② 프로퍼티는 public이므로 정보 은닉이 되지 않는다.
      }

      Counter.prototype.increase = function () {
        $counter.textContent = ++num;
      };

      Counter.prototype.decrease = function () {
        if (num <= 0) return;
        $counter.textContent = --num;
      };

      return Counter;
    }());

    const counter = new Counter();

    document.querySelector('.increase').onclick = counter.increase;
    document.querySelector('.decrease').onclick = counter.decrease;
  </script>
</body>
</html>

위 예제의 num(①)은 생성자 함수 Counter가 생성할 인스턴스의 프로퍼티가 아니라 즉시 실행 함수 내에서 선언된 변수다. 만약 num이 생성자 함수 Counter가 생성할 인스턴스의 프로퍼티라면(②) 인스턴스를 통해 외부에서 접근이 가능한 public 프로퍼티가 된다. 하지만 즉시 실행 함수 내에서 선언된 변수 num은 인스턴스를 통해 접근할 수 없으며 즉시 실행 함수 외부에서도 접근할 수 없는 은닉된 변수이다.

생성자 함수 Counter는 increase, decrease 메소드를 프로토타입을 통해 상속받는 인스턴스를 생성한다. 이 메소드들은 모두 자신의 함수 정의가 평가되어 함수 객체가 될 때, 실행 중인 실행 컨텍스트, 즉 즉시 실행 함수 실행 컨텍스트의 렉시컬 환경을 기억하는 클로저이다. 따라서 프로토타입을 통해 상속되는 프로토타입 메소드일지라도 즉시 실행 함수의 자유 변수 num을 참조할 수 있다. 다시 말해, 변수 num의 값은 increase, decrease 메소드만이 변경할 수 있다. 이러한 클로저의 특징을 사용해 클래스 기반 언어의 private 키워드를 흉내낼 수 있다.

변수 값은 누군가에 의해 언제든지 변경될 수 있어 오류 발생의 근본적 원인이 될 수 있다. 상태 변경이나 가변(mutable) 데이터를 피하고 불변성(Immutability)을 지향하는 함수형 프로그래밍에서 부수 효과(Side effect)를 최대한 억제하여 오류를 피하고 프로그램의 안정성을 높이기 위해 클로저는 적극적으로 사용된다.

함수형 프로그래밍에서의 클로저

// 함수를 인자로 전달받고 함수를 반환하는 고차 함수
// 이 함수가 반환하는 함수는 클로저로서 카운트 상태를 유지하기 위한 자유 변수 counter을 기억한다.
function makeCounter(predicate) {
  // 카운트 상태를 유지하기 위한 자유 변수
  let counter = 0;

  // 클로저를 반환
  return function () {
    // 인자로 전달 받은 보조 함수에 상태 변경을 위임한다.
    counter = predicate(counter);
    return counter;
  };
}

// 보조 함수
function increase(n) {
  return ++n;
}

// 보조 함수
function decrease(n) {
  return --n;
}

// 함수로 함수를 생성한다.
// makeCounter 함수는 보조 함수를 인자로 전달받아 함수를 반환한다
const increaser = makeCounter(increase); // ①
console.log(increaser()); // 1
console.log(increaser()); // 2

// increaser 함수와는 별개의 독립된 렉시컬 환경을 갖기 때문에 카운터 상태가 연동하지 않는다.
const decreaser = makeCounter(decrease); // ②
console.log(decreaser()); // -1
console.log(decreaser()); // -2

▵ 위 코드의 문제점 : 함수 makeCounter를 호출해 함수를 반환할 때 반환된 함수는 자신만의 독립된 렉시컬 환경을 갖는다. 위 예제에서는 총 2번의 makeCounter를 호출 했으므로 반환된 함수가 2개이고 또한 각 독립된 렉시컬 환경을 갖게된다. 즉, 변수 increaser와 변수 decreaser에 할당된 함수는 각각 자신만의 독립된 렉시컬 환경을 갖기 때문에 카운트를 유지하기 위한 자유 변수 counter를 공유하지 않아 카운터의 증감이 연동하지 않는다. 따라서 독립된 카운터가 아니라 연동하여 증감이 가능한 카운터를 만들려면 렉시컬 환경을 공유하는 클로저를 만들어야 한다. 이를 위해서는 makeCounter 함수를 두번 호출하지 말아야 한다.

// 함수를 반환하는 고차 함수
// 이 함수가 반환하는 함수는 클로저로서 카운트 상태를 유지하기 위한 자유 변수 counter을 기억한다.
function makeCounter() {
  // 카운트 상태를 유지하기 위한 자유 변수
  let counter = 0;

  // 클로저를 반환
  return function (predicate) {
    // 인자로 전달 받은 보조 함수에 상태 변경을 위임한다.
    counter = predicate(counter);
    return counter;
  };
}

// 보조 함수
function increase(n) {
  return ++n;
}

// 보조 함수
function decrease(n) {
  return --n;
}

// 함수로 함수를 생성한다.
// makeCounter 함수는 보조 함수를 인자로 전달받아 함수를 반환한다
const counter = makeCounter(); // ①

// 보조 함수를 전달하여 호출
console.log(counter(increase)); // 1
console.log(counter(increase)); // 2

// 자유 변수를 공유한다.
console.log(counter(decrease)); // 1
console.log(counter(decrease)); // 0

자주 발생하는 실수

var arr = [];

for (var i = 0; i < 5; i++) {
  arr[i] = function () { // ①
    return i;
  };
}

for (var j = 0; j < arr.length; j++) {
  console.log(arr[j]()); // ②
}

▵ 위 코드의 문제점 : ②에서 결과가 0, 1, 2, 3, 4를 출력할 거 라고 생각했다면 완전히 틀렸다. 정답은 5만 5번출력한다. 이유는 ①에서 코드가 멈춘것이나 다름이없다. ②에서 arr을 호출 했을 떄, return으로 순회를 다 돌고 5가 되버린 i를 리턴하는 것이다.

따라서 다음과 같이 즉시 실행 함수를 감싸서 사용한다.

var arr = [];

for (var i = 0; i < 5; i++) {
  arr[i] = (function (id) { // ①
    return function(){
      return id;
    };
  }(i));
}

for (var j = 0; j < arr.length; j++) {
  console.log(arr[j]()); // ②
}

①에서 즉시 실행 함수는 전역 변수 i에 현재 할당되어 있는 값을 인수로 전달받아 매개 변수 id에 할당한 후 중첩 함수를 반환하고 종료된다. 즉시 실행 함수가 반환한 함수는 배열 funcs에 순차적으로 저장된다.

이때 즉시 실행 함수의 매개 변수 id는 즉시 실행 함수가 반환한 함수의 상위 스코프에 존재하며 즉시 실행 함수가 반환한 함수에 의해 참조되므로 자유 변수가 되어 즉시 실행 함수가 반환한 함수에 의해 그 값이 유지된다.

위 예제는 var키워들 사용했기에 일어나는 번거로움이다. 따라서 ES6의 let키워드를 사용하면 이러한 문제를 해결할 수있다.

const arr = [];

for (let i = 0; i < 3; i++) {
  arr[i] = () => i;
}

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]()); // 0 1 2
}

초기화 문에서 let 키워드로 선언한 변수를 사용하면 for 문이 반복될 때마다 for 문 코드 블록의 새로운 렉시컬 환경이 생성된다.

만약 for 문 내에서 정의된 함수가 있다면 이 함수의 상위 스코프는 for 문이 반복될 때마다 생성된 for 문 코드 블록의 새로운 렉시컬 환경이다.

함수의 상위 스코프는 for 문이 반복될 때 마다 식별자(초기화 변수 및 for 문 내 지역 변수 등)의 값을 유지해야 한다. 이를 위해 for 문이 반복될 때마다 독립적인 렉시컬 환경을 생성하여 식별자의 값을 유지한다.

① 초기화 문에 let 키워드로 선언한 변수를 사용한 for 문이 평가되면 먼저 새로운 렉시컬 환경(LOOP Lexical Environment)을 생성하고 초기화 문의 식별자와 값을 등록한다. 그리고 새롭게 생성된 렉시컬 환경을 현재 실행 중인 실행 컨텍스트의 렉시컬 환경으로 교체한다.

②, ③, ④ for 문의 반복이 시작되면 새로운 렉시컬 환경(PER-ITERATION Lexical Environment)을 생성하고 반복 시의 for 문 코드 블록 내의 식별자와 값(증감문 반영 이전)을 등록한다. 그리고 새롭게 생성된 렉시컬 환경을 현재 실행 중인 실행 컨텍스트의 렉시컬 환경으로 교체한다.

⑤ for 문의 반복이 모두 종료되면 for 문이 실행되기 이전의 렉시컬 환경을 실행 중인 실행 컨텍스트의 렉시컬 환경으로 되돌린다.

이처럼 var 키워드로 사용하지 않은 ES6의 반복문(for…in 문, for…of 문, while 문 등)은 반복할 때마다 새로운 렉시컬을 생성하여 반복할 당시의 상태를 마치 스냅샷을 찍는 것처럼 저장한다. 단, 이는 반복문 내부에서 함수 정의가 존재할 때 의미가 있다. 반복문 내부에 함수 정의가 없는 반복문이 생성하는 새로운 렉시컬은 반복 직후, 아무도 참조하지 않기 때문에 가비지 컬렉션의 대상이 된다.

함수형 프로그래밍 기법인 고차 함수를 사용하는 방법

const arr = new Array(5).fill();

arr.forEach((v, i, self) => self[i] = () => i);

arr.forEach(f => console.log(f()));

HYEOK999's Daily Develop

TILJavascript-Preview