TUTORIAL

클로저와 메모리 관리

JavaScript 클로저 심화 학습: 메모리 관리와 최적화 기법을 배웁니다.

럿지 AI 팀
2025-01-07
15분
클로저란 무엇인가?

함수가 선언된 렉시컬 환경(Lexical Environment)을 기억하고,
그 환경에 있는 변수에 접근할 수 있는 함수입니다.

function createCounter() {
  let count = 0;  // 외부 변수

  return function() {  // 클로저
    count++;  // 외부 변수 접근
    return count;
  };
}

const counter = createCounter();
console.log(counter());  // 1
console.log(counter());  // 2
console.log(counter());  // 3

메모리 관리의 중요성

클로저는 외부 스코프의 변수를 참조하기 때문에 가비지 컬렉션이 되지 않습니다. 이로 인해 메모리 누수(Memory Leak)가 발생할 수 있습니다.

메모리 누수 패턴

// 불필요한 참조 유지 function leak() { const data = new Array(1000000); return () => data.length; }

올바른 해제

// 참조 해제 let closure = createLargeClosure(); // 사용 후 closure = null; // GC 가능

클로저 활용 사례

데이터 프라이버시

외부에서 접근 불가능한 private 변수 구현

함수 팩토리

설정이 적용된 함수를 생성하는 패턴

커링(Currying)

인자를 하나씩 받아 처리하는 함수 체인

메모이제이션

계산 결과를 캐싱하여 성능 최적화

메모이제이션 예제

function memoize(fn) {
  const cache = {};  // 클로저로 캐시 유지

  return function(...args) {
    const key = JSON.stringify(args);

    if (cache[key]) {
      console.log('캐시 히트!');
      return cache[key];
    }

    const result = fn.apply(this, args);
    cache[key] = result;
    return result;
  };
}

const slowFn = (n) => {
  // 무거운 연산 시뮬레이션
  return n * 2;
};

const memoizedFn = memoize(slowFn);
memoizedFn(5);  // 계산
memoizedFn(5);  // 캐시 히트!

메모리 관리 체크리스트

1
불필요한 클로저 참조 해제하기
2
이벤트 리스너 정리하기
3
WeakMap/WeakSet 활용하기
4
타이머/인터벌 정리하기
5
DevTools Memory 탭 확인
6
순환 참조 피하기

WeakMap 활용

WeakMap은 키가 약한 참조를 유지하므로 메모리 누수를 방지합니다.

const privateData = new WeakMap();

class User {
  constructor(name) {
    privateData.set(this, { name, password: '' });
  }

  setPassword(pwd) {
    privateData.get(this).password = pwd;
  }
}

let user = new User('John');
user.setPassword('secret');
user = null;  // WeakMap 엔트리도 자동 정리됨

관련 태그

#Closure
#JavaScript
#Memory
#메모리관리
#최적화