요약

클로저는 외부 함수의 변수를 내부 함수가 참조할 때 변수가 외부 함수의 실행이 끝나도 참조가 유지되고 있으므로 사라지지 않는 프로그래밍 언어의 특성을 말한다.

클로저 예시 코드

function outerFunc() {
		let x = 1; 
		function innerFunc(y) {
			return x + y;
		}
		return {
			innerFunc
		}
}
const closure = outerFunc();
console.log(closure.innerFunc(4)); // 5

이 코드는 클로저의 활용 방법 중 변수 캡슐화에 대한 코드이다.

이렇게 클로저로 변수를 다루면 외부에서는 x에 접근할 수 없으며 함수에 작성한 의도대로만 변수를 다룰 수 있어서 안정적이다.

핵심 개념

함수형 프로그래밍 패턴 데이터 캡슐화 정보 은닉
함수 A의 내부에서 함수 B(중첩함수)가 실행될 때 함수 B는 생성될 시기의 환경을 기억한다.

함수 A의 변수를 참조했다면 이 환경에는 변수도 포함된다.

이 경우 변수는 가비지 컬렉션의 대상이 되지 않는다.

따라서 함수 A의 실행이 종료된 뒤에도 메모리 해제가 되지 않고 유지된다.

계속해서 참조 가능한 상태를 유지한다.

카운터 함수를 클로저로 만든 코드 예제를 살펴보면 다음과 같다.

function createCounter() {
  let count = 0; // `createCounter` 함수 스코프 내에 숨겨진 변수 `count`

  return {
    increment: function() {
      count += 1;
      return count;
    },
    decrement: function() {
      count -= 1;
      return count;
    },
    getCount: function() {
      return count; // 현재 카운트 값을 반환하되, 외부에서 `count`를 직접 변경할 수는 없음
    }
  };
}

const counter = createCounter(); // 클로저를 통해 `count` 상태를 캡슐화
console.log(counter.getCount()); // 0
counter.increment();
counter.increment();
console.log(counter.getCount()); // 2
counter.decrement();
console.log(counter.getCount()); // 1

counter.increment()와 counter.decrement() 함수로만 count 변수를 다룰 수 있게 된다.

클로저의 개념을 공부하며, 활용 예로 React의 useState 훅이 떠올랐다.

이 훅을 통해 클로저가 상태를 안전하게 캡슐화하고 초기값 0으로 설정된 상태는 오직 setState() 함수를 통해서만 변경할 수 있다.

더 공부해볼 키워드
스코프와 스코프 체인 : 함수가 어떻게 자신의 외부환경에 접근하는지
익명 함수와 함수 표현식 : 클로저를 생성할 때 사용된다.
모듈 패턴 : 클로저를 활용한 디자인 패턴
IIFE(Immediately Invoked Function Expression) : 즉시 실행 함수 표현식, 스코프를 제한하고 변수를 보호하는데 유용하다.