[javascript] 클로저를 사용할 때 메모리 관리에 주의할 점

05 Dec 2023

javascript

클로저는 자바스크립트에서 매우 강력한 개념으로, 함수와 그 함수가 생성되었을 때의 lexical scope에 접근할 수 있는 기능을 제공합니다. 하지만 클로저를 사용할 때는 메모리 관리에 주의해야 합니다.

클로저는 외부 함수의 변수를 참조하는 경우, 해당 변수의 메모리가 해제되지 않는 한 계속해서 참조하게 됩니다. 이로 인해 코드 실행 시에 예상하지 못한 메모리 누수가 발생할 수 있습니다.

이러한 문제를 방지하기 위해 클로저를 사용할 때에는 다음과 같은 주의사항을 따라야 합니다:

1. 필요한 변수만 참조하기

클로저 함수 내에서 외부 함수의 모든 변수를 참조해야 할 필요는 없습니다. 필요한 변수만 참조하여 사용하면, 불필요한 메모리 소비를 줄일 수 있습니다.

function outerFunction() {
  let unnecessaryVariable = 'Unnecessary';

  return function innerFunction() {
    let necessaryVariable = 'Necessary';
    
    console.log(necessaryVariable);
    // 'Unnecessary' 변수를 참조할 필요가 없는 경우, 메모리 누수를 방지하기 위해 해당 변수를 참조하지 않습니다.
    
    // ...
  };
}

2. 클로저 함수의 사용이 끝난 경우 메모리 해제하기

클로저가 더 이상 필요하지 않은 경우, 해당 클로저에 할당된 메모리를 명시적으로 해제해야 합니다. 이를 위해 클로저를 변수에 할당하고, 해당 변수에 null을 할당하여 참조를 제거합니다.

let closureFunction = outerFunction();

// ...

closureFunction();

closureFunction = null;

3. 이벤트 리스너 해제하기

클로저를 이용해 이벤트 리스너를 등록한 경우, 이벤트 발생이 더 이상 필요하지 않은 경우에는 명시적으로 이벤트 리스너를 해제해야 합니다. 이를 위해 removeEventListener 함수를 사용하여 등록된 이벤트 리스너를 제거합니다.

function addEventListener(element, eventType, handler) {
  element.addEventListener(eventType, handler);
  
  return function removeEventListener() {
    element.removeEventListener(eventType, handler);
  };
}

// 이벤트 리스너를 등록하고, 리스너를 해제하는 클로저를 생성합니다.
let removeListener = addEventListener(document.getElementById('myElement'), 'click', () => {
  // 이벤트 핸들러
});

// ...

// 이벤트 리스너를 제거합니다.
removeListener();

클로저를 사용할 때는 메모리 관리에 주의해야 합니다. 필요한 변수만 참조하고, 사용이 끝난 클로저는 명시적으로 해제하여 메모리 누수를 방지하는 것이 중요합니다.