[JS] 클로저(Closure)

클로저 (Closure)

클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수다.

클로저는 내부함수가 유효한 상태에서 외부함수가 종료되어 외부 함수의 실행 컨텍스트가 반환되어도, 외부함수의 실행 컨텍스트 내의 확성 객체(함수 선언 등의 정보를 가지고 있음)는 내부함수에 의해 참조되는 한 유효하여 내부함수가 스코프체인을 통해 참조할 수 있는 것을 의미한다.

function outerFunction() {
  let outerVariable = 'I am from the outer function';

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

const closureExample = outerFunction();
closureExample(); // 결과: "I am from the outer function"

위의 코드에서 outerFunction은 내부에 outerVariable이라는 변수를 가지고 있다. 또한 그 안에 정의된 innerFunction은 outerVariable에 접근한다. 그리고 outerFunction이 실행되면서 반환된 innerFunction을 clouserExample에 할당한 후 closureExample()을 호출하면, 클로저가 발생해 innterFunction은 외부함수인 outerFunction의 변수에 접근 할 수 있다.

클로저가 필요한 이유

1. 데이터 캡슐화

외부에서의 접근을 제한하고, 내부의 함수에서만 해당 데이터에 접근 할수 있게 한다.

function createCounter() {
  let count = 0;

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

const counter = createCounter();
counter(); // 출력: 1
counter(); // 출력: 2

createCounter가 클로저를 형성하여, count 변수를 외부에서 직접 접근하는 것을 막고 내부 함수를 통해 안전하게 데이터를 증가시킨다.

2. 상태 유지

클로저는 함수가 선언될 때 환경을 기억하므로, 함수가 외부에서 호출되어도 그 상태를 유지할 수 있다.

function outerFunction() {
  let outerVariable = 'I am from the outer function';

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

const closureExample = outerFunction();
closureExample(); // 결과: "I am from the outer function"

innerFunction은 클로저를 통해 outerVariable 변수에 접근하여 외부 함수의 형태를 기억하고, 이를 바탕으로 출력한다.

3. 비동기 작업과 콜백함수

function fetchData(url, callback) {
  // 비동기 작업
  setTimeout(function() {
    const data = "Data from " + url;
    callback(data);
  }, 1000);
}

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

setTimeout 함수 내부의 콜백 함수가 클로저를 형성하여 외부 변수인 url과 callback에 접근하여 비동기 작업을 완료하고 결과를 전달한다.

마무리

일단 아직까지 자바스크립트에서 클로저를 사용해본적이 없어서 단번에 이해하긴 어렵다. 좀 더 생각하면서 코드를 짜봐야겠다.