5. 클로저

👀 클로저란 ?

1. 클로저는 내부 함수가 외부 함수보다 더 오래 유지 되었을때, 외부 함수가 종료된 후에도 외부 함수의 변수를 내부 함수에서 참조할 수 있는 구조입니다.
2. 클로저가 변수를 참조할 수 있는 이유는 실행 컨텍스트의 Lexical Environment와 관련이 있습니다. Lexical Environment는 변수나 함수 선언을 저장하는 Environment Record와, 외부 함수의 Lexical Environment를 참조하는 Outer Environment Reference로 이루어져 있습니다. 덕분에 외부 함수가 종료된 후에도 내부 함수는 외부 함수의 변수를 지속적으로 접근할 수 있습니다. 이때 참조된 변수는 힙 메모리에 저장되어 유지됩니다.
3. 함수가 호출될 때마다 실행 컨텍스트가 생성되어 스택에 쌓이고, 클로저도 이 과정에서 활성화 됩니다.

 

🔵 장점

1. 원하는 정보(변수)를 은닉할 수 있습니다.

function createCounter() {

  let count = 0;

  function increment() { 
    count++;
    console.log(count);
  }

  function decrement() {
    count--;
    console.log(count);
  }

  return {
    increment: increment,
    decrement: decrement
  };
}

console.log(count); // 접근 불가능

메서드들은 외부 함수의 변수인 count 변수를 계속 참조하고 있습니다.

그래서 힙 메모리에서 접근과 수정이 가능하고 외부에서 count 변수에 직접적으로 접근할 수 없습니다.

count 변수는 오직 increment()와 decrement()를 통해서만 접근이 가능합니다.

 

 

2. 모듈화를 통해 은닉이 필요한 정보들은 함수 안에 숨기고, 필요한 기능만 함수 외부로 노출할 수 있습니다.

const counter = (function counterIIFE(){
  let count = 0;

  return {
    getCounter: function () { 
        return count;
    },

    incrementCount: function () { 
        count++;
        return count;
    },

    decrementCount: function () {
        count--;
        return count;
    }
  }
})();

counter.getCounter() // 0
counter.incrementCount() // 1
counter.incrementCount() // 2
counter.decrementCount() // 1
counter.getCounter() // 1

함수를 정의했을때 동시에 호출되는 IIFE(즉시 실행 함수 표현식)을 이용해서 counter에서 counterIIFE가 실행하면서 객체가 반환됩니다. 그 후에는 getCounter, incrementCount, decrementCount 메소드를 통해서만 count 변수에 접근할 수 있습니다.

위의 패턴을 통해 모듈화에서 필요한 작은 단위의 독립적인 기능, 재사용성, 캡슐화, 유지보수의 장점들을 가져갈 수 있습니다.

 

 

3. 상태 유지가 가능합니다.

function createAdder(x) {
  return function (y) {
    return x + y;
  };
}

const initAdd = createAdder(3);
initAdd(2) // 5
initAdd(8) // 11

함수형 프로그래밍 패턴 중 하나인 currying 패턴과 클로저를 통해서 함수가 호출될 때마다 인자값 x의 상태 유지가 가능합니다.

인자는 함수 내부에서 변수로 취급되기 때문에 클로저로 참조할 수 있습니다.

 

 

🔴 단점

1. 메모리 누수가 발생할 위험이 있습니다.

가비지 컬렉터는 외부 함수 실행이 끝난 후에도 클로저가 참조하는 외부 함수의 변수를 힙 메모리에서 삭제할 수 없습니다. 그래서 클로저를 무분별하게 사용하면 참조된 외부 변수가 힙 메모리에 계속 남아있어, 메모리 누수가 발생할 수 있습니다.

2. 디버깅이 까다로울 수 있습니다.

외부 함수의 변수를 계속 참조하고 있기 때문에, 디버깅 할때 클로저 내부에서 참조되고 있는 변수의 상태를 이해하는 것이 어려워질 수 있습니다. 그리고 스코프가 많이 겹쳐진 클로저일 경우 변수의 값이 언제 바뀌었는지 파악하기 까다롭습니다.

 

 

---

24년 10월 업데이트