자바스크립트에서 클로저는 매우 강력하면서도 복잡한 개념으로, 올바르게 사용하지 않으면 메모리 누수를 발생시킬 수 있습니다. 이번 글에서는 클로저의 동작 방식과 메모리 누수를 피하는 방법 등을 살펴보겠습니다.

클로저란?

클로저는 함수와 함수가 선언된 렉시컬 환경(Lexical Environment)의 조합으로 구성됩니다. 함수가 외부 변수를 기억하고, 이러한 외부 변수에 여전히 접근할 수 있는 경우, 해당 함수는 클로저입니다. 즉, 클로저는 함수가 해당 함수가 선언된 렉시컬 환경(Lexical Environment)의 범위를 벗어난 후에도 해당 렉시컬 환경에 대한 참조를 유지하는 것을 의미합니다.

클로저의 동작 방식

아래 예제는 클로저의 동작 방식을 보여줍니다.

function outerFunction() {
  var externalVariable = "I am external";

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

  return innerFunction;
}

var closure = outerFunction();
closure(); // "I am external" 출력

위의 예제에서 innerFunction은 externalVariable을 기억하고 있기 때문에, outerFunction이 실행된 후에도 externalVariable에 접근할 수 있습니다.

메모리 누수와 클로저

클로저가 메모리 누수를 유발하는 경우에는, 외부 변수가 클로저에 의해 계속 참조되고 있어 더 이상 필요하지 않은 상황에서도 메모리를 해제하지 못하는 경우입니다. 이는 의도치 않은 메모리 낭비로 이어질 수 있습니다.

메모리 누수를 방지하기 위해서는 클로저가 더 이상 필요하지 않을 때 외부 변수를 해제하는 작업을 명시적으로 수행해야 합니다.

메모리 누수를 피하는 방법

메모리 누수를 피하기 위해서는 클로저로 인해 참조되는 외부 변수를 필요 이상으로 유지하지 않도록 주의해야 합니다. 필요 없어진 외부 변수에는 null을 할당하여 메모리를 해제할 수 있습니다.

function init() {
  var bigData = new Array(1000000).fill('some text');
  
  return function() {
    console.log(bigData.length);
  }
}

var closure = init();
closure();

// 이후 bigData를 더 이상 사용하지 않을 때
bigData = null; // 메모리 누수 방지

마치며

클로저는 자바스크립트에서 강력한 기능을 제공하지만, 이를 정확하고 올바르게 사용하지 않으면 메모리 누수 문제를 유발할 수 있습니다. 따라서 개발자는 클로저를 사용할 때 메모리 관리에 대한 주의가 필요합니다.

참고 문헌:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
• https://www.javascripttutorial.net/javascript-closures/
• https://auth0.com/blog/four-types-of-leaks-in-your-javascript-code-and-how-to-get-rid-of-them/