클로저(Closure)란?

클로저(Closure)란? 자바스크립트에서 함수와 그 함수가 선언된 렉시컬 환경을 함께 기억하는 구조

• 함수 내부에 함수를 정의하고, 그 내부 함수가 외부 함수의 변수에 접근할 때 클로저가 발생한다
• 클로저를 이용하면 함수가 생성된 시점의 외부 변수를 참조하고, 그 상태를 나중에 함수가 호출될 때까지 유지할 수 있다
• 특정 문법이나 규칙을 따로 작성해서 만드는 게 아닌, 함수 스코프와 렉시컬 스코프에 의해 자동으로 만들어진다
• 내부 함수가 외부 함수의 변수에 접근하지 않으면 클로저가 형성되지 않는다
  

  function outer() {
      let count = 0;
      return function inner() {
          console.log('Hello, World!');
      };
  }
  
  const innerFunction = outer();
  innerFunction(); // "Hello, World!" 출력

  
  
  

렉시컬 스코프 - 변수와 함수가 어디서 정의되었는지에 따라 스코프가 결정된다는 규칙이자, 그 규칙을 따라 결정된 스코프

렉시컬 환경 - 렉시컬 스코프의 규칙을 구체적으로 메모리 구조로 관리하는 방식. 즉, 그 함수나 코드가 어떤 변수들을 참조할 수 있는지를 기억하고 관리하는 객체

 

클로저 예시

function outerFunction() {
    let count = 0; // 외부 함수의 지역 변수

    function innerFunction() {
        count++; // 외부 함수의 변수를 참조
        console.log(count);
    }

    return innerFunction; // 내부 함수를 반환
}

const counter = outerFunction();
counter(); // 1
counter(); // 2
counter(); // 3

• outerFunction은 한 번만 실행되고, ( const counter = outerFunction(); )
• outerFunction이 호출되면, count 변수가 초기화되고 outerFunction의 렉시컬 환경이 생성된다
• innerFunction이 정의되면서, 이 함수는 자신의 렉시컬 환경으로 outerFunction의 렉시컬 환경을 참조한다 ( outerFunction의 내부에서 선언되었기 때문에)
• outerFunction이 끝나더라도, innerFunction이 반환되어 count 변수를 참조하는 클로저가 만들어지므로, count는 여전히 메모리에 남아있고, innerFunction을 통해 접근할 수 있다
• counter는 innerFunction을 가리키고 있으며, 이 함수는 outerFunction의 렉시컬 환경을 기억하고 있다

const counter1 = outerFunction(); // count는 0으로 초기화
counter1(); // 1
counter1(); // 2

const counter2 = outerFunction(); // 새로운 count가 0으로 초기화
counter2(); // 1 (새로 초기화된 count 변수)
counter2(); // 2

• 여기서 counter1과 counter2는 서로 다른 클로저를 참조하기 때문에 각각의 count 변수가 따로 유지된다

 

클로저의 특징

1. 상태 유지
   
   • 클로저는 함수가 실행된 이후에도 그 함수가 선언된 환경을 기억하므로, 상태를 계속해서 유지할 수 있다
2. 데이터 은닉
   • 클로저는 외부 함수의 변수를 외부에서 직접 접근하지 못하도록 하고, 내부 함수로만 접근할 수 있도록 만든다
     이를 통해 데이터 은닉(Encapsulation)을 실현할 수 있다

 

끝!