[JavaScript] 클로저

클로저란?

클로저는 함수와 그 함수가 참조하는 변수들이 함수 외부에서 호출되더라도 그 변수들을 여전히 기억하고 접근할 수 있게 해주는 특성을 의미한다.

쉽게 말해, 함수가 실행될 때 만들어지는 환경(스코프)을 기억해서 나중에 그 스코프에 있는 변수들에 접근할 수 있는 것이다.

• 예시 코드

function outer() {
  let outerVar = "I am from outer scope!";
  
  function inner() {
    console.log(outerVar); // 외부 함수의 변수에 접근
  }

  return inner; // inner 함수를 반환
}

const closureFunction = outer(); // outer 함수 실행 후, inner 함수가 반환됨
closureFunction(); // "I am from outer scope!"가 출력됨

코드 설명

• outer 함수 안에 outerVar라는 변수가 있다.
• inner 함수는 outerVar에 접근할 수 있는 함수이다.
• outer 함수가 호출되고, inner 함수가 반환되면서 closureFunction에 할당된다.
• closureFunction을 실행하면, inner 함수가 실행되며 outerVar 값을 출력한다. 이는 inner 함수가 outer 함수의 스코프를 기억하고 있기 때문에 가능한 일이다.
  • outer 함수가 이미 실행을 마친 후에도 inner 함수는 outer 함수에서 선언한 변수 outerVar에 접근할 수 있다.

클로저 활용

클로저는 변수의 유효 범위를 유지하고, 함수 외부에서도 해당 변수를 안전하게 보호하는 데 유용하게 사용된다. 예를 들어, 함수에서 계산된 값을 외부에서 변경하지 못하도록 하는 방법으로 활용할 수 있다.

• 예시 코드 (카운터 만들기)

function createCounter() {
  let count = 0;  // 카운트를 추적할 변수

  return {
    increment: function() {
      count++;  // count 값을 증가시킴
      console.log(count);
    },
    decrement: function() {
      count--;  // count 값을 감소시킴
      console.log(count);
    },
    getCount: function() {
      return count;  // 현재 카운트 값 반환
    }
  };
}

const counter = createCounter();  // 카운터 생성

counter.increment();  // 1 출력
counter.increment();  // 2 출력
counter.decrement();  // 1 출력
console.log(counter.getCount());  // 1 출력

코드 설명

• 전체 흐름
  1. createCounter 함수는 카운터를 추적하는 기능을 가진 여러 개의 함수를 반환한다.
  2. 반환된 함수들은 count라는 변수에 접근할 수 있는데, 이 변수는 createCounter 함수 내에만 존재하며, 외부에서 직접적으로 접근할 수 없다.
  3. 클로저 덕분에 반환된 함수들(increment, decrement, getCount)이 여전히 count 값을 기억하고, 이를 조작할 수 있다.
• 코드 설명
  • createCounter 함수가 실행되면, count라는 변수가 만들어진다. 이 변수는 createCounter 함수 내에서만 접근할 수 있다.
  • 이 변수는 카운터의 값을 추적한다. 초기값은 0.

    return {
      increment: function() {
        count++;  // count 값을 증가시킴
        console.log(count);
      },
      decrement: function() {
        count--;  // count 값을 감소시킴
        console.log(count);
      },
      getCount: function() {
        return count;  // 현재 카운트 값 반환
      }
    };
  }
  

  • createCounter 함수는 객체를 반환한다. 이 객체는 3개의 함수(increment, decrement, getCount)를 가지고 있다.
  • 각 함수는 count 변수를 참조한다. 중요한 점은 이 함수들이 클로저이기 때문에, createCounter 함수가 끝난 후에도 count에 접근할 수 있다는 것이다.

  const counter = createCounter();  // 카운터 생성
  

  • createCounter()가 실행되면 counter는 객체를 반환받는다. 이 객체는 increment, decrement, getCount 함수가 포함되어 있다.
  • 이 객체는 count 변수를 계속 기억하며, 이 함수들을 호출할 때마다 count 값을 변경하거나 반환할 수 있다.
  💡핵심 count는 createCounter 내에서만 직접 접근할 수 있지만, increment, decrement, getCount 함수들이 createCounter 내의 count를 기억하고 있기 때문에, 이 함수들을 통해 count를 간접적으로 수정하거나 조회할 수 있는 것이다.
• function createCounter() { let count = 0; // 카운트를 추적할 변수