클로저

자바스크립트 클로저(Closure)란, 함수가 자신이 생성될 때의 환경(Lexical Environment)을 기억하여, 함수가 실행되는 동안에도 이를 기억하고 사용할 수 있는 것을 의미한다.

클로저는 다음과 같은 상황에서 주로 사용된다.

1. 정보 은닉(Information Hiding)

클로저를 사용하여 함수 내부에 선언된 변수를 외부에서 직접 접근하지 못하도록 은닉한다.

function counter() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  };
}

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

위 코드에서 count 변수는 counter 함수 내부에서만 사용된다. 하지만 increaseCount 함수를 호출할 때마다 count 값이 증가하는 것을 볼 수 있다. 이는 counter 함수가 클로저를 형성하여, 자신이 생성될 때의 Lexical Environment를 기억하고 있기 때문이다.

2. 메모리 관리(Memory Management)

클로저를 사용하여 객체에 대한 참조를 유지하면서, 객체가 소멸될 때까지 객체의 속성이나 메소드를 사용할 수 있다.

function makeCounter() {
  let count = 0;
  let counter = {
    increase: function() {
      count++;
      console.log(count);
    },
    decrease: function() {
      count--;
      console.log(count);
    }
  };
  return counter;
}

const myCounter = makeCounter();
myCounter.increase(); // 1
myCounter.increase(); // 2
myCounter.decrease(); // 1

위 코드에서 counter 객체는 makeCounter 함수 내부에서 생성되었지만, myCounter 변수를 통해 외부에서도 사용할 수 있다. 이는 counter 객체가 클로저를 형성하여, 자신이 생성될 때의 Lexical Environment를 기억하고 있기 때문이다.

3. 콜백 함수(Callback Function)

클로저를 사용하여 콜백 함수에 데이터를 전달할 수 있다.

function fetchData(url, callback) {
  fetch(url).then(response => {
    callback(response);
  });
}

fetchData('https://api.example.com/data', function(response) {
  console.log(response);
});

위 코드에서 callback 함수는 fetchData 함수 내부에서 response 값을 전달받아 실행된다. 이때 callback 함수는 클로저를 형성하여, fetchData 함수가 생성될 때의 Lexical Environment를 기억하고 있다.

클로저는 자바스크립트에서 매우 유용하게 사용되지만, 클로저를 사용하면서 필요하지 않은 객체에 대한 참조를 유지하면 해당 객체가 소멸되지 않아 메모리가 낭비되므로 필요한 객체만 유지하도록 주의해야 한다.