모던 JS deep dive 2회차 챕터 24 클로저

26 Feb 2024

모던 JS deep dive 2회차

모던 JS deep dive 2회차
- 24. 클로저

24. 클로저

클로저는 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성.

MDN에서 정의하는 클로저 :
“클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.”

24.1 렉시컬 스코프

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

렉시컬 환경의 “외부 렉시컬 환경에 대한 참조”에 저장할 참조값, 즉 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정

=> 렉시컬 스코프(정적 스코프)

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

함수가 정의된 환경(위치)과 호출되는 환경(위치)은 다를 수 있음. 함수가 호출되는 환경에 관계 없이 자신이 정의된 환경, 상위 스코프(함수 정의가 위치하는 스코프가 바로 상위 스코프)를 기억해야 한다. 이를 위해 함수는 자신의 내부 슬롯([[Environment]])에 자신이 정의된 환경, 상위 스코프의 참조를 저장.

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

24.3 클로저와 렉시컬 환경

외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있음. 이러한 중첩 함수를 클로저라고 부름.

outer 함수의 실행 컨텍스트가 실행 컨텍스트 스택에서 제거되지만 outer 함수의 렉시컬 환경까지 소멸하는 것은 아님.

가비지 컬렉터는 누군가가 참조하고 있는 메모리 공간을 함부로 해제하지 않음.

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

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

<!DOCTYPE html>
<html>
  <body>
    <script>
      function foo() {
        const x = 1;
        const y = 2;

        // 일반적으로 클로저라고 하지 않는다.
        function bar() {
          const z = 3;

          debugger;
          // 상위 스코프의 식별자를 참조하지 않는다.
          console.log(z);
        }

        return bar;
      }

      const bar = foo();
      bar();
    </script>
  </body>
</html>

중첩 함수 bar는 외부 함수 foo보다 더 오래 유지되지만 상위 스코프의 어떤 식별자도 참조하지 않음. 대부분 모던 브라우저는 최적화로 상위 스코프를 기억하지 않음. 참조하지도 않는 식별자를 기억하는 것은 메모리 낭비이기 때문
=> bar 함수는 클로저라고 할 수 없음

<!DOCTYPE html>
<html>
  <body>
    <script>
      function foo() {
        const x = 1;

        // 일반적으로 클로저라고 하지 않는다.
        // bar 함수는 클로저였지만 곧바로 소멸한다.
        function bar() {
          debugger;
          // 상위 스코프의 식별자를 참조한다.
          console.log(x);
        }
        bar();
      }

      foo();
    </script>
  </body>
</html>

중첩 함수 bar는 상위 스코프의 식별자를 참조하기 때문에 클로저. 그러나 외부 함수 foo의 외부로 중첩 함수 bar가 반환되지 않음 => 외부 함수 foo보다 중첩 함수 bar의 생명 주기가 짧음.
=> 중첩 함수 bar는 클로저였지만 외부 함수보다 일찍 소멸되기 때문에 생명 주기가 종료된 외부 함수의 식별자를 참조할 수 있다는 클로저의 본질에 부합하지 않음.
=> 중첩 함수 bar는 일반적으로 클로저라고 하지 않음

<!DOCTYPE html>
<html>
  <body>
    <script>
      function foo() {
        const x = 1;
        const y = 2;

        // 클로저
        // 중첩 함수 bar는 외부 함수보다 더 오래 유지되며 상위 스코프의 식별자를 참조한다.
        function bar() {
          debugger;
          console.log(x);
        }
        return bar;
      }

      const bar = foo();
      bar();
    </script>
  </body>
</html>

중첩 함수 bar
- 상위 스코프의 식별자를 참조하고 있다.
- 외부 함수보다 더 오래 유지된다.
=> 클로저

클로저는 중첩 함수가 상위 스코프의 식별자를 참조하고 있고 중첩 함수가 외부 함수보다 더 오래 유지되는 경우에 한정하는 것이 일반적.

자유 변수(free variable) : 클로저에 의해 참조되는 상위 스코프의 변수

클로저(closure)란 함수가 자유 변수에 대해 닫혀있다(closed)라는 의미.
=> “자유 변수에 묶여 있는 함수”

클로저의 메모리 점유는 필요한 것을 기억하기 위한 것이므로 걱정할 필요 없음. 클로저는 자바스크립트의 강력한 기능으로, 필요하다면 적극 활용해야 함.

24.4 클로저의 활용

클로저는 상태(state)를 안전하게 변경하고 유지하기 위해 사용. 상태가 의도치 않게 변경되지 않도록 상태를 안전하게 은닉(information hiding)하고 특정 함수에게만 상태 변경을 허용하기 위해 사용.

const counter = (function () {
  // 카운트 상태 변수
  let num = 0;

  // 클로저인 메서드를 갖는 객체를 반환한다.
  // 객체 리터럴은 스코프를 만들지 않는다.
  // 따라서 아래 메서드들의 상위 스코프는 즉시 실행 함수의 렉시컬 환경이다.
  return {
    // num: 0, // 프로퍼티는 public하므로 은닉되지 않는다.
    increase() {
      return ++num;
    },
    decrease() {
      return num > 0 ? --num : 0;
    },
  };
})();

console.log(counter.increase()); // 1
console.log(counter.increase()); // 2

console.log(counter.decrease()); // 1
console.log(counter.decrease()); // 0

위 코드가 바르게 동작하기 위해 지켜져야 하는 조건
카운트 상태 (num 변수의 값)은 increase 함수가 호출되기 전까지 변경되지 않고 유지되어야 함.
카운트 상태 (num 변수의 값)은 increase 함수만이 변경할 수 있어야 함.

=> 하지만 카운트 상태는 전역 변수 이기 때문에 누구나 접근, 변경 가능하므로, 의도치 않게 상태가 변경될 수 있음

// 카운트 상태 변경 함수
const increase = function () {
  // 카운트 상태 변수
  let num = 0;

  // 카운트 상태를 1만큼 증가 시킨다.
  return ++num;
};

// 이전 상태를 유지하지 못한다.
console.log(increase()); // 1
console.log(increase()); // 1
console.log(increase()); // 1

위 예제에서는 전역 변수 num을 increase 함수의 지역 변수로 바꾸어 의도치 않은 상태 변경을 방지. num변수의 상태는 increase 함수만이 변경할 수 있음.

console.log 의 결과는 모두 1.
=> increase 함수가 호출될 때마다 지역 변수 num이 다시 선언, 0으로 초기화되기 때문. 이전 상태를 유지하지 못함.

// 카운트 상태 변경 함수
const increase = (function () {
  // 카운트 상태 변수
  let num = 0;

  // 클로저
  return function () {
    // 카운트 상태를 1만큼 증가 시킨다.
    return ++num;
  };
})();

console.log(increase()); // 1
console.log(increase()); // 2
console.log(increase()); // 3

=> 이전 상태를 유지할 수 있도록 클로저를 사용. 즉시 실행 함수가 반환한 클로저는 카운트 상태를 유지하기 위한 자유 변수 num 을 언제 어디서 호출하든지 참조하고 변경 가능.

=> 클로저는 상태 state 가 의도치 않게 변경되지 않도록 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하여 상태를 안전하게 유지하기 위해 사용

const counter = (function () {
  // 카운트 상태 변수
  let num = 0;

  // 클로저인 메서드를 갖는 객체를 반환한다.
  // 객체 리터럴은 스코프를 만들지 않는다.
  // 따라서 아래 메서드들의 상위 스코프는 즉시 실행 함수의 렉시컬 환경이다.
  return {
    // num: 0, // 프로퍼티는 public하므로 은닉되지 않는다.
    increase() {
      return ++num;
    },
    decrease() {
      return num > 0 ? --num : 0;
    },
  };
})();

console.log(counter.increase()); // 1
console.log(counter.increase()); // 2

console.log(counter.decrease()); // 1
console.log(counter.decrease()); // 0

=> 카운트 상태를 감소시킬 수 있도록 발전시킨 코드.

increase, decrease 메서드들의 상위 스코프는 즉시 실행 함수의 렉시컬 환경. increase, decrease 메서드가 언제 어디서 호출되든 상관없이 increase, decrease 함수는 즉시 실행 함수의 스코프의 식별자를 참조 가능.

24.5 캡슐화와 정보 은닉

캡슐화(encapsulation)은 객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 동작인 메서드를 하나로 묶는 것.

정보 은닉(information hiding)은 객체의 특정 프로퍼티나 메서드를 감추는 것.

정보 은닉은
외부에 공개할 필요가 없는 구현의 일부를 외부에 공개되지 않도록 감추어 적절치 못한 접근으로부터 객체의 상태가 변경되는 것을 방지해 정보를 보호.
객체 간의 상호 의존성, 즉 결합도(coupling)를 낮춤.

대부분의 객체지향 프로그래밍 언어는 클래스를 정의하고 클래스를 구성하는 멤버(프로퍼티와 메서드)에 대해여 public, private, protected 같은 접근 제한자(access modifier)를 선언하여 공개 범위 한정 가능.

자바스크립트는 접근 제한자 제공하지 않음. 모든 프로퍼티와 메서드는 기본적으로 외부 공개되어 있음.

function Person(name, age) {
  this.name = name; // public
  let _age = age; // private

  // 인스턴스 메서드
  this.sayHi = function () {
    console.log(`Hi! My name is ${this.name}. I am ${_age}.`);
  };
}

const me = new Person("Lee", 20);
me.sayHi(); // Hi! My name is Lee. I am 20.
console.log(me.name); // Lee
console.log(me._age); // undefined

const you = new Person("Kim", 30);
you.sayHi(); // Hi! My name is Kim. I am 30.
console.log(you.name); // Kim
console.log(you._age); // undefined

name 프로퍼티는 외부로 공개되어 있어서 자유롭게 참조 변경 가능. public한 것.

_age 변수는 Person 생성자 함수의 지역 변수이므로 Person 생성자 함수 외부에서 참조, 변경 불가. private한 것.

function Person(name, age) {
  this.name = name; // public
  let _age = age; // private
}

// 프로토타입 메서드
Person.prototype.sayHi = function () {
  // Person 생성자 함수의 지역 변수 _age를 참조할 수 없다
  console.log(`Hi! My name is ${this.name}. I am ${_age}.`);
};

=> sayHi 메서드를 프로토타입 메서드로 변경하여 sayHi 메서드의 중복 생성을 방지한 코드. Person.prototype.sayHi 메서드 내에서 Person 생성자 함수의 지역 변수 _age를 참조할 수 없는 문제 발생.

const Person = (function () {
  let _age = 0; // private

  // 생성자 함수
  function Person(name, age) {
    this.name = name; // public
    _age = age;
  }

  // 프로토타입 메서드
  Person.prototype.sayHi = function () {
    console.log(`Hi! My name is ${this.name}. I am ${_age}.`);
  };

  // 생성자 함수를 반환
  return Person;
})();

const me = new Person("Lee", 20);
me.sayHi(); // Hi! My name is Lee. I am 20.
console.log(me.name); // Lee
console.log(me._age); // undefined

const you = new Person("Kim", 30);
you.sayHi(); // Hi! My name is Kim. I am 30.
console.log(you.name); // Kim
console.log(you._age); // undefined

=> 즉시 실행 함수를 사용하여 Person 생성자 함수와 Person.prototype.sayHi 메서드를 하나의 함수 내에 모은 코드.
public, private, protected 같은 접근 제한자를 제공하지 않는 자바스크립트에서 정보 은닉이 가능한 것처럼 보임

즉시 실행 함수가 반환하는 Person 생성자 함수와 Person 생성자 함수의 인스턴스가 상속받아 호출할 Person.prototype.sayHi 메서드는 즉시 실행 함수가 종료된 이후 호출.

Person 생성자 함수와 sayHi 메서드는 이미 종료되어 소멸한 즉시 실행 함수의 지역 변수 _age를 참조할 수 있는 클로저.

=> 문제는 Person 생성자 함수가 여러 개의 인스턴스를 생성할 경우 _age 변수의 상태가 유지되지 않는 것.

const me = new Person("Lee", 20);
me.sayHi(); // Hi! My name is Lee. I am 20.

const you = new Person("Kim", 30);
you.sayHi(); // Hi! My name is Kim. I am 30.

// _age 변수 값이 변경된다!
me.sayHi(); // Hi! My name is Lee. I am 30.

Person.prototype.sayHi 메서드가 단 한 번 생성되는 클로저이기 때문에 발생. 이 메서드는 즉시 실행 함수가 호출될 때 생성. 자신의 상위 스코프인 즉시 실행 함수의 실행 컨텍스트의 렉시컬 환경의 참조를 [[Environment]]에 저장하여 기억. 생성자 함수의 모든 인스턴스가 상속을 통해 호출할 수 있는 Person.prototype.sayHi 메서드의 상위 스코프는 어떤 인스턴스로 호출하더라도 하나의 동일한 상위 스코프를 사용하게 됨. 때문에 생성자 함수가 여러 개의 인스턴스를 생성할 경우 _age 변수의 상태가 유지 되지 않음.

자바스크립트는 정보 은닉을 완전하게 지원하지 않음. 인스턴스 메서드를 사용하면 자유 변수를 통해 흉내낼 수은 있지만 프로토타입 메서드를 사용하면 불가능함.

=> private 필드를 정의할 수 있는 새로운 표준 사양이 제안. “private 필드 정의 제안” 참조

24.6 자주 발생하는 실수

var funcs = [];

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

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

예상 결과 : 0, 1, 2
출력값 : 3, 3, 3

var 키워드로 선언한 i 변수는 함수 레벨 스코프를 갖는 전역 변수. 전역 변수 i를 참조하여 i의 값 3이 출력.

var funcs = [];

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

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

=> 클로저를 사용해 바르게 동작하는 코드. 클로저와 즉시 실행 함수 표현식을 사용하여 각 함수가 자신만의 고유한 i 값을 가지도록 함.

①에서 각 반복마다 즉시 실행 함수 표현식이 호출.
이 함수는 다시 내부에 있는 익명함수를 반환.
반환된 함수가 각각의 funcs[i] 에 저장.

즉시 실행 함수의 매개변수 id는 즉시 실행 함수가 반환한 중첩 함수의 상위 스코프에 존재. 즉시 실행 함수가 반환한 중첩 함수는 자신의 상위 스코프를 기억하는 클로저. 매개변수 id는 즉시 실행 함수가 반환한 중첩 함수에 묶여있는 자유 변수가 되어 그 값이 유지됨.

=> let 키워드를 사용하면 번거로움 해결됨.

const funcs = [];

for (let i = 0; i < 3; i++) { ①
  funcs[i] = function () { return i; };
}

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

=> let 키워드로 선언하면 for문이 반복 실행될 때마다 새로운 렉시컬 환경이 생성됨.

① 에서, 각 반복마다 let i = 0; 구문에 의해 새로운 i 변수가 선언되고 초기화. 이때 let 키워드는 블록 스코프(block scope)를 가지므로, 각 반복마다 새로운 스코프가 형성.
익명 함수 function () { return i; }가 생성되어 funcs[i] 위치에 저장. 이 함수는 자신을 생성한 스코프의 변수인 i에 대한 참조를 유지. 클로저가 형성.
각 반복마다 새롭게 선언된 i 때문에 각각의 클로저(익명함수)는 서로 다른 i를 참조.
원래 기대한 결과인 '0', '1', '2' 출력

let이나 const 키워드를 사용하는 반복문은 코드 블록을 반복 실행할 때마다 새로운 렉시컬 환경을 생성하여 반복할 당시의 상태를 마치 스냅샷처럼 저장

// 요소가 3개인 배열을 생성하고 배열의 인덱스를 반환하는 함수를 요소로 추가한다.
// 배열의 요소로 추가된 함수들은 모두 클로저다.
const funcs = Array.from(new Array(3), (_, i) => () => i); // (3) [ƒ, ƒ, ƒ]

// 배열의 요소로 추가된 함수 들을 순차적으로 호출한다.
funcs.forEach((f) => console.log(f())); // 0 1 2

=> 고차 함수를 사용하는 방법

rustandbone Developer

모던 JS deep dive 2회차 챕터 24 클로저

모던 JS deep dive 2회차

24. 클로저

24.1 렉시컬 스코프

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

24.3 클로저와 렉시컬 환경

24.4 클로저의 활용

24.5 캡슐화와 정보 은닉

24.6 자주 발생하는 실수

Related posts

모던 JS deep dive 2회차 챕터 44 REST API 29 Mar 2024

모던 JS deep dive 2회차 챕터 43 Ajax 28 Mar 2024

모던 JS deep dive 2회차 챕터 42 비동기 프로그래밍 27 Mar 2024