[javascript] 클로저와 전역 변수, 지역 변수의 관련성

05 Dec 2023

javascript

클로저(Closure)는 자바스크립트에서 중요한 개념 중 하나입니다. 클로저는 함수와 함수가 선언된 어휘적 환경(Lexical Environment)의 조합입니다. 이러한 조합은 함수가 생성될 당시의 스코프 체인(Scope Chain)과 변수에 대한 참조를 포함합니다.

클로저의 이해

클로저는 내부 함수가 외부 함수의 범위에 접근할 수 있는 것을 말합니다. 이는 외부 함수가 이미 실행된 후에도 내부 함수가 외부 함수의 변수를 사용할 수 있다는 것을 의미합니다. 단순히 말하면, 내부 함수는 자신의 스코프에 없는 변수를 참조할 수 있습니다.

function outer() {
  var outerVariable = 'I am outer';

  function inner() {
    console.log(outerVariable); // 접근 가능
  }

  return inner;
}

var closureExample = outer();
closureExample(); // 'I am outer' 출력

위의 예제에서 inner 함수는 outer 함수의 스코프에 있는 변수인 outerVariable에 접근할 수 있습니다. 이렇게 inner 함수가 outer 함수의 실행 컨텍스트를 참조할 수 있는 것이 바로 클로저의 동작 원리입니다.

클로저와 전역 변수, 지역 변수

클로저는 주로 전역 변수와의 관계에서 잘 알려져 있습니다. 전역 변수는 어떤 함수에서든 접근이 가능하기 때문에 클로저를 사용하여 전역 변수에 접근할 수 있습니다.

var globalVariable = 0;

function incrementGlobalVariable() {
  globalVariable++;
  console.log(globalVariable);
}

incrementGlobalVariable(); // 1

위의 예제에서 incrementGlobalVariable 함수는 전역 변수인 globalVariable에 접근하여 값을 증가시킵니다. 이런 경우, 클로저는 함수가 외부 변수에 접근하고 수정할 수 있는 기능을 제공합니다.

반면에 지역 변수는 그 함수 내에서만 접근 가능하므로 외부 함수에서 클로저를 통해 접근하기는 어렵습니다.

function outer() {
  var outerVariable = 0;

  function incrementOuterVariable() {
    outerVariable++;
    console.log(outerVariable);
  }

  return incrementOuterVariable;
}

var closureExample = outer();
closureExample(); // 1

위의 예제에서 incrementOuterVariable 함수는 outer 함수의 지역 변수인 outerVariable에 접근하여 값을 증가시킵니다. 클로저를 통해 외부 함수의 지역 변수에 접근할 수 있는 이러한 특성은 내부 함수가 외부 함수의 상태를 유지할 수 있도록 해줍니다.

결론

자바스크립트에서 클로저는 함수와 함수가 선언된 어휘적 환경의 조합입니다. 클로저를 이용하면 외부 함수의 변수를 참조하고 수정할 수 있어, 전역 변수와의 관련성에서 주로 사용됩니다. 또한 클로저를 통해 내부 함수가 외부 함수의 지역 변수와 상태를 유지할 수 있습니다.

클로저를 사용할 때는 외부 변수에 대한 접근과 수정에 주의해야 합니다. 적절하지 않은 사용은 메모리 누수 등의 문제를 유발할 수 있으므로, 신중하게 사용해야 합니다.

참고 자료

MDN Web Docs - Closures